Wednesday, 25 December 2019

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

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.



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

No comments:

Post a Comment