Dropzonejs

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> near the end of your pages under JS Nova to enable it.

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

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins 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 component
    $.HSCore.components.HSDropzone.init('.u-dropzone');
  });
</script>

Drag files here to upload

<div class="u-dropzone">
  <div class="dz-message py-6">
    <figure>
      <i class="nova-upload"></i>
    </figure>
    <span class="d-block">Drag files here to upload</span>
  </div>
</div>

Modal

Result
HTML

<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Button Trigger Modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
 aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Example Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="u-dropzone">
          <div class="dz-message py-6">
            <figure>
              <i class="nova-upload"></i>
            </figure>
            <span class="d-block">Drag files here to upload</span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Continue</button>
      </div>
    </div>
  </div>
</div>
<!-- End Modal -->

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.

Use data-options='{}' attribute with parametrs and custom template #dropzoneItemTemplate

Result
HTML

Choose files to upload or Drag n' drop

Browse files

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

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.

Validation states

Result
HTML

Drag files here to upload

<div class="u-has-success">
  <div class="u-dropzone">
    <div class="dz-message py-6">
      <figure>
        <i class="nova-upload"></i>
      </figure>
      <span class="d-block">Drag files here to upload</span>
    </div>
  </div>
</div>

Result
HTML

Drag files here to upload

<div class="u-has-error">
  <div class="u-dropzone">
    <div class="dz-message py-6">
      <figure>
        <i class="nova-upload"></i>
      </figure>
      <span class="d-block">Drag files here to upload</span>
    </div>
  </div>
</div>

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.