Dropzone

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

Dropzone.js documentation

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/dist/min/dropzone.min.js"></script>

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

<script src="../../assets/js/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 () {
    $('.dz-dropzone').each(function () {
      // initialization of dropzone file attach module
      var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));
    });
  });
</script>

Basic example

Image Description
Drag files here to upload
<!-- Dropzone -->
<div id="dropzoneExample1" class="js-dropzone dz-dropzone dz-dropzone-boxed gradient-overlay-half-primary-v4">
  <div class="dz-message py-6">
    <figure class="max-w-10rem mx-auto mb-3">
      <img class="img-fluid" src="../../assets/svg/illustrations/drag-n-drop.svg" alt="Image Description">
    </figure>
    <span class="d-block">Drag files here to upload</span>
  </div>
</div>
<!-- End Dropzone -->

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 id="dropzoneExample2" class="js-dropzone dz-dropzone dz-dropzone-boxed"
     data-hs-dropzone-options='{
       "url": "../../assets/include/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">
          <i class="fas fa-times" data-dz-remove></i>
        </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">
            <i class="fa fa-check-circle"></i>
          </div>
          <div class="dz-error-mark">
            <i class="fa fa-times-circle"></i>
          </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-body 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 -->

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/dropzone/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of dropzone
    $('.dz-dropzone').each(function () {
      var dropzone = $.HSCore.components.HSDropzone.init('#' + $(this).attr('id'));

      dropzone.on("addedfile", function() {
        console.log('File added!!!');
      });
    });
  });
</script>

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-dropzone-options='{
   ...
}' - array

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-dropzone-options='{}'. For more detailed or missing attributes/functions, see the official Dropzone.js documentation page.

Parameters Description Default value

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 "../../assets/include/dropzone-upload.html"

thumbnailWidth

If null, the ratio of the image will be used to calculate it. 300

thumbnailHeight

The same as thumbnailWidth. If both are null, images will not be resized. 300

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.
$('<div>' +
'  <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 dz-file-wrapper">' +
'         <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>').html()