Mozilla

Firefox 3.6 FileAPI demo: reading EXIF data from a local JPEG file

on December 9, 2009 by

in Demo FileAPI Firefox

Paul Rouget has put together a great demo of the new FileAPI we’re including in Firefox 3.6. It lets you drag a JPG from the desktop into the browser that includes EXIF data and it can extract the GPS coordinates in the image and then load the location of where the photo was taken, entirely from JavaScript.

If you have the Firefox 3.6 beta, you can view the demo or you can just watch the video below.

19 comments

Comments are now closed.

  1. Ryan wrote on December 9th, 2009 at 5:10 pm:

    That is awesome work. I’m looking forward to FileWriter now.

  2. Thomas Saunders wrote on December 9th, 2009 at 5:28 pm:

    Awesome! I’m already growing nostalgic for the days of serverside uploading hacks~

  3. Pingback from Are web standards the new OS APIs? at A better world on December 9th, 2009 at 9:25 pm:

    [...] Firefox 3.6 FileAPI demo: reading EXIF data from a local JPEG file [...]

  4. Mardeg wrote on December 10th, 2009 at 12:18 am:

    “..so for this example we’ll drop this image directly onto the drop target..

    DOINK!”

    Fantastic sound effects guys :)

  5. Álvaro G. Vicario wrote on December 10th, 2009 at 4:16 am:

    It’d be interesting to read something about security. Currently, we have crippled fields where we are not allowed to use the clipboard to paste file paths, not even remove the selected file, all in the name of security. It’s a great gap.

  6. Álvaro G. Vicario wrote on December 10th, 2009 at 4:18 am:

    In my previous comment I wrote input type=”file” between angle brackets. The forum software seems to apply HTML filters to plain text :(

  7. sroucheray wrote on December 10th, 2009 at 5:32 am:

    Paul, you are a great demo maker ! You killed me with this one :)

  8. José wrote on December 10th, 2009 at 5:34 am:

    Providing an image that has GPS coordinates would be cool…

  9. Pingback from 17th Degree » Blog Archive » Firefox 3.6 FileAPI Demo on December 10th, 2009 at 10:22 am:

    [...] If you do any kind of front-end web development work, I’d encourage you to follow the Mozilla Hacks blog.  Today’s post is a really interesting one – reading EXIF data from a JPEG file that has been dropped on the page from the desktop. [...]

  10. paul wrote on December 10th, 2009 at 4:39 pm:

    @José We do that, see the demo.

  11. Pingback from W3C FileAPI in Firefox 3.6 at hacks.mozilla.org on December 10th, 2009 at 5:00 pm:

    [...] About « css backgrounds in Firefox 3.6 Firefox 3.6 FileAPI demo: reading EXIF data from a local JPEG file » [...]

  12. Álvaro G. Vicario wrote on December 15th, 2009 at 1:29 am:

    It’d be interesting to read something about security. We are jumping from having crippled FILE fields where we are not allowed to use the clipboard to paste file paths, not even remove the selected file (all in the name of security) to being able to read the content file itself. It’s a great change that arouses some concerns.

  13. steki wrote on December 15th, 2009 at 5:38 am:

    when using the new file api, i was looking for an option get the filemtime of the uploaded file, because i want to keep the original file time when storing the uploaded file to the server.

    any ideas on how to get that information?

  14. Toni Ruottu wrote on January 18th, 2010 at 5:52 pm:

    Can I somehow write a file object literal in my code? I’m coding a proxy which retrieves files from the Internet for people’s java-scripts. People will use the proxy by setting a script tag like . My proxy will then grab the file and return a script which sets variable boom to contain the contents of the file. As the plan is to support arbitrary files I thought your abstraction for reading it out in different forms etc. would be good, but how much code do I need to send with each response in order to implement that?

  15. Pingback from Mozilla Standards Blog » Blog Archive » Web Standards In the Device Era on March 12th, 2010 at 12:01 pm:

    [...] selected file. Now that Firefox 3.6 implements the File API, you can do stuff like asynchronously examine the EXIF content of an image, or the ID3 tags within an MP3 file. The asynchronous part is important — we don’t want [...]

  16. Pingback from Firefox 3.6의 W3C FileAPI ✩ Mozilla 웹 기술 블로그 on June 20th, 2010 at 8:48 pm:

    [...] 3.6에서 동작하는 이와 유사한 예제를 폴 루제(Paul Rouget)의 File API 고급 데모에 찾을 수 있습니다. 이 예제에는 이미지를 표시하기 위해 readAsDataURL [...]

  17. Carol wrote on July 8th, 2010 at 3:06 am:

    Wow.Good job! ;P
    I was wondering if it would be possible in Flex application. Do you know that?

  18. Komrade Killjoy wrote on July 28th, 2010 at 5:48 am:

    What creepy tie-ins will this have with geoIP location inflicted on us by our respective ISP?

  19. Roger wrote on October 28th, 2010 at 11:47 am:

    Does this still work. This is exactly what I need but can’t figure it out. Any help would be appreciated

    Roger

Comments are closed for this article.