Form Layouts - File Attachement Forms

Front's form control expands on different styles, layout options, and custom components for creating a wide variety of forms.

Upload picture #1

Image Description
                  
                    <!-- Update Avatar Form -->
                    <form class="media align-items-center">
                      <div class="u-lg-avatar mr-3">
                        <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img2.jpg" alt="Image Description">
                      </div>

                      <div class="media-body">
                        <label class="btn btn-sm btn-primary transition-3d-hover file-attachment-btn mb-1 mb-sm-0 mr-1" for="fileAttachmentBtn">
                          Upload New Picture
                          <input id="fileAttachmentBtn" name="file-attachment" type="file" class="file-attachment-btn__label">
                        </label>

                        <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover mb-1 mb-sm-0">Delete</button>
                      </div>
                    </form>
                    <!-- End Update Avatar Form -->
                  
                

Upload picture #1

                  
                    <!-- File Attachment Input -->
                    <label class="file-attachment-input mb-7" for="imagesAttachmentInput">
                      <img class="js-svg-injector max-width-10 mb-3" src="../../assets/svg/illustrations/add-file.svg" alt="SVG"
                           data-parent="#uploadForm">
                      <span class="d-block mb-2">Browse your device and upload images</span>
                      <small class="d-block text-muted">Maximum file size is 2MB</small>
                      <input id="imagesAttachmentInput" name="images-attachment" type="file" class="js-custom-file-attach file-attachment-input__label"
                             data-result-text-target="#fileUploadText">
                      <span id="fileUploadText"></span>
                    </label>
                    <!-- End File Attachment Input -->

                    <button type="submit" class="btn btn-primary btn-block transition-3d-hover">Submit</button>
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/js/components/hs.file-attach.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of file attach module
                        $.HSCore.components.HSFileAttach.init('.js-custom-file-attach');
                      });
                    </script>