Mozilla

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.

Cross-XMLHttpRequest

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.

Offline

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:

<html manifest="offline.manifest">

And the manifest file looks like:

CACHE MANIFEST

# v2.4
index.xhtml
fonts/MarketingScript.ttf
css/desktop.css
css/fonts.css
css/mobile.css
[...]

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

Conclusion

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!

44 comments

Comments are now closed.

  1. Paul Rouget wrote on February 2nd, 2010 at 09:10:

    Note: if you have Jetpack installed, it doesn’t work on Linux (see https://bugzilla.mozilla.org/show_bug.cgi?id=534767 ).

  2. Paul wrote on February 2nd, 2010 at 09:16:

    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?

  3. Fritz wrote on February 2nd, 2010 at 09:48:

    Great!

    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?

  4. Francisco Collao wrote on February 2nd, 2010 at 10:39:

    Awesome!!!!

  5. Sam wrote on February 2nd, 2010 at 10:55:

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

  6. sep332 wrote on February 2nd, 2010 at 10:59:

    > 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.
    /nitpick

  7. Pingback from Firefox 3.6's new HTML5 Offline Image Editor, Live Preview | DevilsDuke.com on February 2nd, 2010 at 11:41:

    [...] 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 [...]

  8. thinsoldier wrote on February 2nd, 2010 at 12:49:

    Sketchpad > Pixastic

    http://mugtug.com/sketchpad/

  9. bohwaz wrote on February 2nd, 2010 at 17:30:

    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.

  10. Pingback from HTML5의 모든 것 :: Channy’s Blog on February 2nd, 2010 at 17:34:

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

  11. Ryan wrote on February 2nd, 2010 at 17:52:

    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…

  12. Dwight Stegall wrote on February 2nd, 2010 at 19:09:

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

  13. Jigar shah wrote on February 2nd, 2010 at 22:53:

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

  14. BWRic wrote on February 3rd, 2010 at 03:12:

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

  15. Gourmet wrote on February 3rd, 2010 at 04:33:

    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).
    db

  16. Hasan Köroğlu wrote on February 4th, 2010 at 01:14:

    it’s amazing!!!

  17. Paul Rouget wrote on February 5th, 2010 at 13:26:

    @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.

  18. Paulo wrote on February 6th, 2010 at 16:40:

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

  19. Jorge wrote on February 9th, 2010 at 07:39:

    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.

  20. Paul Rouget wrote on February 13th, 2010 at 05:35:

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

  21. kedar wrote on February 19th, 2010 at 03:52:

    Hi,

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

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

    Thanks
    Kedar.

  22. Paul Rouget wrote on February 22nd, 2010 at 03:05:

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

  23. kedar wrote on February 22nd, 2010 at 03:25:

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

    Im working on ubuntu

    1. marvin wrote on February 27th, 2010 at 04:59:

      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)

  24. Julien wrote on February 25th, 2010 at 11:45:

    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.

  25. Anonbuntu wrote on March 12th, 2010 at 02:24:

    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.

  26. Matthieu wrote on March 12th, 2010 at 10:19:

    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 !

  27. farquaad wrote on April 26th, 2010 at 05:15:

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

    1. Paul Rouget wrote on April 26th, 2010 at 05:41:

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

  28. Pingback from an HTML5 offline image editor and uploader application ✩ Mozilla 웹 기술 블로그 on July 7th, 2010 at 09:03:

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

  29. Komrade Killjoy wrote on July 28th, 2010 at 05:43:

    mozilla invents AIR?

  30. Benjamin Lupton wrote on October 6th, 2010 at 10:13:

    Is the source code available?

    1. Paul Rouget wrote on October 7th, 2010 at 05:27:

      @Benjamin: ctrl+u

      1. Sebastian Becker wrote on February 21st, 2011 at 20:01:

        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 …

        Thanks,

        Sebastian

  31. kishore konjeti wrote on March 1st, 2011 at 21:54:

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

  32. Brandone Donnelson wrote on March 26th, 2011 at 11:04:

    Nice Demo!

    http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5 – my GWT image scaling…

  33. Pingback from Bloggo » Blog Archive » Upload immagini con html 5 on May 28th, 2011 at 04:19:

    [...] url: http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/ [...]

  34. tikam chandrakar wrote on June 8th, 2011 at 09:14:

    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

    Thanks
    Tikam

  35. Pingback from Let’s Take This Offline « DevelopersMix's Blog on August 16th, 2011 at 14:06:

    [...] 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 [...]

  36. ling wrote on June 30th, 2012 at 11:47:

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

    1. bates wrote on August 27th, 2012 at 01:39:

      Sad :{ , please repost!

  37. Sam wrote on October 4th, 2012 at 06:45:

    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.

  38. ling wrote on October 4th, 2012 at 12:16:

    Demo sources can be founded here :
    https://github.com/paulrouget
    in the hacks.mozilla archives folder
    ;)

  39. Sam wrote on October 26th, 2012 at 00:01:

    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!

Comments are closed for this article.