S3 browser upload via POST: unable to handle errors gracefully
Posted
by samf
on Stack Overflow
See other posts from Stack Overflow
or by samf
Published on 2010-02-07T20:34:01Z
Indexed on
2010/03/15
20:29 UTC
Read the original article
Hit count: 184
I am writing an app where I want the customer to be able to upload to Amazon S3 straight from the browser. I can make this work just fine. But when errors occur, I want to handle them more gracefully than splattering an XML document on the customer's screen.
I have a scheme that I think would work, but it's failing. Here's what I'm trying:
- Create a form to do the upload, and store the form on S3 itself, in the same domain as the "action" attribute of the form.
- Redirect the customer to this form. Now their browser is sitting on https://<bucket>.s3.amazonaws.com/something.
- The page contains a hidden iframe. The form sets its target to the iframe.
- The load event handler looks at the contents of the iframe, and acts upon it.
So, something like this:
<iframe id="foo" name="foo" style="display: none" />
<form target="foo" action="https://<bucket>.s3.amazonaws.com/">
<input type="hidden" name="..." value="..." />
<input type="file" name="file" />
</form>
with this javascript (using jquery):
function handler() {
var message = $("#foo").contents().find('message').text();
alert(message);
}
$("#foo").load(handler);
Using firebug, I can see that the iframe contains an XML document, that contains a "message" node. However, the .find('message')
always fails to find anything within the XML document.
Notice that the action of the form has the same domain, port, and scheme as the document itself. So, I don't think that I should be running afoul of the same-origin policy. Right? But it fails every time. This is using Firefox and Google Chrome browsers.
Thanks for any advice!
© Stack Overflow or respective owner