Thursday, April 15th, 2010

Drag and drop file uploads in Gmail using just the specs

Category: Browsers, JavaScript

<p>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:

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

Related Content:

Posted by Dion Almaer at 7:17 pm
15 Comments

++++-
4.4 rating from 34 votes

15 Comments »

Comments feed TrackBack URI

Cool stuff – unfortunately it only works in Firefox 3.6 until WebKit gets their File API story together (hopefully soon!)

Comment by codedread — April 15, 2010

Hm, Google blog post says Chrome too – done via Gears or something?

Comment by codedread — April 15, 2010

@codedread – Safari/Chrome allow you to drag and drop files into file inputs which can than trigger a change event on the input which will upload them.

Comment by Ahrjay — April 16, 2010

Awesome :)

Comment by ThomasHansen — April 16, 2010

It does indeed work in Chrome, allthough there is no FileReader global object to be found. So the snippet above will only work in Firefox 3.6.

I have tried to figure out how this is implemented in chrome, but haven’t found out anything.

Comment by augustl — April 16, 2010

Oh wait, the article updated since I read it on my phone, and no longer use the FileReader. Never mind!

Comment by augustl — April 16, 2010

Meh, you do use FileReader. (Sidenote: I’m too used to having edit/delete buttons)

Comment by augustl — April 16, 2010

I’m still awaiting for more browser support for the FileAPI spec – it’s going to be soooooo nice once in place!

Comment by Phunky — April 16, 2010

How is Chrome doing this given that it doesn’t yet support getAsBinary or FileReader?

Comment by aaronshaf — April 16, 2010

This is EXTREMELY bad code. I’m really disappointed of the writer, no matter if it’s someone from Google or from Ajaxian. NEVER INITALIZE VARIABLES IN A LOOP is something every experienced Javascript developer should know. I optimized it here: http://vincentrolfs-59vls.posterous.com/better-code

Comment by JSkid — April 19, 2010

It seems like Chrome can send the file object entirely like this:

var file = data.files[i];
…. create XMLHttpRequest etc…
xhr.setRequestHeader(‘Content-Type’, ‘multipart/form-data’);
xhr.setRequestHeader(‘X-File-Name’, file.fileName);
xhr.setRequestHeader(‘X-File-Size’, file.fileSize);
xhr.send(file);

Then all you have to do is read the inputstream and headers on the server and save the file :-)

Comment by hakonvik — April 20, 2010

@hakonvik – Where did you find that information? I have had trouble finding any information about how chrome / safari upload files using File objects

Comment by silentchris — April 21, 2010

@silentchris – Safari/Chrome/Firefox all support the XHR2 upload method which allows you to upload files asyncronously

Comment by Ahrjay — April 21, 2010

saw it here: http://stackoverflow.com/questions/2657653/drag-and-drop-file-upload-in-chromium

Tried to find documentation for hours with no luck, seems like google is holding back how they do it for now…

Comment by hakonvik — April 22, 2010

@JSkid – “EXTREMELY bad code”? Bit of a code smell, but far from bad. Initializing most of the variables will add almost nothing to the code; pretending it’s life or death is silly. I’d say extremely bad code is code that is prematurely optimized, especially when it detracts from readability…
Do you seriously think a couple of variable initializations is the bottle neck in a loop that creates an HTML image element and appends it to the DOM in each iteration? The initializations will be, literally, negligible in the running time of this algorithm.

Comment by tixxit — May 26, 2010

Leave a comment

You must be logged in to post a comment.