0

The base64 string is what I'm getting in the controller. I'm trying to save it as png file or upload it directly to the S3 server. But the uploaded file is blank on the AWS.

While that encoded string perfectly shows image when using online base64 image viewer. Here is the code. 

imageCropped(image: string) {

    this.croppedImage = image;
    let base64Image = this.croppedImage.split(';base64,').pop();
    var the_blob = new Blob([window.atob(base64Image)], {type: 'image/jpg'});    
    var reader = new FileReader();
    var url = URL.createObjectURL(the_blob);

    // AWS CONFIGURATIONS
s3.upload({ Key: 'upload_2.png', Bucket: bucketName, Body: the_blob, ContentEncoding: 'base64', ACL: 'public-read' }, function (err, data) {
  if (err) {
    console.log(err, 'there was an error uploading your file');
  } else if (data) {
    console.log(data, 'File has been uploaded successfully!');
  }
});  
}
S.Negi
  • 51
  • 7
  • Have you tried setting the contentType to arrayBuffer ? – que1326 Mar 09 '18 at 09:34
  • In the upload method param configuration or when creating blob? – S.Negi Mar 09 '18 at 09:39
  • @que1326 no it didn't worked.! Do you have any idea of storing the base64 string to a image on client-side.? – S.Negi Mar 09 '18 at 09:43
  • I think your blob is incorrectly constructed... refer to https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/36183085#36183085 try not to get a base64 string in the first place... use blobs... – Endless Mar 09 '18 at 19:41
  • No, I've verified the blob through online tools. They are perfect. – S.Negi Mar 10 '18 at 02:12

0 Answers0