Drag and drop file uploads in Gmail using just the specs

Fri, Jun 11, 2010

Javascript, Metabloging, Technology

Ropox: Thats interesting enough, but still to my opinion there is a lot to be made yet.

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:

function handleFiles(files) {
for (var i = 0; i
var file = files[i];
var imageType = /image.*/;

if (!file.type.match(imageType)) {

var img = document.createElement("img");
img.file = file;

var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);

, , , , ,

This post was written by:

- who has written 196 posts on ropox.net.

Software Engineer and Web Developer, keen on new technologies and has passion for web engineering.... Internet is my job and i love it...!!! Founded Baldpixel (baldpixel.com) on 2008 which is specialized on enginnering custom web projects while cooperating with top advertising agencies on the net.

Contact the author