Data URI Generator via Drag and Drop

dexen · on July 6, 2011

I love the clean design. Focus on the functionality, branding below, concise explanations of what's what.

Thumbs up! :-)

You may want to explain the files aren't uploaded to server -- that they never leave the computer (security); you may also warn upon exceeding 32KB size (IE8 limit).

ComputerGuru · on July 6, 2011

Doesn't work in Chrome on OS X. I get the name of the file and no URI. Worked in FF5, though.

rufibarbatus · on July 6, 2011

Scroll to the right. Some exotic CSS thing that happens when your data URL is simply way too long. Fixed in Chrome with:

  .dataurl {
      word-wrap: break-word;
      white-space: inherit !important;
  }

But that removes the scrolling altogether and replaces it with a box as tall as needed to support the data link.

EDIT: Just came back from the article explaining how this is done. Very simple and very, very clever.

Liu · on July 6, 2011

Can someone please give a few examples for what this could be used for?

sp332 · on July 6, 2011

If you put data (usually little icons) in a data: URI, the browser can load the image without having to make another request to the server for the image, because the data is right there in the URL. It doesn't have to touch the network or disk.

If you put that in an <image src=data://...> tag, it would be rendered inline just like a normal image. So that's the main advantage: the data is in the URI. It's usually used to reduce the number of requests made to the server for icon images.

dexen · on July 6, 2011

Wikipedia has some: http://en.wikipedia.org/wiki/Data_Uri#Examples