Dropzone

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

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 Blueberry 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>

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.

Preview
HTML

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 -->

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