¿Cómo se traducen los datos en un objeto FileReader a datos de formulario para su carga?

Question

Mi problema más grande es que me gustaría usar HTML5 arrastrar y soltar para permitir cargas de imágenes a mi cubo S3 a través de CORS. Puedo obtener algo en S3, pero siempre termina en lo que parece ser contenido codificado en base64.

myFileReader.readAsArrayBuffer(f); 
//[...] 

function on_onload(file_name, file_type, file_data) { 
    // file_name and file_type are bound to the function via a closure, 
    // file_data is passed in during the actual callback invocation. 
    var xhr = new XMLHttpRequest(); 
    var fd = new FormData(); 
    // code that sets AWS credentials for fd omitted 

    // _arrayBufferToBase64() just does a binary to base64 conversion 
    // as described in https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string 
    fd.append('file', _arrayBufferToBase64(file_data)); 

    xhr.open('POST', my_aws_bucket_endpoint, true); 
    xhr.send(fd); 
} 

_arrayBufferToBase64() es sólo el código de bucle de this answer.

Después de intentar cargar foo.jpg:

$ wget [my_uri]/foo.jpg 
[...] 
HTTP request sent, awaiting response... 200 OK 
Length: 295872 (289K) [image/jpeg] 
Saving to: 'foo.jpg' 

$ file foo.jpg 
foo.jpg: ASCII text, with very long lines, with no line terminators 

$ head -c 20 foo.jpg 
/9j/4AAQSkZJRgABAQEA 

Si intento utilizar readAsBinaryString() como se describe en this answer, y luego asignar los datos devueltos a la tecla 'file', no se envían datos y termino con un cero archivo de longitud en mi cubo S3.

Answer 1

responder a mi propia pregunta:

Resulta que usted no lo hace necesidad de utilizar un FileReader en absoluto. El objeto File que proviene de un evento DataTransfer ya es compatible con FormData.

Un example is available here.

Todo lo que necesita hacer para cargar sus archivos en S3 es modificar ese ejemplo configurando sus credenciales y firma en su FormData antes de iniciar el XMLHttpRequest en S3.