Dropzone

Drag'n'drop file-attach uploads with image previews.

Official documentation

For more detailed information and examples, see the official documentation: Dropzone.js.

How to use?

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

            
              <script src="../../assets/vendor/dropzone/dropzone.js"></script>

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

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

Basic example

Drag files here to upload

                  
                    <!-- Dropzone -->
                    <div id="SVGIcon" class="svg-preloader u-dropzone gradient-overlay-half-primary-v4">
                      <div class="dz-message py-6">
                        <figure class="max-width-10 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/illustrations/drag-n-drop.svg" alt="Image Description"
                               data-parent="#SVGIcon">
                        </figure>
                        <span class="d-block">Drag files here to upload</span>
                      </div>
                    </div>
                    <!-- End Dropzone -->

                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                      });
                    </script>

Preview template option

If you want to use an actual HTML element instead of providing a String as a config option, you could create a div with the ID and then put the template inside it.

Result
HTML

Choose files to upload or Drag n' drop

Browse files

                  
                    <!-- Dropzone -->
                    <div class="u-dropzone"
                         data-options='{
                           "url": "../../assets/vendor/dropzone/upload.html",
                           "thumbnailWidth": 100,
                           "thumbnailHeight": 100,
                           "previewTemplate": "#dropzoneItemTemplate"
                         }'>
                      <div id="dropzoneItemTemplate" style="display: none;">
                        <div class="col h-100 mb-5">
                          <div class="dz-preview dz-file-preview">
                            <div class="d-flex justify-content-end dz-close-icon">
                              <small class="fa fa-times" data-dz-remove></small>
                            </div>
                            <div class="dz-details media">
                              <div class="dz-img">
                                <img class="img-fluid" data-dz-thumbnail>
                              </div>
                              <div class="media-body">
                                <h6 class="dz-filename">
                                  <span class="dz-title" data-dz-name></span>
                                </h6>
                                <div class="dz-size" data-dz-size></div>
                              </div>
                            </div>
                            <div class="dz-progress progress" style="height: 4px;">
                              <div class="dz-upload progress-bar bg-success" role="progressbar" style="width: 0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
                            </div>
                            <div class="d-flex align-items-center">
                              <div class="dz-success-mark">
                                <span class="fa fa-check-circle"></span>
                              </div>
                              <div class="dz-error-mark">
                                <span class="fa fa-times-circle"></span>
                              </div>
                              <div class="dz-error-message">
                                <small data-dz-errormessage></small>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="dz-message">
                        <div class="mb-4">
                          <span class="d-block h5 mb-1">Choose files to upload</span>
                          <span class="d-block text-secondary mb-1">or</span>
                          <span class="d-block">Drag n' drop</span>
                        </div>
                        <span class="btn btn-sm btn-primary">Browse files</span>
                      </div>
                    </div>
                    <!-- End Dropzone -->

JavaScript behavior

Attributes

            
              data-options='{
                 "url": "../../assets/vendor/dropzone/upload.html",
                 "thumbnailWidth": 100,
                 "thumbnailHeight": 100,
                 "previewTemplate": "#dropzoneItemTemplate"
              }'

Config

            
              addedfile: function(){} - callback function
              removedfile: function(){} - callback function
              addedfile - called when a file is added to the list.
              removedfile - called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.

Methods

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

Attribute	Description
`data-options["url"]`	Has to be specified on elements other than form (or when the form doesn't have an action attribute). You can also provide a function that will be called with files and must return the url
`data-options["thumbnailWidth"]`	If null, the ratio of the image will be used to calculate it.
`data-options["thumbnailHeight"]`	The same as thumbnailWidth. If both are null, images will not be resized.
`data-options["previewTemplate"]`	A string that contains the template used for each dropped file. Change it to fulfill your needs but make sure to properly provide all elements.