S3 navegador carregamento via POST: incapaz de lidar com erros graciosamente

Question

Eu estou escrevendo um aplicativo onde eu quero que o cliente para ser capaz de fazer o upload para Amazon S3 direto do browser. Eu posso fazer este trabalho muito bem. Mas quando ocorrem erros, eu quero lidar com eles mais graciosamente do que espirrando um documento XML na tela do cliente.

Eu tenho um esquema que eu acho que iria funcionar, mas está falhando. Aqui está o que estou tentando:

1. Crie um formulário para fazer o upload, e armazenar o formulário em si S3, no mesmo domínio como o atributo "ação" do formulário.
2. Redirecionar o cliente a este formulário. Agora o seu navegador está sentado sobre https: // .s3.amazonaws.com / algo .
3. A página contém um iframe escondido. O formulário define o seu destino para o iframe.
4. o evento Load manipulador olha para o conteúdo do iframe e age sobre ela.

Assim, algo como isto:

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

com este javascript (usando jQuery):

function handler() {
    var message = $("#foo").contents().find('message').text();
    alert(message);
}
$("#foo").load(handler);

Usando o Firebug, eu posso ver que o iframe contém um documento XML, que contém um nó "mensagem". No entanto, o .find('message') sempre falha em encontrar qualquer coisa dentro do documento XML.

Observe que a ação do formulário tem o mesmo domínio, a porta eo esquema como o próprio documento. Então, eu não acho que eu deveria estar em execução em conflito com a política de mesma origem. Certo? Mas ele falhar cada vez. Isso é usar Firefox e Google Chrome browsers.

Obrigado por qualquer conselho!

Answer 1

Há uma série de plugins jQuery que efetivamente implementam exatamente o que você está tentando fazer. Faça uma busca no Google por "jQuery ajax-upload", você pode simplesmente usar um desses controles fora da caixa para capturar o resultado do post ou examinar seu código e rolar o seu próprio.

Você também pode querer olhar para alguns dos uploaders em Flash se você estiver carregando arquivos grandes. O método de forma pura de upload não tem qualquer maneira de implementar um progresso upload, pelo menos não até que as novas funções de arquivo são ampla no navegadores, que o Flash faz oferta. http://github.com/slaskis/s3upload#readme é um uploader de arquivos baseado flash bom projetado especificamente para S3 e dá-lhe chamar funções de volta em JavaScript para erros identificador, progredir e muito mais.

Answer 2

Este deve ser apenas um comentário, mas você pode postar o código XML resposta?

EDIT: Só para diminuir um pouco, eu fiz um teste simples e funcionou muito bem:

<div id="foo">
    <error> 
        <code>AccessDenied</code>
        <message>Invalid according to Policy: Policy expired.</message> 
        <hostid> SZuQn5hTyf32j79AWUym1/si48oqjPifrx4goDVDLYYxc6cJVbbHroLJYcAM89+T</hostid> 
    </error> 
</div>

Então eu fiz algum código jQuery na minha firebug:

$("#foo").find("message").text()

Talvez você pode dar uma alert($("#foo").html()) e verificar a resposta ..

Answer 3

Eu acho que você está tentando resolver o problema errado. O problema não é um detalhe um, com iframes e tal, mas que você quer ter controle mais preciso sobre o upload. Fazer o upload do arquivo para o seu servidor, em seguida, enviar uma solicitação para o servidor Amazon, e você terá controle absoluto sobre o que está acontecendo.

Significativamente mais complexo, é claro, mas esse é o preço de controle.