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)) {
continue;
}

var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);

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

Related posts:

  1. The Beast File- Google Θέλουμε δε θέλουμε, η Google είναι στη ζωή μας σχεδόν...
  2. Ten Technologies That Will Rock 2010 Now that the aughts are behind us, we can...
  3. YouTube and Vimeo turn on HTML5 video tag At Google I/O the team showed a demo of YouTube...
  4. “Visualize” data as graphs How do you visualize data in interesting ways but allow...

, , , , ,

This post was written by:

- who has written 193 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

Leave a Reply