télécharger des données d'image base64 sur Amazon S3

Question

D'accord, dans cette application de téléphone, je commence avec un énorme fichier image de l'appareil photo de l'appareil.
Ensuite, je réduis la résolution et permet à l'utilisateur de recadrer en utilisant javascript canvas et un code très cool appelé darkroomJS. A la fin, darkroomJS utilise la méthode toDataURL() pour extraire les données base64 du canevas.

Maintenant, je dois le télécharger sur Amazon S3.

Je peux télécharger un fichier de mon ordinateur vers S3 en utilisant un formulaire très bien. Ce que je travaille sur envoie les données base64.

J'ai également une fonction qui convertit les données base64 en un blob. (que j'ai lu sera nécessaire, mais je suis ouvert à d'autres idées). J'écris dans les informations d'identification en utilisant jquery après avoir été obtenu sur mon serveur. Cette partie fonctionne bien.

Le problème est de savoir comment mettre un blob dans le formulaire?

J'ai essayé deux méthodes. Définition de la valeur avec jQuery.

$ page.find ("# fichier"). Attr ('valeur', blobData); // insère la chaîne [objet blob] texte dans le champ et l'expédie à S3, pas très utile

aussi j'ai essayé:

 var fd = new FormData(document.forms[0]); 
     fd.append('file', blobData); 

// n'a pas d'effet; S3 se plaint alors qu'il attendait un fichier, et n'en a pas obtenu un.

Qu'est-ce que je fais mal? Comment puis-je faire ce travail?

Answer 1

D'accord, a quelque chose qui fonctionne:

Je suppose avoir la forme effectivement rendu sur la page force un peu le navigateur pour stringify le blob.
La s3Man.getS3Policy fonction est tout simplement une requête AJAX à mon sever pour obtenir une politique de s3 signé, les clés, etc.

this.uploadBase64ImgToS3 = function(base64Data, filename, callback){ 
    var xmlhttp = new XMLHttpRequest();  
    var blobData = dataURItoBlob(base64Data); 
    var contentType = false; 
    if (filename.match(/.png/)) var contentType = 'image/png'; 
    if (filename.match(/.jpg/)) contentType = 'image/jpeg'; 
    if (!contentType){ 
     xStat.rec("content type not determined, use suffix .png or .jpg"); 
     return; 
    } 

    s3Man.getS3Policy(filename, function(s3Pkg){ 
     console.log("policy:", s3Pkg); 
     var fd = new FormData();  
     fd.append('key', s3Pkg.filename);  
     fd.append('acl', 'public-read');  
     fd.append('Content-Type', contentType);  
     fd.append('AWSAccessKeyId', s3Pkg.awsKey);  
     fd.append('policy', s3Pkg.policy); 
     fd.append('signature', s3Pkg.signature);  
     fd.append("file", blobData); 
     xmlhttp.open('POST', 'https://swoopuploadspublic.s3.amazonaws.com/', true);  
     xmlhttp.send(fd); 
    }); 
}