DropZone.js: How to disable file Uploading and only allow adding to dropzone via drag and drop

Question

In dropzone (or vue2dropzone), is there a way to disable file uploading and only **allow adding to dropzone via drag and drop.

I've a setup where I successfully setup a drag and drop to child Zones (clickable: .czs1,) in a dropzone using a custom preview Template as shown by AlexanderYW here in this issue How to properly add files manually?.

DropZone Options:

dropzoneOptions: {
    url: 'http://localhost:3000/imageUpload',
    thumbnailWidth: 250,
    autoProcessQueue: false,
    addRemoveLinks: true,
    clickable: `.czs1`,
    previewTemplate: this.template(),
  },

Now all I want to do is to disable childZones from triggering OS file Upload dialog box when clicked. I found that dropzone has the input tag hidden with a class dz-hidden-input

<input type="file" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

so in the following, I get hold of inputs with .dz-hidden-input className and then event.preventDefault() for each however that does not work.

  var dropZoneInput = document.getElementsByClassName('dz-hidden-input')

  dropZoneInput.forEach(item => {
       item.addEventListener('click', function () {
           event.preventDefault()
       })
  })

Is there a to achieve this in a standard API (provided by Dropzone). If not how this can be solved because the above document.getElementsByClassName('dz-hidden-input') does not work.

Thanks.

Answer 1

You are searching for clickable option

If true, the dropzone element itself will be clickable, if false nothing will be clickable.

You can also pass an HTML element, a CSS selector (for multiple elements) or an array of those. In that case, all of those elements will trigger an upload when clicked.

var dropZoneInput = document.querySelectorAll('.dz-hidden-input')

dropZoneInput.forEach(item => {
  new Dropzone(item, {
    clickable: false
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>

<form action="/file-upload" class="dropzone dz-hidden-input">
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>

<form action="/file-upload" class="dropzone dz-hidden-input">
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>

If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContainer option. The previewsContainer should have the dropzone-previews or dropzone class to properly display the file previews.

new Dropzone(document.body, {
  previewsContainer: ".dropzone-previews",
  // You probably don't want the whole body
  // to be clickable to select files
  clickable: false
});