Mozilla

The shortest image uploader – ever!

A couple of line of JavaScript. That’s all you need.

This is a very short Image Uploader, based on imgur.com API. If you want to do more complex stuff (like resize, crop, drawing, colors, …) see my previous post.

Back-story. I’ve been talking to Imgur.com‘s owner (Hi Alan!). He recently added Drag’n Drop support to his image sharing website. But also, Alan allows Cross-Domain XMLHttpRequest (thank you!). So basically, you can use his API to upload pictures to his website, from your HTML page, with no server side code involved – at all.

And here is an example of what you can do:

(see the full working code on github – live version there )

(also, you’ll need to understand FormData, see here)

function upload(file) {
 
  // file is from a <input> tag or from Drag'n Drop
  // Is the file an image?
 
  if (!file || !file.type.match(/image.*/)) return;
 
  // It is!
  // Let's build a FormData object
 
  var fd = new FormData();
  fd.append("image", file); // Append the file
  fd.append("key", "6528448c258cff474ca9701c5bab6927");
  // Get your own key: http://api.imgur.com/
 
  // Create the XHR (Cross-Domain XHR FTW!!!)
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
  xhr.onload = function() {
    // Big win!
    // The URL of the image is:
    JSON.parse(xhr.responseText).upload.links.imgur_page;
   }
   // Ok, I don't handle the errors. An exercice for the reader.
   // And now, we send the formdata
   xhr.send(fd);
 }

That’s all :)

Works on Chrome and Firefox 4 (Edit:) and Safari.

18 comments

Comments are now closed.

  1. Tobias Plutat wrote on March 11th, 2011 at 04:30:

    Nice! And neatly commented, too – I’m semi-literate in code and helpful comments always help me a great deal.

    Thumbs up for you and imgur!

  2. Robin Berjon wrote on March 11th, 2011 at 05:15:

    Very cool. Small tweak: you want to anchor that media type regex so that it doesn’t match things like application/cool-image too. Instead of:

    file.type.match(/image.*/)

    simply

    file.type.match(/^image/.+/)

    should be enough.

  3. Pedro Assunção wrote on March 11th, 2011 at 05:26:

    Neat, 12 lines of code (if we count the }). Well done :)

  4. gmoulin wrote on March 11th, 2011 at 06:11:

    on Minefield with firebug:
    uncaught exception: [Exception… “Component returned failure code: 0x805e0006 [nsIXMLHttpRequest.open]” nsresult: “0x805e0006 ()” location: “JS frame :: http://paulrouget.github.com/miniuploader/ :: upload :: line 62″ data: no]
    La dynamite fait effectivement boooom ;).

  5. Álvaro G. Vicario wrote on March 11th, 2011 at 06:19:

    /image.*/ is a regex. It’ll also match stuff like “application/x-apple-diskimage”.

    You probably want something like:

    /^image//

    Nice code anyway.

  6. rad_g wrote on March 11th, 2011 at 06:40:

    Doesn’t look like couple of lines.

    1. Isuru Nanayakkara wrote on April 5th, 2012 at 04:39:

      oh sorry, are you an English teacher?

  7. Scott Baker wrote on March 11th, 2011 at 09:07:

    EasyCapture does something sort of similar to what your describing:

    http://www.perturb.org/display/Announcing_EasyCapture_0_51.html

  8. Fahd Alwashmi wrote on March 11th, 2011 at 09:16:

    Co0o0o0l thanks

  9. Mark Smith wrote on March 11th, 2011 at 13:47:

    Works in Safari too… even if you Mozilla guys don’t like Apple it deserves mentioning.

    1. Paul Rouget wrote on March 14th, 2011 at 04:40:

      Oops, I didn’t know they support FormData! Fixed :)

  10. john wrote on March 11th, 2011 at 22:07:

    Ajax should fail to submit here, as you’re posting to a domain other than where you’re hosting this HTML page. (imgur.com mydomain.com).

    How do you get around that security restriction? Or, is this only working for some special version of Firefox that has this restriction disabled? (In which case, why is it disabled? Isn’t that a security hole?)

    1. Ward Muylaert wrote on March 14th, 2011 at 04:53:

      “But also, Alan allows Cross-Domain XMLHttpRequest (thank you!). So basically, you can use his API to upload pictures to his website, from your HTML page, with no server side code involved – at all.”

  11. voidmind wrote on March 14th, 2011 at 06:30:

    @john, I suspect the part about no server side code involved – at all is wrong. That POST image data has to be handled by some server side script to write it to disk. I suspect that server side script sends CORS headers to allow cross-site scripting like this:

    header(Access-Control-Allow-Origin: *);
    header(Access-Control-Allow-Methods: POST);

    http://www.w3.org/TR/cors/

  12. john wrote on March 14th, 2011 at 09:08:

    @voidmind: Thanks! Learning something new every day comes from fessing up when ignorant. Glad I did & thanks for the tip.

  13. Tim wrote on June 17th, 2011 at 10:13:

    What’s the JSON upload file look like?

  14. zeuf wrote on July 19th, 2012 at 18:15:

    Yes, please :
    What UPLOAD.JSON looks like ?
    Thanks !

  15. Forrest O. wrote on September 26th, 2012 at 03:53:

    Paul, You should talk Alan into enabling CORS headers on images that they _serve_, so that we can manipulate them client-side: http://imgur.userecho.com/topic/105409-enable-cross-origin-resource-sharing-cors/

Comments are closed for this article.