Don’t let users hassle with a task that can easily be done by the servers.

Dag-Inge Aas
Feb 21, 2018 · 2 min read
RAAAAAAAGE

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.

Simple, styleable and standardized file input fields with contextful image preview before saving. Automatically optimized without the user having to do anything but choose the image.

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.

Confrere

We're building video software tailor-made for professionals meeting 1–1 with their clients online.

Thanks to Ida Aalen

Dag-Inge Aas

Written by

CTO and Co-founder for Confrere. Strangely fascinated by numbers and graphs.

Confrere

Confrere

We're building video software tailor-made for professionals meeting 1–1 with their clients online.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade