Vue-dropzone: hide file preview on file drag

[gerryats]

Hi @rowanwins
I want to hide file preview when user drag and drop files on dropzone.
I'm using $(".dz-preview").hide(); to hide preview. It works when user add files by clicking on dropzone but not in case of drag-drop.

[vrajroham]

@gerryats When are you calling .hide()? On event vdropzone-file-added?

[gerryats]

yes on vdropzone-file-added
I tried it on vdropzone-drop event too, but it didn't work

[rowanwins]

Hi @gerryats

Would it make more sense to use a custom preview template? If you dont want the user to see anything just set it to an empty div perhaps...

[gerryats]

I tried to do that too but then it shows only remove, cancel upload links.

[rowanwins]

So what exactly do you want to show @gerryats ?

[gerryats]

As per your last suggestion I returned the empty div. But it still shows the cancel/remove file link.
please see the screenshot attached. How can I removed this?

[rowanwins]

What happens if you set addRemoveLinks: false in the dropzone options object?

[gerryats]

setting addRemoveLinks to false worked.
How do I persist my default dict message when file is added through drag-drop. I've put this code $(".dz-message").show(); in fileAdded () method. But its not displaying me anything.

[demianriccardi]

I used the following options to remove previews from a dropzone (the key being previewsContainer: false); Vue is used to generate a list of actionable items via v-on:vdropzone-file-added="someListBuildingFunction", which allows some flexibility for the ui.

dropOptions: { url: "/api/upload/", dictDefaultMessage: '<i class="fas fa-cloud-upload-alt fa-3x" style="color:green"></i>', previewsContainer: false, autoProcessQueue: false }