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

7.7k views Asked by At

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.

1

There are 1 answers

0
User863 On BEST ANSWER

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
});