File attach

Upload files or attachments.

How to use?

To add hs.file-attach.js in your page, add a .js-custom-file-attach class to the input tag.

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

                
                  <script src="../../assets/js/components/hs.file-attach.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 file attach module
                      $.HSCore.components.HSFileAttach.init('.js-custom-file-attach');
                    });
                  </script>
                
              

Basic example

                      
                        <!-- File Attachment Input -->
                        <label class="file-attachment-input py-8" for="floorplanAttachmentInput">
                          <span class="d-block mb-2">Upload floorplan</span>
                          <small class="d-block text-muted">Maximum file size is 1MB</small>
                          <input id="floorplanAttachmentInput" name="images-attachment" type="file" class="js-custom-file-attach file-attachment-input__label"
                                 data-result-text-target="#floorplanFileUploadText">
                          <span id="floorplanFileUploadText"></span>
                        </label>
                        <!-- End File Attachment Input -->
                      
                    

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-result-text-target="".