an HTML5 offline image editor and uploader application

Many web applications use image uploaders: image hosting websites, blog publishing applications, social networks, among many others. Such uploaders have limitations: you can’t upload more than one file at a time and you can’t edit the image before sending it. A plugin is the usual workaround for uploading more than one image, and image modifications are usually done on the server side, which can make the editing process more cumbersome.

Firefox 3.6 offers many new Open Web features to web developers, including even more HTML5 support. This post describes how to create a sophisticated image editor and uploader built using Open Web technologies.

See below for a video of the demo with some background.

Hosted on hacks, publishes to twitpic

Our web application uploads pictures to twitpic, an image hosting service for Twitter.

Note that code for this application is actually hosted on the hacks web server but can still upload to Twitpic. Uploading to Twitpic is possible because they opened up their API to Cross Domain XMLHttpRequests for applications like this. (Thank you twitpic!).

Web Features

The demo uses the following features from HTML5 included in Firefox 3.6:

  • HTML5 Drag and Drop: You can drag and drop items inside of the web page and drag images from your desktop directly into the browser.
  • HTML5 localStorage: to store the image data across browser restarts
  • HTML5 Application Cache: This allows you to create applications that can be used when the browser isn’t connected to the Internet. It stores the entire app in the browser and also gives you access to online and offline events so you know when you need to re-sync data with a server.
  • HTML5 Canvas: The HTML5 Canvas element is used through this demo to edit and render images.
  • Cross-Origin Resource Sharing to host an application at one site and publish data to another.

What’s in the demo?

See the live demo to try the image uploader for yourself. You will need Firefox 3.6 and a twitter account.

Here’s a full list of the things that this application can do:

  • You can drag images from your desktop or the web into the application.
  • You can see a preview of each image you want to upload.
  • You can drag previews to the trash to delete an image.
  • Images are automatically made smaller if they are bigger than 600px wide.
  • You can edit any of the images before uploading. This includes being able to rotate, flip, crop or turn an image black and white.
  • If you edit an image it’s saved locally so you can still edit when you’re offline. If you close the tab, restart Firefox or your computer they will be there when you load the page again so you can upload when you’re re-connected.
  • It will upload several files at once and provide feedback as the upload progresses.
  • The HTML5 Offline Application Cache makes the application load very quickly since it’s all stored offline.

Under the Hood

Let’s quickly go over all of the technology that we’re using in this application.


Twitpic was nice enough to open their API to allow XMLHttpRequests from any other domain. This means that you can now use their API from your own website and offer your own image uploader.

If you’re running a web site with an API you want people to use from other web sites, you can do that with Cross-site HTTP requests. In order for you to support it you will need to add an HTTP header to responses from your web server that says which domains you allow. As an example, here’s how twitpic allows access from all domains:

Access-Control-Allow-Origin: *

It’s important to note that opening your API does have security implications so you should be careful to understand those issues before blindly opening an API. For more details, see MDC documentation on CORS.

Drag and Drop

Drag and Drop is a mechanism with two important features:

  • Dragging files from your Desktop to your web page.
  • Native Drag and Drop inside your web page (not just changing the coordinates of your elements).

The image uploader uses Drag and Drop to allow the user the add files from the Desktop, to remove files (drag them to the trash) and to insert a new image into a current image.

For more on Drag and Drop, see previous hacks articles, in particular how to use Drag and Drop in your application.

Canvas to Edit Images

Once images have been dragged and dropped into the web page, the image uploader lets you edit them before uploading. This is possible because images are actually copied to canvas elements via the File API.

In this case, the editing process is really basic: rotate, flip, add text, black and white, crop. However, you can imagine offering many other features in your version of the editor (see Pixastic for example, or this inlay feature here).

Using canvas and the File API also let you resize the image before sending it. Here, every image is converted to a new image (canvas) that is less than 600px.

localStorage: Save Local Data

It’s possible to store local data persistently in a web page using localStorage, up to 5Mb of data per domain.

In the image uploader, localStorage is used to store images and credentials. Since images are actually canvas, you can store them as data URLs:

var url = canvas.getContext("2d").toDataURL("image/png");
localStorage.setItem("image1", url);

LocalStorage support means that you can edit an image, close Firefox, switch off your computer, and the edited image will still be there when you restart Firefox.


If you add a manifest file listing all remote files needed to display your web application it will work even when you aren’t connected to the Internet. A nice side effect is that it will also make your application load much faster.

Here, the html element refers to a manifest file:

And the manifest file looks like:


# v2.4

You can also catch offline and online events to know if the connection status changes.
For more information see our last article about offline.


Firefox 3.6 allows millions of people to take advantage of modern standards, including HTML5.
The image uploader described here shows how a web page should really be considered as an application since it interacts with your Desktop and works offline.

