Search code examples
typescriptamazon-web-servicesexpressserverless-framework

Serverless framework + Express.js | Uploading images turns out corrupt/broken

I have been pouring way too many hours into getting this to work, and I see that similar questions are posted here on SO but I have yet to find a solution that'll solve my problem.

I have created a REST API using the Serverless Framework. I now want to create an endpoint to which a user can send a POST request with an image as in the body as a form-data.

I have the endpoint here: End point 'upload'

The endpoint uses a middleware uploader.single('param') and then passes the result to a function uploadImage.

The middleware looks as following: Picture of middleware

The image is stored by library "multer": enter image description here

But is broken enter image description here

I read that you might need to add binaryMediaTypes to the apiGateway provider in serverless.ts, so I did as following:

Serverless.ts

Can anyone help me out with this?

Solution

  • I suspect the bug is an edge case or encoding issue with your multipart handler, or perhaps a bug with the serverless-offline plugin. But that's somewhat irrelevant.

    The reason it's hard to find a solutions to this problem is that your chosen path is not compatible with the serverless development philosophy. Lambda doesn't have any filesystem space within its execution environment (well, a few MB. But once the lambda execution is finished, that space is freed). You'd need to store these images somewhere else, someplace durable like S3.

    It's best practice instead to create an API endpoint which returns an presigned URL for an S3 bucket.

    Then your users could upload the image to that URL.

    Here's an excellent article which lays out this exact use case: https://serverlessfirst.com/serverless-photo-upload-api/