Home/ Questions/Q 9280671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T17:55:46+00:00

I wrote a little script to get file input via drop in a div

  • 0

I wrote a little script to get file input via drop in a div in a hidden input. My code looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>drop</title>
</head>
<body>

<div id="dropzone" style="height: 200px; width: 200px; background-color: green;">
drop here
</div>

<input type="file" id="file" class="hidden">

<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="drop.js"></script>

</body>
</html>

drop.js:

$(document).on("dragover drop", function(e) {
    e.preventDefault(); // allow dropping and don't navigate to file on drop
})
$("#dropzone").on("drop", function(e) {
    console.log("drop");
    $("#file").prop("files", e.originalEvent.dataTransfer.files); // put files into element
    this.style.backgroundColor='green';
});
$("#dropzone").on("dragover", function(e){
    console.log("dragover");
    this.style.backgroundColor='blue';
});
$("#dropzone").on("dragleave", function(e){
    console.log("dragleave");
    this.style.backgroundColor='green';
});

This works on Chrome but unfortunately not on firefox and safari and i expect also not on IE … I know this is the stuff every Webdeveloper loves, so should i stick with the native way ? or is there a library which can help me with the cross browser stuff ? So i just need this part no upload or sth else just putting the informatipn via drop in a input field.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This problem has been solved before by various javascript libraries that also ensure file uploading will work in all browsers. As it stands, your script, once you perfect it, will only work in browsers that support the File/Blob API. This leaves out IE9 and earlier, along with some versions of Android.

    No need to reinvent the wheel. If you insist on doing this, be prepared for a frustrating ordeal. I recommend Fine Uploader, which will handle dropped files in browsers that support the File API, dropped directories in Chrome 21+, and will resort to a file input element for browsers that do not support the File API. It also includes many other features that you may fine useful, such as chunking, auto/manual retry of failed uploads, auto resume of failed or interrupted uploads from previous sessions, etc.

    • 0