javascript - Carga basada en el navegador SignatureDoesNotMatch en s3

ajax jquery

Question

Sé que muchos hicieron esta pregunta y revisé su publicación, pero todavía no recibí la respuesta correcta, así que aquí va.

Estoy tratando de subir una imagen a s3 usando la técnica de carga basada en navegador introducida por Amazon dev. En este momento puedo calcular tanto la política como la firma de mi lado. Pero cuando traté de subir una imagen, siempre obtengo una "Firma no coincidente" (>. <). Uno de los principales problemas que tengo es que las credenciales que tengo son solo temporales: AWS Security Token Service , este consiste en accessKEy, secretKey y token de seguridad. Publicaré mi código para que todos puedan

Aquí está mi conversión de policy_json

function setValues(accesskey, secretkey, token) {
var folder = ''avatars/[email protected]/'',
acl = ''public-read'',
bucket = ''my-bucket'';
var POLICY_JSON = { "expiration": "2013-12-03T12:29:27.000Z",
"conditions": [
{"bucket": bucket},
["starts-with", "$key", folder],
{"acl": acl},
{"success_action_redirect": "201"},
["starts-with", "$Content-Type", "image/png"]
]
};
var policy = Base64.encode(JSON.stringify(POLICY_JSON));
var signature = b64_hmac_sha1(secretkey, policy);
return {
"policy":policy,
"signature":signature,
"folder" : folder,
"acl" : acl,
"bucket" : bucket
}
}

Mi carga

function upload(acl, accesskey, policy, signature, token) {
$('':button'').click(function()
{
var file = document.getElementById(''file'').files[0];
// var key = "events/" + (new Date).getTime() + ''-'' + file.name;
var xdate = ''20131016T105000Z'';
// var formData = new FormData($(''form'')[0]); //$(''form'')[0]
var formData = new FormData(); //$(''form'')[0]
formData.append("key", "avatars/[email protected]/${filename}");
formData.append("acl", acl);
formData.append("success_action_redirect", "201");
formData.append("Content-Type", file.type);
formData.append("AWSAccessKeyId", accesskey);
formData.append("policy", policy);
formData.append("signature", signature);
// formData.append("x-amz-security-token", token);
formData.append("file", file);
$.ajax({
url: ''https://mybucket.s3.amazonaws.com'', //Server script to process data
type: ''POST'',
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener(''progress'',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: function(e) {
e.setRequestHeader("Authorization", "AWS "+accesskey+":"+signature);
e.setRequestHeader("x-amz-date", xdate);
e.setRequestHeader("x-amz-acl", acl);
e.setRequestHeader("x-amz-security-token", token);
// alert(''Are you sure you want to upload document.'');
},
success: function(e) { alert(''Upload completed''); } ,
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
} ,
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
});
}

Mi único html

<form enctype="multipart/form-data">
<input id="file" name="file" type="file" />
<input type="button" value="Upload" />
</form>

Esto es lo que me confundió, al principio dentro del compartimiento tiene una carpeta llamada avatares ahora cuando mi colega subió una imagen (say image1.jpg) usando su email_address (say [email protected]) y la carga es exitosa cuando miramos el cubo creó una carpeta con el nombre de su email_address y dentro de ella la imagen. ¿Porqué es eso?

mybucket/
- avatars/
- [email protected]
- image1
- [email protected]
- image1
so on ...

las herramientas que utilicé son: webtoolkit.base64.js, sha1.js, base64-binary.js.