How to properly save image to s3 with nodejs that can be displayed?

Question

I am saving an image from url to s3 bucket. The image is saved but when opening the object url of that image, it is not displaying the image properly except a small square. The image size is not zero either. I know there is something wrong but not sure where it is and how to fix it. Any suggestion would be great.

Here is my code:

const AWS = require('aws-sdk');
const axios = require('axios');

AWS.config.update({
  accessKeyId: 'xxxxxx',
  secretAccessKey: 'xxx',
});

const S3 = new AWS.S3();

const url = '//../path-to-image';

async function uploadToS3(uri, cb) {
  const image = await axios.get(uri);
  const finalImage = await new Buffer.from(image.data);
  S3.putObject(
    {
      Bucket: 'my-images',
      Key: Date.now() + '.jpg',
      ACL: 'public-read',
      ContentType: 'image/jpeg',
      Body: finalImage,
    },
    function (err) {
      if (err) {
        console.error('Image upload to s3 failed: ', err);
      }
      console.log('Upload to s3 successfull');
    }
  );
}

const handleError = (err, d) => {
  if (err) return new Error(err.stack);
  else console.log('Operation successfull', d);
};

uploadToS3(url, handleError);

Can you even see the image if you check out your object storage instance on the aws website? I'm not sure if the problem is uploading the image or displaying it. — Dylan Landry, Oct 15 '20 at 20:38
I can click the aws image link. It opens up in a new tab. But there is just a tiny square in the new page which is black (background). So, from that perspective, I am assuming I am not able to see the image. — Wrisper, Oct 15 '20 at 20:42
Have you tried this other question? https://stackoverflow.com/questions/49604270/uploading-image-to-amazon-s3-with-node-js-results-in-a-small-transparent-square — Dylan Landry, Oct 15 '20 at 20:45
You may have to set the response type within axios: https://stackoverflow.com/a/44058739/7933478 — Dylan Landry, Oct 15 '20 at 20:48
Tried that both using response type in axios, still same issue. Going to give try with other tweaks. — Wrisper, Oct 15 '20 at 21:06
I'd suggest doing isolated tests on parts of your code. Things that could be wrong include: the url, the image really is a small square, the axios request, the buffer, the `putObject` call, etc. — Dylan Landry, Oct 15 '20 at 21:09

score 0 · Answer 1 · edited Oct 16 '20 at 05:17

Although I have written in Angular but basic concept is same.

  init() {
    let tawcon:TVAwsConfig = new TVAwsConfig(); // make your own config file
    this.awsconfig = tawcon.aswcon;
    this.bucketName = this.awsconfig.bucketName;

    AWS.config.region = this.awsconfig.bucketRegion;
    AWS.config.apiVersions = {
      s3:this.awsconfig.apiVersions
    }
    this.s3Object =  new AWS.S3();
  }

  public publishPageToS3(params:any,
    loader:LoaderService,
    callBkFunc:Function):void{
    let {foldername, compref, filename, body} = params;
    loader.showLoader = true;
    var objectParams = {
      Bucket: this.bucketName,
      Key: foldername+'/'+compref+'/'+filename,  // write your own folder structure.
      Body: body
    };


    this.s3Object.upload (objectParams, function (err, data) {
      if (err) {
        loader.showLoader = false;
        callBkFunc(err, true)
        return;
      }

      if (data) {
        loader.showLoader = false;
        callBkFunc("Success", false);
      }
     });
  }

How to properly save image to s3 with nodejs that can be displayed?

1 Answers1