Drag and drop file uploads in Gmail using just the specs

Thursday, April 15th, 2010

Drag and drop file uploads in Gmail using just the specs

Category: Browsers, JavaScript

Gmail started off with the awful input type="file" "add more" typical solution that we all know and love. Then they added the ability to select multiple files via Flash.... and now they allow the ability to drag and drop files right onto the message compose using HTML5 standards.

Want to do it too? Check out the APIs and how you can do it all, including showing the thumbnails:

PLAIN TEXT

JAVASCRIPT:

2. function handleFiles(files) {
3.   for (var i = 0; i <files.length; i++) {
4.     var file = files[i];
5.     var imageType = /image.*/;
7.     if (!file.type.match(imageType)) {
8.       continue;
9.     }
11.     var img = document.createElement("img");
12.     img.classList.add("obj");
13.     img.file = file;
14.     preview.appendChild(img);
16.     var reader = new FileReader();
17.     reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
18.     reader.readAsDataURL(file);
19.   }
20. }

Posted by Dion Almaer at 7:17 pm
5 Comments

4.5 rating from 17 votes

-->

via feedproxy.google.com

Posted via web from Rocha's place