DEV Community

Discussion on: Open Question: How can I upload files to S3 from Node.js, while having a progress bar and the ability to resize the image?

Collapse
 
danku profile image
Daniel McMahon

Happy Holidays David! In terms of premade software there is a windows tool you may be able to use called S3 Browser (windows only I believe). I haven't used it directly but AWS cert instructors have suggested it to me in the past available here.

I can throw in a couple points here that might be worth considering as well:

  1. Giving the ability to optimize/crop/convert images after they've been uploaded is a particularly difficult and potentially expensive feature to try include. Once something is uploaded to S3 you will be charged for downloads/modifications of the file in accordance with their pricing scheme. Maybe consider having users pre-process their images before going through the upload cycle. Otherwise you'll have users uploading an image, redownloading it, editing it, reuploading it and need logic to delete the initial image. Seems like too much power for the average end user!

  2. I understand the reluctance to rely on third party libraries but I don't think a web app is the optimal way to handle this -> especially if your images are large files and you want users to upload them in batch. You might consider building a separate microservice to handle the file uploading that your main web app calls. Keep the logic separate in case of issues. Also maybe a CLI tool is a better alternative with prompts etc. I've only used commander in Python but I know there are JS options available (maybe even make it an electron app users can download locally!) Have it call out to the AWS API.

  3. If your users are uploading multiple files you can always build a makeshift library to aggregate the progress based on whatever data you can get out of the AWS API. I'm sure it gives file success uploads after each files uploaded, mix that with some logic deducing the remaining filesize left to go to setup a rough proress bar? There must be a few progress bar libraries on NPM you can make use of for that as well to reduce the workload.

Hope the above is of some help or at least useful food for though.
Happy Holidays!

Collapse
 
panphora profile image
David Miranda

Hi Daniel! I really appreciate this response!

I've done some searching based on your serverless suggestion and found some amazing options.

One option is a Serverless Image Handler directly from AWS. I think it would let me upload an image directly to an S3 bucket (thereby getting a progress bar) and then serve these images with Cloudfront.

However, the huge bonus is that I think it detects whenever an image is uploaded and uses the API Gateway service (through a Lambda function) to modify the image according to one of these transformations.

The second option I found through a dev.to post, which walks you through creating a serverless web app service that can upload images to S3 and then modify them. I'm not positive if I'd be able to get the progress bar with this solution, but I think I probably could.

However, after all this research, I decided to go with Oreoluwa's solution, which he posted in a comment below. I decided that I'd rather not build/maintain a serverless app in addition to my own app -- and with my usage, Cloudinary will be free for me for a while. I could see switching over to one of the options above in the future when I get a bigger tech team, but right now it's just me and building/marketing/selling one service is already too much. I don't want to take on a whole new stack (i.e. serverless) that I don't have a lot of familiarity with yet.

Anyways -- thank you for your help! It's much appreciated!!