Hacker News new | comments | show | ask | jobs | submit login

Hah, about time.

About 6 months ago I rewrote the Let's Crate (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. :)




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

Implementation here: https://github.com/dira/cross-domain-image-proxy

And a jQuery plugin here: 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.


I'd really like to hear about how you did this. Any chance of open sourcing it?


Sure! 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.


I'd love to see it... for what it might guide to do on services other than S3


I'd like to see it.


Yes please!


+1!


I'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.


I'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.


Here's one example from jquery file upload: https://github.com/ncri/s3_uploader_example


How do you get access to the file to be uploaded in JavaScript? Are you using the HTML5 File API?


Before upload yes. After uploaded, you have the URL.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact

Search: