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

Image Description
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.

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">
                                    <span class="dz-filename">
                                      <span class="dz-title" data-dz-name></span>
                                    </span>
                                    <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.
Contact Us