0

I am using AWS SDK v2 and I have base64 images to upload back to my s3 bucket.

What I did :

source="data:image/png;base64,/9j/4SlqRXhpZgAASUkq....."
img_data=source.replace("data:image/png;base64,/", "");
var data = {
Key: directory+'/'+'test.jpeg',
Bucket: 'bucket',
Body: img_data ,
ContentEncoding: 'base64',
ContentType: 'image/jpeg'

};

  s3.putObject(data, function(err, data){
      if (err) {
        console.log(err);
        console.log('Error uploading data: ', data);
      } else {
        console.log('successfully uploaded the image!');
      }
  });

My image get successfully uploaded, but I can't open it. I guess my data is not correctly formatted. I don't know what to do more, and documentation is quite limited on this.

Any idea ?

Thanks !

Lucas
  • 1
  • 1
  • Please specify more on `"I can't open it"` , on visiting the S3 bucket image url does it give a 404 page with some xml stuff or does it download the image and when you open it, it looks corrupt? – Vinay Oct 01 '22 at 10:27
  • When I download it on S3 and open it on computer it's written " this file is broken" and when I access file directly with S3 URL, I have nothing just a little white square – Lucas Oct 01 '22 at 11:12
  • Got you, the issue is that when you are giving an image tag a url , an http url then the file at that url should be a regular binary not a base64 encoded one. Since the scheme of the file is `http:/https:` and not `data:` . You may look over here on how to handle base64 https://stackoverflow.com/a/26111627 – Vinay Oct 01 '22 at 11:59
  • Thank you for the link, it helped me But I am using plain javascript, and answer is for NodeJS. As I understood my problem is that I need to convert my base64 string into a Buffer ? – Lucas Oct 01 '22 at 13:04
  • Oh I thought you were asking for nodejs since normally we wouldn't write our S3 upload code in client side javascript due to security (aws keys can be seen by users) . But since you are doing that you can have a look at this https://stackoverflow.com/a/40329529/6160662 on how to convert base64 string to a buffer – Vinay Oct 01 '22 at 13:42
  • See https://stackoverflow.com/questions/21797299/convert-base64-string-to-arraybuffer – jarmod Oct 01 '22 at 14:57
  • @Vinay thank you, I tried your advice and got the following error : Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. My base64 string start such way : data:image/png;base64,/9j/4SlqRXhpZgAASUkqAAgAAAAJAA8BAgAGAAAAegAAABABAgAOAAAAgAAAABIBAwABAAAAAQAA%0AABoBBQABAAAAoAAAABsBBQABAAAAqAAAACg – Lucas Oct 02 '22 at 21:58
  • Need to remove the header part `data:image/png;base64,` before sending to decoder – Vinay Oct 03 '22 at 17:12
  • I did, and now my image start by /9j/4SlqRXhpZgAASUk but I still get same error – Lucas Oct 03 '22 at 20:24
  • Please go over here https://www.base64-image.de/ and upload an image get its base64 code and try decoding it with your code if its successful it would mean your code is correct. That way you could fine where is the issue – Vinay Oct 05 '22 at 12:51

0 Answers0