Skip to content

Instantly share code, notes, and snippets.

@mehmetaydogduu

mehmetaydogduu/Note.txt

Created July 21, 2020 15:38
Show Gist options
  • Save mehmetaydogduu/64979b2daa8a16cd2aad2eca184dfbb0 to your computer and use it in GitHub Desktop.
Save mehmetaydogduu/64979b2daa8a16cd2aad2eca184dfbb0 to your computer and use it in GitHub Desktop.
Download ZIP
file drop input
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
Drop Here
</div>
Should update here:
<input type="file" id="fileInput" />
</body>
</html>
Raw
input_file_drag_and_drop_js_simple.js
// https://stackoverflow.com/questions/43380077/html5-drag-file-to-input-can-i-drag-multiple-times-into-same-input-and-have-fi/43397640#43397640
// https://lifenautjoe.github.io/droppable/
// https://github.com/lifenautjoe/droppable
// https://www.npmjs.com/package/droppable
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
evt.preventDefault();
};
dropContainer.ondrop = function(evt) {
// pretty simple -- but not for IE :(
fileInput.files = evt.dataTransfer.files;
evt.preventDefault();
};
Raw
Note.txt
Useful when you want to direct upload to s3
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment