Skip to content

make the whole body a dropzone

Jump to bottom
Matias Meno edited this page Jul 27, 2020 · 1 revision

If you want the whole page to be droppable, still want a button to select files and a container where to display the file previews, this is the way to do it:

<!doctype html>

<link rel="stylesheet" href="dropzone.css" />
<script src="dropzone.js"></script>


<!--
Don't forget to give this container the dropzone-previews class 
so the previews are formatted correctly.
 -->
<div id="previews" class="dropzone-previews"></div>


<button id="clickable">Click me to select files</button>

<script>
  new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/upload/url", // Set the url
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: "#clickable" // Define the element that should be used as click trigger to select files.
  });
</script>

For a live example, please visit this url: http://www.dropzonejs.com/demos/full-page-dropzone.html

Clone this wiki locally