Search code examples
javascriptnode.jsamazon-web-servicesamazon-s3aws-lambda

Upload Image from form-data to S3 using a Lambda


So I am writing a Lambda that will take in some form data via a straight POST through API Gateway (testing using Postman for now) and then send that image to S3 for storage. Every time I run it, the image uploaded to S3 is corrupted and won't open properly. I have seen people having to decode/encode the incoming data but I feel like I have tried everything using Buffer.from. I am only looking to store either .png or .jpg. The below code does not reflect my attempts using Base64 encoding/decoding seeing they all failed. Here is what I have so far -

Sample Request in postman

{
  image: (uploaded .jpg/.png),
  metadata:  {tag: 'iPhone'}
}

Lambda

const AWS = require('aws-sdk')
const multipart = require('aws-lambda-multipart-parser')
const s3 = new AWS.S3();

exports.handler = async (event) => {
  const form = multipart.parse(event, false)
  const s3_response = await upload_s3(form)
  return {
    statusCode: '200',
    body: JSON.stringify({ data: data })
  }
};

const upload_s3 = async (form) => {
  const uniqueId = Math.random().toString(36).substr(2, 9);
  const key = `${uniqueId}_${form.image.filename}`

  const request = {
    Bucket: 'bucket-name',
    Key: key,
    Body: form.image.content,
    ContentType: form.image.contentType,
  }
  try {
    const data = await s3.putObject(request).promise()
    return data
  } catch (e) {
    console.log('Error uploading to S3: ', e)
    return e
  }
}

EDIT: I am now atempting to save the image into the /tmp directory then use a read stream to upload to s3. Here is some code for that

s3 upload function

const AWS = require('aws-sdk')
const fs = require('fs')

const s3 = new AWS.S3()

module.exports = {
  upload: (file) => {
    return new Promise((resolve, reject) => {
      const key = `${Date.now()}.${file.extension}`
      const bodyStream = fs.createReadStream(file.path)

      const params = {
        Bucket: process.env.S3_BucketName,
        Key: key,
        Body: bodyStream,
        ContentType: file.type
      }

      s3.upload(params, (err, data) => {
        if (err) {
          return reject(err)
        }
        return resolve(data)
      }
      )
    })
  }
}

form parser function

const busboy = require('busboy')

module.exports = {
  parse: (req, temp) => {
    const ctype = req.headers['Content-Type'] || req.headers['content-type']
    let parsed_file = {}

    return new Promise((resolve) => {
      try {
        const bb = new busboy({
          headers: { 'content-type': ctype },
          limits: {
            fileSize: 31457280, 
            files: 1,
          }
        })

        bb.on('file', function (fieldname, file, filename, encoding, mimetype) {
          const stream = temp.createWriteStream()
          const ext = filename.split('.')[1]
          console.log('parser -- ext ', ext)
          parsed_file = { name: filename, path: stream.path, f: file, type: mimetype, extension: ext }
          file.pipe(stream)
        }).on('finish', () => {
          resolve(parsed_file)
        }).on('error', err => {
          console.err(err)
          resolve({ err: 'Form data is invalid: parsing error' })
        })

        if (req.end) {
          req.pipe(bb)
        } else {
          bb.write(req.body, req.isBase64Encoded ? 'base64' : 'binary')
        }

        return bb.end()
      } catch (e) {
        console.error(e)
        return resolve({ err: 'Form data is invalid: parsing error' })
      }
    })
  }
}

handler

const form_parser = require('./form-parser').parse
const s3_upload = require('./s3-upload').upload
const temp = require('temp')

exports.handler = async (event, context) => {
  temp.track()
  const parsed_file = await form_parser(event, temp)
  console.log('index -- parsed form', parsed_file)
  const result = await s3_upload(parsed_file)
  console.log('index -- s3 result', result)
  temp.cleanup()
  return {
    statusCode: '200',
    body: JSON.stringify(result)
  }
}

The above edited code is a combination of other code and a github repo I found that is trying to achieve the same results. Even with this solution the file is still corrupted


Solution

  • Figured out this issue. Code works perfectly fine - it was an issue with API Gateway. Need to go into the API Gateway settings and set thee Binary Media Type to multipart/form-data then re-deploy the API. Hope this helps someone else who is banging their head against the wall on figuring out sending images via form data to a lambda.