User friendly image uploads — with help from the server
Don’t let users hassle with a task that can easily be done by the servers.
How often have you been met with the above error message? Image uploading on the web is full of annoyances. Are you telling me I have to dig out that old copy of Photoshop I have lying around, and try to resize the image to fit your inane image upload standards?
At Confrere, we try to be better, and create our service on our user’s terms. This means that we should take whatever file the user gives us, and deal with that, resizing and processing it down to our standards instead of putting that burden on the user.
But won’t that be exceedingly expensive, you might say? With today’s processing power and algorithms, the answer is not what you may think.
Leaving the job to the server is easier than you think
First, sending large files to a cloud provider from the Internet is often free, so it doesn’t matter how big the file is, only that your server can accept it in reasonable time. Most image files are even in the extreme cases below 50MB, which is completely reasonable to upload (especially when you base your service on streaming real time video!). So why doesn’t your server just accept that and deal with it?
Secondly, using modern tooling, resizing an image to fit into your required dimensions is fairly inexpensive. There are even algorithms that can intelligently select “interesting” parts of the image for cropping, although that’s probably best left for the user to decide using frontend tooling.
Lastly, ask yourself, what is more expensive, some extra seconds processing power for an image upload which the user might do only once or twice, or loosing them because you didn’t handle the user experience very well?
The solution — open-sourced, of course
With express, multer and sharp, we built a simple upload server in node which does just that.
- Permit any image file to upload, at any size, and let the requester determine the desired size and crop of the image.
- Upload the resulting file to S3 and return a URL to the newly created image.
- All of which is easily deployed to Elastic Beanstalk, or any other provider.
We decided to open source the resulting code, so go check it out over at https://github.com/Confrer/upload-server and try it out yourself! We’d love feedback and contributions if you have any.
