File Attach

Make file input dynamic.

How to use?

Copy-paste the following <script> near the end of your pages under JS Front 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>

Examples

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>

Avatar example New

Preview
HTML

                    
                      <form>
                        <label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
                          <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                        </label>
                        <div class="btn btn-sm btn-primary file-attachment-btn">Upload Photo
                          <input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader"
                                 data-hs-file-attach-options='{
                                    "textTarget": "#avatarImg",
                                    "mode": "image",
                                    "targetAttr": "src",
                                    "resetTarget": ".js-file-attach-reset-img",
                                    "resetImg": "../assets/img/160x160/img39.jpg",
                                    "allowTypes": [".png", ".jpeg", ".jpg"]
                                 }'>
                        </div>
                        <button type="button" class="js-file-attach-reset-img btn btn-sm btn-white ml-2">Delete</button>
                      </form>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-file-attach-options='{
                 ...
              }' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-file-attach-options='{}'.