Ever wanted to hide the Dropzone uploader then have it show only when you need it. No… not just hide but also trigger it.
Use Case: Rather than having the Dropzone gadget sitting on the page only show it when it is actually uploading files. Then, hide it again. To do this we have to trigger it from another element such as a button. However, out of the box the gadget does not allow this since it only responds to a click event on itself… and must be visible to accept it. Or… does it?
Notice to all… the following is a JS code hack that devote no-coders may find offensive.
The trick is a simple JS hack, find the element on the page, make it visible, then trigger it. The challenge is the actual dropzone element is nested in several div statements, so we have to go looking for it in the DOM.
- Add a unique ID
- Using the Toolbox tool run the following JS…
var DZid = document.getElementById(“myUniqueID”);
var DZref = DZid.getElementsByClassName(“dropzone”)[0].dropzone;
DZref.hiddenFileInput.click();
Line 1 = finds the Dropzone container Div
Line 2 = finds the first instance of the Dropzone element inside the Div child elements
Line 3 = triggers the Dropzone gadget so it acts like normal and shows the OS/File upload window.
Workflow - On Element click → unhide the Dropzone element (or a group containing the element) → Run the JS.
To hide it I use a When Dropzone contains files to trigger a workflow, which hides the element, then processes the file(s).
Sorry for the quick and dirty explanation but though those who are interested will work it out in their own play-pens. Now back to work for me…
Enjoy.