Menu
I want dropped text files to be shown by their contents or their complete location so that I can load contents of that location into the "drop_zone".
This is what I have till now. I was just able to access the file name:
<html>
<head>
<title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<output id="list"></output>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
document.getElementById('drop_zone').innerHTML = files[0].name;
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>
754
How do I Drag and Drop? By default, if you left-click and HOLD the left mouse or touchpad button while moving your mouse pointer to a different folder location on the same drive, when you release the left mouse button the file will be moved to the new location where you released the mouse button.
HTML Drag and Drop interfaces enable web applications to drag and drop files on a web page. This document describes how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page.
Move the pointer to the object. Press, and hold down, the button on the mouse or other pointing device, to "grab" the object. "Drag" the object to the desired location by moving the pointer to this one. "Drop" the object by releasing the button.
here is the final code :
<html>
<head>
<title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById('drop_zone').value = event.target.result;
}
reader.readAsText(files[0],"UTF-8");
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>
http://www.html5rocks.com/en/tutorials/file/dndfiles/ should be a good resource. You need to use a FileReader to read the contents of the file as a String.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
