Search code examples
jqueryamazon-s3fine-uploader

Make a whole DIV a transparent drop zone with fine-uploader

I have an <article> element in my web application which gets populated with content by Javascript code. I'd like to add the ability to drag-and-drop files over the currently visible portion of that <article> element (as it has a scrollbar) and get these files over to S3.

I have been testing fine-uploader with the provided test.html. My server-side code signing is working and I get the files into my S3 buckets.

My question is UI-related: how do I add the ability to drag-and-drop files over <article> and show an UI only when the file has been dropped to confirm the upload without moving all my HTML code into a fine-uploader template? I tried adding a <div> above the page, but this obviously interfere with my ability to select text in the <article> element placed below…

I feel I am missing something obvious. Essentially my question is similar to the dropzone.js solution here: https://github.com/enyo/dropzone/wiki/Make-the-whole-body-a-dropzone

Solution

  • We don't provide any files named "test.html".

    Regardless, you can add as many drop zones as you want at any time via the addExtraDropzone API method.

    For example: 

    uploader.addExtraDropzone(document.getElementsByTagName('article'));