5 ms·
Hah, about time. About 6 months ago I rewrote the Let's Crate (https://letscrate.com https://letscrate.com) backend to work exclusively with Amazon S3 Direct P
by theli0nheart 14y ago
Hah, about time.
About 6 months ago I rewrote the Let's Crate (https://letscrate.com https://letscrate.com) backend to work exclusively with Amazon S3 Direct POST uploads. Getting upload progress to work with that was a royal PITA, but in the end I got it working. If you're interested in how, perhaps that's a good subject for a far more lengthy post on how to write extremely convoluted Javascript. I gave myself a pat on the back (no flash, yay!) and vowed to never do anything like that again.
As requested: Basically, the gist is that you accept the upload via a local JS file that acts as a conduit. You then turn the dropped / selected file object into a blob object and transfer that blob JS file that lives on S3 (using postMessage and a hidden iframe). That JS file on S3 is what actually performs the upload and tracks the upload progress. On progress events, I send back postMessage payloads to the local JS file to show updates to the user.
Convoluted, but it works. :)
- tectonic 14y agoI'd really like to hear about how you did this. Any chance of open sourcing it?
- theli0nheart 14y agoSure! Although now that this is supported natively it seems like more of an academic exercise than anything else. If any others have interest (reply to this comment if you do), I can turn it into a library and put it on Github.
- mattyb 14y ago+1!
- john2365 14y ago-2
- tlack 14y agoI'd like to see it.
- iProject 14y agoI'd love to see it... for what it might guide to do on services other than S3
- fuzzythinker 14y agoYes please!
- btown 14y agoI'd love it if you could write that blog post. The technique sounds like it could be used for a lot of things, including communication in the other direction, i.e. downloading images meant to be drawn on a canvas from servers that don't support CORS.
- ajtaylor 14y agoI'll soon be implementing image upload support where the images live on S3. It would be fantastic to be able to have the user's browser directly upload to S3 rather than go through the web server. If you were to open source your code I'd love to learn from it.
- tlrobinson 14y agoHow do you get access to the file to be uploaded in JavaScript? Are you using the HTML5 File API?
- lyime 14y agoBefore upload yes. After uploaded, you have the URL.
- dylanpyle 14y agoI found this solution for a very similar problem, which is roughly the same approach: http://dira.ro/2011/10/17/heroku-s3-canvas-and-the-security-error-of-doom http://dira.ro/2011/10/17/heroku-s3-canvas-and-the-security-... Implementation here: https://github.com/dira/cross-domain-image-proxy https://github.com/dira/cross-domain-image-proxy And a jQuery plugin here: https://github.com/rlmattax/jquery-s3-image-proxy https://github.com/rlmattax/jquery-s3-image-proxy After weighing the pros and cons of proxying versus this, I settled on the postMessage strategy -- but still no fun at all, and I'm so glad that CORS is finally an option.
- EthanEtienne 14y agoHere's one example from jquery file upload: https://github.com/ncri/s3_uploader_example https://github.com/ncri/s3_uploader_example