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 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‘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:
  // Create the XHR (Cross-Domain XHR FTW!!!)
  var xhr = new XMLHttpRequest();"POST", ""); // Boooom!
  xhr.onload = function() {
    // Big win!
    // The URL of the image is:
   // Ok, I don't handle the errors. An exercice for the reader.
   // And now, we send the formdata

That’s all :)

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

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Tobias Plutat

    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!

    March 11th, 2011 at 04:30
  2. Robin Berjon

    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:




    should be enough.

    March 11th, 2011 at 05:15
  3. Pedro Assunção

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

    March 11th, 2011 at 05:26
  4. gmoulin

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

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

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

    You probably want something like:


    Nice code anyway.

    March 11th, 2011 at 06:19
  6. rad_g

    Doesn’t look like couple of lines.

    March 11th, 2011 at 06:40
    1. Isuru Nanayakkara

      oh sorry, are you an English teacher?

      April 5th, 2012 at 04:39
  7. Scott Baker

    EasyCapture does something sort of similar to what your describing:

    March 11th, 2011 at 09:07
  8. Fahd Alwashmi

    Co0o0o0l thanks

    March 11th, 2011 at 09:16
  9. Mark Smith

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

    March 11th, 2011 at 13:47
    1. Paul Rouget

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

      March 14th, 2011 at 04:40
  10. john

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

    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?)

    March 11th, 2011 at 22:07
    1. Ward Muylaert

      “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.”

      March 14th, 2011 at 04:53
  11. voidmind

    @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);

    March 14th, 2011 at 06:30
  12. john

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

    March 14th, 2011 at 09:08
  13. Tim

    What’s the JSON upload file look like?

    June 17th, 2011 at 10:13
  14. zeuf

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

    July 19th, 2012 at 18:15
  15. Forrest O.

    Paul, You should talk Alan into enabling CORS headers on images that they _serve_, so that we can manipulate them client-side:

    September 26th, 2012 at 03:53

Comments are closed for this article.