 |
| Don't Litter - Drop Files in the Right Place! |
It is certainly easy enough to put a text area on the screen and let me copy-and-paste in a big JSON string. But while I was doing it, I thought, "Hey, I should just be able to drop a text file in here and have it auto-populate the text area from the file contents."
And so that's what I did.
It's not really that difficult thanks to the File API stuff that's been in JavaScript for a while now. Here is a sample web page that has a single text area on it.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>File Drop</title> </head> <body> <textarea id="drophere" style="width: 200px; height: 100px;">drop a file here</textarea> </body> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> </html>
To allow dropping text files in the text area, the following JavaScript is used.
$(function() {
$("#drophere").on(
"dragover",
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
$("#drophere").on(
"dragenter",
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
$('#drophere').on("drop", function (evt) {
var e = evt.originalEvent;
if (e.dataTransfer) {
if (e.dataTransfer.files.length) {
evt.preventDefault();
evt.stopPropagation();
var file = e.dataTransfer.files[0];
if (file.type != "text/plain") {
console.log("wrong file type");
} else {
var reader = new FileReader();
reader.onload = function(fevent) {
var txt = fevent.target.result;
$('#drophere').val(txt);
}
reader.readAsText(file);
}
}
}
});
});
Since I use jQuery, everything is wrapped in a function that will be called as soon as the document is fully ready. Before setting up the actual drop handler, there are two other event handlers that should be registered to prevent undesirable browser behavior.
The first, on line 3, is the ondragover event handler. This event fires constantly when an element is being drug over a drop target. All the event handler does here is prevent the default behaviors of the browser, which in the case of a text area is to move the cursor around where the drop will take place. That isn't needed in my case because I plan on replacing the entire contents of the text area when the drop occurs.
The second event handler (line 11) is for the dragenter event. This event fires once when the element being drug first enters the drop zone. Again, I am just turning off the browser default behavior in here.
The next and final event handler that I register is for the drop event. This is where the good stuff happens. Because jQuery's event object wrapper doesn't really have direct support for the dataTransfer element, the first thing I do here is get the original event object from it. That's the object I will be using for most of the subsequent processing. First I check to make sure that there is a data transfer associated with this event and that the list of files in that transfer is at least one. If those two checks pass, I once again turn off event propagation and the default browser behavior. Remember, the browser will typically load any file you drop on a page as a new document - definitely not what I want to happen!
The next step is to get the file from the list of files in the data transfer and check the type. For my purposes, I only want to accept files that are plain text. It wouldn't make sense to drop an image or something in a text area! Assuming that the file type checks out, I can finally read the contents of the file. On line 36 I create a FileReader and then set the onload event handler. This is the function that will be called with the file data (or possibly an error) once the read is complete. It will be passed an event object, in which the text can be found in the target.result field. Once this function is set up, I just call readAsText and pass in the file (line 41).
Inside the onload function, line 39, is where I set the value of the text area to the contents of the text file. You could just as easily send the file contents directly to the server at this point or do some other processing, This technique will work on other kinds of files as well - instead of reading as text you could read as a binary string or an array buffer or a data URL. See the documentation for more info!
Give my demo a try for yourself and see how convenient it is to drop text file contents in text areas. You'll probably want to add this feature anywhere you have a text area on your own web pages.
And now the obligatory link to today's comic!
 |
| Amphibian.com comic for 15 June 2015 |
