Image Upload in s3 using lambda API gateway in Node js (aws-lambda-multipart-parser)

Question

I have tried to upload and images and videos in s3 bucket using AWS lambda API gateway

Successfully are images are uploaded and get the Location also in response but I could not preview it

    const multipart = require('aws-lambda-multipart-parser');
    const AWS = require('aws-sdk');
    const { config } = require('./config')
    const { v4: uuidv4 } = require('uuid')
    const fs = require('fs');

    const s3 = new AWS.S3({
      accessKeyId:config?.dev?.aws_s3?.ACCESS_KEY,
      secretAccessKey:config?.dev?.aws_s3?.SECRET_KEY
    })
    
    
    //After the parse data from the event. Event declared as a param

    const result =  await multipart.parse(param);
    let myFile= result.media.filename.split(".")
    let fileType = myFile[myFile.length - 1];
    const fileName = uuidv4()+'.'+fileType;


    const uploadData = {
        Bucket : config?.dev?.aws_s3?.BUCKETNAME,
        Key : fileName,
        Body : Buffer.from(result.media.content, 'binary'),
        ContentType : result.media.contentType,
        ACL : 'public-read',
        Conditions: [
            ['content-length-range', 0, 10000000] // 10 Mb
        ]
    }

    try {

        const responseData = await s3.upload(uploadData).promise()
        return  {
            "body" : {
                "message" : "Image uploaded successfully",
                "data" : responseData
            },
            'statusCode': 200
        }
    } catch (e) {
        return  {
            "body" : {
                "message" : e.message
            },
            'statusCode': 500
        }
    }

// Uploading Data to s3

// Response

{
"message": "Image uploaded successfully",
"data": {
    "ETag": "\"662d32878c3e0628d2958e95fc055855\"",
    "Location": "https://bucketname.s3.amazonaws.com/03c2fcd1-ab92-42a8-93cf-d6a89545c77e.jpeg",
    "key": "03c2fcd1-ab92-42a8-93cf-d6a89545c77e.jpeg",
    "Key": "03c2fcd1-ab92-42a8-93cf-d6a89545c77e.jpeg",
    "Bucket": "bucketname"
}

}

The issue is image is not loaded. Could you help any to fix this Issue and should support it both video and audio

Error: Image cannot be displayed it contains errors

Answer 1

I had similar problem with my Lambda NodeJS function. Frontend web page pushed up using fetch() the file as FormData from click handler of

NodeJS Lambda function parsed the data, stored to S3, but it was an invalid image file.

I found the fix in a few other SO posts that lead me to do two AWS dashboard changes that made all the difference and got me working:

• AWS API Manager -> Settings -> Binary Media Types -> Add Binary Media Type "multipart/form-data"

• AWS API Manager -> Resources -> My Resource (/photos) -> My Method (POST) -> Method Request -> HTTP Request Headers -> Add "Accept" and add "Content-Type"

Hope this helps you.