Data URI image uploader

[Qqwy]

Today I patched together an image uploader for ContentTools hat uses Data URIs , which was what seems to be the best solution to the image uploading problem, at least for my use case.

This has the following advantages:

• No server side logic needed!
• Instant image rotating/cropping, as no communication with server is necessary.

And the following drawbacks:

• Images are saved directly in the database, making the database grow quickly (also, base64-encoded data is about 1.3x the size of the original data)
• It is impossible to re-use images in any way. (but then again, right now that is not possible in the ContentTools dialog either).
• if .gifs are rotated or cropped, they lose their animation. (But this is true for most image uploading scripts anyway).
• It uses the HTML5 File API and the FileReader API. These are not supported in IE <= 8.

This code has obviously been written in normal JS and not in CoffeeScript, as I have no experience with writing CoffeeScript at all, but feel free to include it in the project if you want.

In any case, I hope that this might be helpful to someone else as well.

Have a wonderful day,

~Qqwy

[anthonyjb]

Hi @Qqwy this looks like it might be a great replacement for the current sandbox and demo uploader as it would allow people to add genuine images in the demo environments.

I'm sure this could be a interesting starting point for many and I'm def going to have a play with it. Thanks for contributing it :+1:

[CapRoberts]

Sounds great, but have not been able to make this work, how do you incorporate this?

[brahma-dev]

@CapRoberts

Try this gist