Sometimes accidents are great, and as always, something can be learned. Yesterday, while trying to figure out a way to display .csv files in the web browser, I stumbled upon FileAPI, some sort of HTML5 library...or something (can't display .csv files though...I was just distracted :D). One of the uses that has become apparent to me and others is that files can be dropped straight into the web browser, and then you can read the information that it contains.
Quick video here.
FileReader Docs (by Mozilla) here, this is mainly what I will be describing.
Other links here, here and here.
So, for the rest of this post, I'm just going to paste some code so you can do what snowcrashbeta did (Video link above). All you will need is an index.html file and an associated script.js file. You don't really need to know much JS, but it helps find problems. The way I would describe whats going on is that:
index.html
<head></head>: where the title, links to script files and styles are stated
script.js
$(document)...});
This is where the event listeners (self-explanatory really) for the "dropper" element are defined. Since we have defined an area where we want users to drop files, then we have to link a bit of code to certain events, the code then being called to run. "dragover" and "drop" are predefined options, and I suspect many more exist for us to experiment with :).
It is recommended that you watch that video I linked to above, that's really how I learnt this.
function dragOver(evt) {...}
This is to prevent the default action from occurring when a user drops a file into the web browser. If you try this, then the browser will try to display the file. But we want to do much more than display the image.
function drop(evt) {...}
Same as above. But, when the user drops the file, we want to do something. We can call the handleFileInfo() straight away, but what I've done here is do a quick if() statement to check that there is something in the file to process.
function handleFileInfo(files) {...} This file processor.
If you would like to download these two files and give it a go, get them here:
FileAPI_DnD_example.tar.gz
Many thanks! Till next time, Ciao!
Quick video here.
FileReader Docs (by Mozilla) here, this is mainly what I will be describing.
Other links here, here and here.
So, for the rest of this post, I'm just going to paste some code so you can do what snowcrashbeta did (Video link above). All you will need is an index.html file and an associated script.js file. You don't really need to know much JS, but it helps find problems. The way I would describe whats going on is that:
- elements on the website wait for specific actions to occur,
- when they do (a file is dropped onto it), a js function is called which then (and depending on how you set it up) takes the file and reads the information embedded in it (filename, type, size etc.),
- once it is read, you can then display this information or do something else...like display the image. Somewhere along the line, the file is also uploaded, how neat is that!
index.html
<head>
<title>Drag n Drog</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.20" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
div { border-radius: 20px; margin-bottom: 10px; padding: 15px; }
#wrapper { margin: 20px auto; max-width: 600px; }
#dropper { border: 5px dashed #ccc; height: 100px; text-align: center; font-size: 60px; color: #ccc;}
#fileinfo { border: 5px solid black; height: 30px; }
#filedata { border: 5px solid black; height: 250px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="dropper">Drop File Here</div>
<div id="fileinfo">File Info</div>
<div id="filedata"><img id="fileimage" src="" alt="Image"/></div>
</div>
<script src="script.js"></script>
</body>
</html>
<head></head>: where the title, links to script files and styles are stated
- <script src="https://ajax.googleapis... the location of the FileAPI (I think?)
- div#wrapper...#dropper...#fileinfo...#filedata... CSS styles for these tags
- <div id="dropper">... dropper element. Where users will drop files.
- <div id="fileinfo">... fileinfo element. Where information about the file is displayed.
- <div id="filedata">... filedata element. Holds the image since <img> tags do not have a border option (I'm sure there's a work around).
- <img id="fileimage" src=""... within the <div id="filedata"... tags. This is where the image will be loaded after the user drops it
- <script src="script.js">...load our script file. Note: this can be put up the top of file where the other one was, with the effect that this file will be loaded before the rest of the page will be loaded. Also, the <script... up the top can be put here, but will be loaded after everything else.
script.js
$(document).ready(function() {
var dropbox = document.getElementById("dropper");
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);
});
function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
if (files.length > 0) handleFileInfo(files);
}
function handleFileInfo(files) {
var f = files[0];
var output = [];
output.push('<strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString());
$("#fileinfo").html(output.join(""));
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById("fileimage").src = evt.target.result
};
reader.readAsDataURL(f);
}
$(document)...});
This is where the event listeners (self-explanatory really) for the "dropper" element are defined. Since we have defined an area where we want users to drop files, then we have to link a bit of code to certain events, the code then being called to run. "dragover" and "drop" are predefined options, and I suspect many more exist for us to experiment with :).
It is recommended that you watch that video I linked to above, that's really how I learnt this.
function dragOver(evt) {...}
This is to prevent the default action from occurring when a user drops a file into the web browser. If you try this, then the browser will try to display the file. But we want to do much more than display the image.
function drop(evt) {...}
Same as above. But, when the user drops the file, we want to do something. We can call the handleFileInfo() straight away, but what I've done here is do a quick if() statement to check that there is something in the file to process.
function handleFileInfo(files) {...} This file processor.
- output.push(..html(output.join("")); this takes the file the user has dropped, and reads certain parameters the belong to it. It then concatenates these and sends it to "fileinfo" - which we defined in index.html.
- var reader... not sure, but calls FileAPI and gets it ready, if it isn't already :S.
- reader.onload...readAsDataURL(f); ... more unknown :S. But in html speak, finds the "fileimage" element and then changes its' .src to evt.target.result (which is probably where the file was uploaded to)
- readAsDataURL(f) VI!!. This is the method in which reader. reads the files. See FileReader for more info, scroll about half way down.
If you would like to download these two files and give it a go, get them here:
FileAPI_DnD_example.tar.gz
Many thanks! Till next time, Ciao!
