File Attachments

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

              
                <script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of custom file
                    $('.js-file-attach').each(function () {
                      var customFile = new HSFileAttach($(this)).init();
                    });
                  });
                </script>

Custom file input

Preview
HTML

                    
                      <form>
                        <div class="custom-file">
                          <input type="file" class="js-file-attach custom-file-input" id="customFile"
                                  data-hs-file-attach-options='{
                                    "textTarget": "[for=\"customFile\"]"
                                 }'>
                          <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                      </form>

Custom file btn

Preview
HTML

                    
                      <form>
                        <!-- File Attachment Button -->
                        <label class="btn btn-sm btn-primary transition-3d-hover custom-file-btn" for="fileAttachmentBtn">
                          <span id="customFileExample5">Choose file to upload</span>
                          <input id="fileAttachmentBtn" name="custom-file" type="file" class="js-file-attach custom-file-btn-input"
                                 data-hs-file-attach-options='{
                                    "textTarget": "#customFileExample5"
                                 }'>
                        </label>
                        <!-- End File Attachment Button -->
                      </form>

Avatar uploader

Preview
HTML

                    
                      <form>
                        <div class="d-flex align-items-center">
                          <!-- Avatar -->
                          <label class="avatar avatar-xl avatar-circle avatar-uploader mr-5" for="avatarUploader">
                            <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">

                            <input type="file" class="js-file-attach avatar-uploader-input" id="avatarUploader"
                                   data-hs-file-attach-options='{
                                      "textTarget": "#avatarImg",
                                      "mode": "image",
                                      "targetAttr": "src",
                                      "resetTarget": ".js-file-attach-reset-img",
                                      "resetImg": "../assets/img/160x160/img1.jpg"
                                   }'>

                            <span class="avatar-uploader-trigger">
                              <i class="tio-edit avatar-uploader-icon shadow-soft"></i>
                            </span>
                          </label>
                          <!-- End Avatar -->

                          <button type="button" class="js-file-attach-reset-img btn btn-white">Delete</button>
                        </div>
                      </form>

                    
                      <form>
                        <!-- File Attachment Input -->
                        <label class="custom-file-boxed" for="customFileInputBoxedEg">
                          <span id="customFileBoxedEg">Browse your device and upload documents</span>
                          <small class="d-block text-muted">Maximum file size 10MB</small>

                          <input id="customFileInputBoxedEg" name="custom-file-boxed" type="file" class="js-file-attach custom-file-boxed-input"
                                 data-hs-file-attach-options='{
                                   "textTarget": "#customFileBoxedEg"
                                 }'>
                        </label>
                        <!-- End File Attachment Input -->
                      </form>

Preview
HTML

                    
                      <!-- Button Trigger Modal -->
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open modal
                      </button>
                      <!-- End Button Trigger Modal -->

                      <!-- Modal -->
                      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">File attachment</h5>
                              <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                <i class="tio-clear tio-lg" aria-hidden="true"></i>
                              </button>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <form>
                                <!-- File Attachment Input -->
                                <label class="custom-file-boxed" for="fileAttachmentLabelModalEg">
                                  <span id="fileAttachmentInputModalEg">Browse your device and upload documents</span>
                                  <small class="d-block text-muted">Maximum file size 10MB</small>

                                  <input id="fileAttachmentLabelModalEg" name="custom-file-boxed" type="file" class="js-file-attach custom-file-boxed-input"
                                         data-hs-file-attach-options='{
                                           "textTarget": "#fileAttachmentInputModalEg"
                                         }'>
                                </label>
                                <!-- End File Attachment Input -->
                              </form>
                            </div>
                            <!-- End Body -->

                            <!-- Footer -->
                            <div class="modal-footer">
                              <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                              <button type="button" class="btn btn-primary">Continue</button>
                            </div>
                            <!-- End Footer -->
                          </div>
                        </div>
                      </div>
                      <!-- End Modal -->

How to use

Custom file input

Custom file btn

Avatar uploader

Custom file boxed

Modal example