AWS S3 Uploaded Image is Partially Loaded

Question

I am trying to upload a locally stored image from my Node.js project's file structure using the aws-sdk package to my AWS S3 bucket and am able to successfully upload it, however, the uploaded image is a partially rendered version of the image. Only the top 1% (12kb) of it are visible when I view the URL created by AWS for the image. I've logged out the file to the console and made sure it was what I thought it was, and it is. But for some reason when I upload it to S3, it's a truncated / cut off version of the image.

All of the tutorials seem pretty straight forward but nobody seems to mention this problem. I've been grappling with it for hours but nothing seems to work. I've tried everything I can find online like:

• Using fs.createReadStream(fileName) instead of just the file buffer but that didn't work (from Image file cut off when uploading to AWS S3 bucket via Django and Boto3)
• Converting the buffer to base64 string and sending it that way
• Adding the ContentLength param
• Adding the ContentType to be the exact type of the image

Here's the relevant code:

const aws = require("aws-sdk")
const { infoLogger } = require("./logger")

async function uploadCoverImage() {
    try {
        aws.config.update({
            secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
            accessKeyId: process.env.AWS_ACCESS_KEY_ID,
            region: "us-east-2",
        })
        const s3 = new aws.S3()

        fs.readFile("cover.jpg", (error, image) => {
            if (error) throw error
            const params = {
                Bucket: process.env.BUCKET_NAME,
                Key: "cover.jpg",
                Body: image,
                ACL: "public-read",
                ContentType: "image/jpg",
            }
            s3.upload(params, (error, res) => {
                if (error) throw error
                console.log(`${JSON.stringify(res)}`)
            })
        })
    } catch (error) {
        infoLogger.error(`Error reading cover file: ${JSON.stringify(error)}`)
    }
}
module.exports = uploadCoverImage

Answer 1

I found out that it was uploading before the image had finished downloading via fs.createReadStream() in a different part of my codebase which is why it was partially loaded in S3. I never noticed because I only ever saw the fully loaded image in my local file system.