Pre signed PUT client-side AWS S3

Shreyan Mehta
2 min readApr 9, 2020

--

s3 presigned url image upload from client end. source koan

This a full ready to go guide for pre-signed URL which works out of box using node sdk and postman

TLDR; There are many blogs for presigned url s3 for node js and aws-sdk. What majority of them miss is when calling from client side to the generated presigned url you would need to pass in header Content-Type as example VIDEO/mp4 for video of mp4.

So what is it briefly :

There are few ways to upload files to s3, one of the well-known way is to upload from client-side directly. In it also there are two ways :

  1. Directly uploading files from client-side, without presigned url — this is fast but exposes our credentials to the world. suggested for pet projects or POC but not for live ones.
  2. The second approach is calling your backend and generating a presigned url for s3 and uploading from client-side from there.

I won't go into node configurations and would keep it only to s3 and aws related.

Consider you want to upload mp3, you call the node server and from whatever route or file you reach to file consumes3method.js which is there in the gist below

gist for node code using aws-sdk package

Once you generate a putObject URL, you return that to client

Now on client-side you would need to use this url that is returned from client side and do a PUT call using your media to s3.

Most Important thing that is not shown in major blogs regarding this is you need to pass in ```Content-Type``` in headers in our case it would be AUDIO/mp3

Postman header details

And its a GO, its as easy as it sounds. GO GO GO!

If you loved this information or in some way this information has helped you feel free to give a pat on my back by giving some claps, this would encourage me to continue writing these types of blogs. Also share this with some of your co-developers who might be working on the backend, and to those whose product could benefit from this feature.

--

--

Shreyan Mehta

Founder : Asambhav Solutions | loveGPT | FlirtGPT | siitesGPT | Ex : Simform Solutions | Maker and Innovator🔨 | React | Node | AWS | AI-ML Noob | in/devsm/