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.
You are searching for
clickable
optionIf 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.