When I checked Drag and Drop of files with HTML5 in the internet, the results found have many unnecessary complications and additions which are not suitable for tutorial purposes. Sometimes their explanations are not enough and lead to confusedness. So I have decided to create a simple and complete one to let beginners emphasize on the subject and take some baby steps. We have designed a simple example with HTML5 and JavaScript, as continue of previous drag and drop posts, for this purpose. Come with us step by step . . .
You can find a sample in the following link. It has preview there and you can test it online:
Drag and Drop- Drag a Single or Multiple Files and Preview them by Dropping
First make two places; one for dropping files and another for previewing them:
<div style=”height: 113px; border-style: solid; border-width: 1px; padding: 1px 4px; width: 169px;”
id=”drop” ondragover=”allowdrag (event)” ondrop=”addobj (event)”
>Drop Here</div>
<div id=”pr“>
<span style=”font-size: x-large”><strong>Preview:</strong></span><strong><br style=”font-size: x-large”>
</strong></div>
No significant changes are done for dropping place, in comparing with the examples we have before. But, the dragging element is removed, because it wasn’t needed any more, and it comes from outside, i. e. the files on the pc. As the result, ‘saveobj’ function is also removed from the script, too.
But the JavaScript functions are defined differently in the head part of the page. First add ‘stopPropagation‘ event to ‘allowdrag’ function:
function allowdrag(e) {
e.stopPropagation()
e.preventDefault()
}
When an event occurred, the effect propagates through the elements layers. For example suppose that we have two ‘divs’ inside each other with separated ‘onclick‘ event handlers for them. When the inner ‘div’ is clicked, both functions are called; but, if you add ‘stopPropagation‘ event to the inner ‘div’ click handler function, the outer ‘div’ doesn’t receive the click event and it handler isn’t called anymore.
The reason of doing the similar thing here is that we don’t want any other element receive the dragged and dropped file and it must just get managed here.
When the file is dropped we must do several things in ‘addobj’ function:
function addobj(e) {
e.stopPropagation()
e.preventDefault()
var files = e.dataTransfer.files;
for (var i = 0; i<files.length ; i++) {
ParseFile(files[i])
}
}
We have called again the ‘stopPropagation‘ and ‘preventDefault‘ function; the reason of the first is discussed but why do we need to prevent the default behaviors here? The answer is that when you drop a file in the browser area, it starts to open it; so it leaves the previous page and opens a new page showing the file contents. This procedure must be prevented, and it is what we have done by the event.
Then we have defined a new variable, i. e. ‘files‘, which will contain all dropped files. By a ‘for’ loop we can access to each file one by one. The number of dropped files is saved in ‘length ‘ argument of the ‘files‘ object, but because the indexes are usually from zero the loop counter must start from it to the files length minus one.
Now it’s the time to read each dropped file. It is done by ‘ParseFile’ function which called in each iteration for each file. The definition of this function is:
function ParseFile(file) {
document.getElementById (“pr”).innerHTML =document.getElementById (“pr”).innerHTML +
“<p>File information: <strong>” + file.name +
“</strong> type: <strong>” + file.type +
“</strong> size: <strong>” + file.size +
“</strong> bytes</p>”
if (file.type.indexOf(“text”) == 0) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById (“pr”).innerHTML =document.getElementById (“pr”).innerHTML +
“<p><strong>” + file.name + “:</strong></p><pre>” +
e.target.result.replace(/</g, “<”).replace(/>/g, “>”) +
“</pre>”
}
reader.readAsText(file)
}
if (file.type.indexOf(“image”) == 0) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById (“pr”).innerHTML =document.getElementById (“pr”).innerHTML +
“<p><strong>” + file.name + “:</strong><br />” +
‘<img src=”‘ + e.target.result + ‘” /></p>’
}
reader.readAsDataURL(file)
}
}
First we have shown a message in the ‘pr’ element to show the file name, type and size respectively. Then two If Blocks check whether the file type is ‘text’ or ‘image’. In each case we must read the file and preview it in its special format. The ‘reader’ object does the reading. Our desired event (previewing the file based on its type) must be defined when the ‘reader’ is loaded, manually; so we write ‘reader.onload = function(e) {…}‘. It is like other inline functions definitions and between the brackets desired codes are put. After it is finished (the bracket is closed), the ‘reader’ reads the file either as Text or Data URL for a the texts or image files, respectively.
Run the page and try to drag and drop single or multiple files. The following image is an example:
Now you can add desired styles to your page. For example when the mouse cursor with dragged files comes in to the box, the border color gets changed. These effects and some unnecessary functions and codes are removed here to emphasize on the subject.
Some other points are remained about drag and drop process with HTML5; follow the next post . . .