Recently I was wanting to build a Ruby on Rails project involving uploading images from a user in the browser. This is nice and all, but the image processing (resizing) must be done on the server-side, and if you have minimal resources you can only handle so much load before things get sluggish.
To work around this, the browser itself is more than capable of resizing images, but it takes a non-trivial amount of code to say "ensure the image uploaded is under 1000px wide and 70% jpeg quality". So I decided to fill this gap, creating a library called fileinput-image-resize.
How to use
And then place some special attributes on your input tags to control the resize behvaior:
<input type="file" data-max-width="500" data-max-height="500" data-quality="90" data-format="webp" />
And that's it! The server will receive the processed images as part of the form submission instead of the original selected image from the user.
For a full list of the options available for customizing the resize behavior, see the project README on GitHub.
A couple of notes
- Images will have their EXIF metadata stripped. This is usually a benefit since it preserves the privacy of the users uploading the images, however if your specific web application requires this data then this approach isn't for you.
What does this library enable?
As always, source code is available here. Happy hacking!