Here are a few tips for writing your next application using Open Web technologies:

Allow Cross-XMLHttpRequest:
If it makes sense for your service, allow people to access your API from a different domain, you’ll be amazed at the apps people will come up with.

Allow multiple input:
Let people Drag files to your application and use <input type="file" multiple=""> so they can select several files at once. In this demo, we use a multiple input which is visible only in the mobile version, but for accessibility consideration, don’t forget to use it to propose an alternative to Drag’n Drop.

Use native Drag and Drop:
Drag and Drop mechanisms are usually simulated (updating coordinates on the mousemove event.) When you can, use the native mechanism.

Use the File API
To pre-process a file before even talking to a server.

Support offline
Store data and use a manifest to make your application data persistent while offline.

Use Canvas
Canvas is the most widely implemented HTML5 element. It works everywhere (even if it has to be simulated), use it!

Think “Client Side”: HTML5, CSS3 and the new powerful JavaScript engines let you create amazing applications, take advantage of them!

We look forward to seeing the great new applications you’ll come up with using Open Web technologies!

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Paul Rouget

    Note: if you have Jetpack installed, it doesn’t work on Linux (see ).

    February 2nd, 2010 at 09:10

  2. Paul

    The unicode characters you use for the Crop and Black and White icons don’t show up for me, on Windows XP.

    Also, typing your username + password into a random application generally isn’t a good idea. Would it be possible to use OAuth instead?

    February 2nd, 2010 at 09:16

  3. Fritz


    One thing. In Windows when you drag the smilies onto your image it shows that dotted rectangle when you move any image (that isn’t a drag and drop function). Any way to disable that?

    February 2nd, 2010 at 09:48

  4. Francisco Collao


    February 2nd, 2010 at 10:39

  5. Sam

    It works great on Firefox, but doesn’t work on Safari or Chrome.

    February 2nd, 2010 at 10:55

  6. sep332

    > It’s possible to store local data persistently in a web page using localStorage, up to 5Mb of data per domain.

    I’m pretty sure that’s 5MB, not Mb.

    February 2nd, 2010 at 10:59

  7. […] your image into serverUploaded pics in TwitPicYou can also check the official blog post at Mozilla Hacks here.So what do you think?  Did it really makes your work simpler?  Share your feeling in form of […]

    February 2nd, 2010 at 11:41

  8. thinsoldier

    Sketchpad > Pixastic

    February 2nd, 2010 at 12:49

  9. bohwaz

    Doesn’t work in ff 3.6 on linux with ROX-filer (gtk file browser) nor dolphin (Qt), though the drop zone have this little zoom effect, after drop nothing happens at all.

    Interesting, sure.

    February 2nd, 2010 at 17:30

  10. […] Offline Image Editor and Uploader – Drag & Drop API, DOM Storage, Application Cache, Canvas, Cross Domain Sharing 기능 등을 활용. by Mozilla Hack […]

    February 2nd, 2010 at 17:34

  11. Ryan

    Very impressive stuff Paul.

    Has the localStorage been increased for 3.6? When I was playing around with localStorage in 3.5 I was getting exceptions when size of the data I was trying to store was over 1024kb…

    February 2nd, 2010 at 17:52

  12. Dwight Stegall

    The uploader is cool but I think i’ll be hanging onto my copy of Photoshop for just a little bit longer. :)

    February 2nd, 2010 at 19:09

  13. Jigar shah

    Impressive…Simply impressive. Soon picasaweb / flickr might get one…or piknik will upgrade the web :)

    February 2nd, 2010 at 22:53

  14. BWRic

    Amazing! Great for clients who like to try and upload massive images!

    February 3rd, 2010 at 03:12

  15. Gourmet

    Impressive, sure.
    We all wait now for an upgrade in Prism (which is levelled at Gecko 1.9.1) in order to benefit from the whole new API in webapps !

    BTW, is someone able to tell me if it’s now possible to develop a SIP client into Firefox?
    A SIP client able to do video and audiophoning (that means able to encode/decode Theora and encore/decode vorbis as well as to speak SIP).

    February 3rd, 2010 at 04:33

  16. Hasan Köroğlu

    it’s amazing!!!

    February 4th, 2010 at 01:14

  17. Paul Rouget

    @Gourmet Yes, with prism it’s going to be awesome :)
    For SIP, it’s not doable yet.

    @Ryan Yes, 5MB.

    @bohwaz You’re right. Sounds like it only works with Nautilus.

    February 5th, 2010 at 13:26

  18. Paulo

    Too nice! HTML5 looking amazingly fun for new projects!
    Can’t wait for IE to die completly. Firefox should overtake them all!

    February 6th, 2010 at 16:40

  19. Jorge

    does it work ONLY in FF? So if Yeah its a waste of time, cauz i wanna my system works interoperable for any browser IE, Opera Etc.

    February 9th, 2010 at 07:39

  20. Paul Rouget

    @Jorge For now, yes. But as any standards, other browsers are going to implement it as well.

    February 13th, 2010 at 05:35

  21. kedar


    I dint find a link to download the demo? Is one available ?

    I would like to get my hands dirty and start exploring it …


    February 19th, 2010 at 03:52

  22. Paul Rouget

    @kedar Just look at the source code (view-source).

    February 22nd, 2010 at 03:05

  23. kedar

    one more question, w.r.t manifest=”offline.manifest” , where is this offline.manifest file stored

    Im working on ubuntu

    February 22nd, 2010 at 03:25

    1. marvin

      I’m pretty sure it’s stored anywhere on the server, the path is then included in the .html file like this: (if offline.manifest is in the same directory)

      February 27th, 2010 at 04:59

  24. Julien

    Hello Paul,

    I wanted to show this awesome demo on a windows xp computer yesterday, and ran into trouble when trying to delete the images (dnd to the trash)… The drop just didn’t happen.

    It seems that “link” drag effect does not work properly in windows, but the “move” effect seems to solve the problem.

    I don’t know if it’s the real solution for this issue.

    February 25th, 2010 at 11:45

  25. Anonbuntu

    I don’t have Jetpack installed (never have) and it still doesn’t work on Ubuntu. When I drag an image over the drop zone it changes size indicating it notices I’m dragging an image, but when I drop it nothing happens.

    March 12th, 2010 at 02:24

  26. Matthieu

    Hello Paul,

    There is one thing I don’t understand how to do ! I looked to the source code, but I still didn’t understand.
    When you drag an image to send it to the trash it will “delete” the original thumb and display only the one which is being deplaced. This is not the default behavior with draggable-image, how are you doing this ?

    Thanks !

    March 12th, 2010 at 10:19

  27. farquaad

    Does not work anymore. I guess because Twitpic moved to OAuth.

    April 26th, 2010 at 05:15

    1. Paul Rouget

      Yes. They don’t allow Cross-XHR anymore :(

      April 26th, 2010 at 05:41

  28. […] an HTML5 offline image editor and uploader application, 2010년 2월 2일, Paul […]

    July 7th, 2010 at 09:03

  29. Komrade Killjoy

    mozilla invents AIR?

    July 28th, 2010 at 05:43

  30. Benjamin Lupton

    Is the source code available?

    October 6th, 2010 at 10:13

    1. Paul Rouget

      @Benjamin: ctrl+u

      October 7th, 2010 at 05:27

      1. Sebastian Becker

        Hello, Paul,

        thanks a lot for the fantastic demonstration resp. proof of concept.

        Are all the external javascript files of the demo necessary for the upload to work?

        And could you be so kind to post the server side code, too (or preferably a zipped version of the complete, working script, without unnecessary parts)? This would help a lot …



        February 21st, 2011 at 20:01

  31. kishore konjeti

    Drag and drop functionality is working when we use to drag from desktop only. Its not working when u r dragging from explorer.

    March 1st, 2011 at 21:54

  32. Brandone Donnelson

    Nice Demo! – my GWT image scaling…

    March 26th, 2011 at 11:04

  33. […] url: […]

    May 28th, 2011 at 04:19

  34. tikam chandrakar

    I am looking for api or plugin for audio recording or croping image in mobile browser , please let me know if any api are available for that . other wise provide me any solution for that.
    in jquery


    June 8th, 2011 at 09:14

  35. […] by Andrew Grieve • “Debugging HTML 5 Offline Application Cache”, by Jonathan Stark • “An HTML5 offline image editor and uploader application”, by Paul Rouget       at end thanks to all of you By : Amar Omar Ashour Like this:LikeBe […]

    August 16th, 2011 at 14:06

  36. ling

    Too sad, the link to the demo is broken.
    Can anybody please post a link to a working demo again ?

    June 30th, 2012 at 11:47

    1. bates

      Sad :{ , please repost!

      August 27th, 2012 at 01:39

  37. Sam

    I am a chrome user because Firefox gives me problems many times. But because of this application I will be friendly to Firefox now. I just really need an HTML5 offline editor. I am a massive picture uploader and if possible I don’t want limitations, so this application is such a gift to me.

    October 4th, 2012 at 06:45

  38. ling

    Demo sources can be founded here :
    in the hacks.mozilla archives folder

    October 4th, 2012 at 12:16

  39. Sam

    Bummer! I don’t use a lot of Firefox because it’s turtle slow. But it seems I have no choice now coz I want this html image editor very badly. I’m off the Photoshop thing now and I want something new. But I hope picasaweb will get one pretty soon. I can’t wait!

    October 26th, 2012 at 00:01

Comments are closed for this article.