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-custom-file-input').each(function () {
                      var customFile = new HSFileAttach($(this)).init();
                    });
                  });
                </script>
              
            

Examples

                    
                      <form>
                        <div class="custom-file">
                          <input type="file" class="js-custom-file-input 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>
                    
                  

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