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!
