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 

                    
                      <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

Upload Photo 
                    
                      <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"
                                 }'>
                        </div>
                      </form>

JavaScript behavior

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='{}'.

Parameters Description Default value

textTarget

 Selector of the element into which information about the loaded file will be displayed null

maxFileSize

 Maximum upload file size in kb 1024 or infinity (to disable file size detection)

errorMessage

 Text of the message displayed in alert if the file size exceeds the one set in maxFileSize null