React Firebase: Resize image on client side (for free)

For a recent project I created, I had to upload images to Firebase storage. When these images are uploaded I also wanted to create a very small thumbnail image that I use as a marker in a custom google maps icon. You can view the project here.

Places project icon
npm install react-image-file-resizer

Get image file from website visitor.

In one of your react components, implement some way to get an image from the user either by using an input tag:

<input 
name=”image”
type=”file”
accept=”image/jpeg, image/png”
onChange={(e) => handleUpload(e.target.files[0])}
/>

Resizing the image

Now we get to the actual resizing. I am making a thumbnail with a width of 30 or a height of 30, depending on the orientation of the image. (portrait = height of 30, landscape = width of 30).

const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(file, 30, 30, “PNG”, 100, 0, (uri) => {
resolve(uri);
});
});
const uri = await resizeFile(file);
console.log(uri);

Upload Function

I am an artist / creator / web developer, I like to create web applications and designs for art projects and artists.