DEV Community


Posted on

Client-side image compression with Firebase and Compressor.js

To upload an image to Firebase using compressor.js, you can use the following steps:

  1. Install the compressor.js library using npm: npm install compressor.js.

  2. Import the library in your JavaScript file: import compressor from 'compressor.js';.

  3. Use the compressor object to compress the image file. For example:

const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

compressor.compress(file, options).then((compressedFile) => {
  // The image is now compressed and ready for upload.  
  // step 4 code here.
Enter fullscreen mode Exit fullscreen mode
  1. Use the Firebase Storage API to upload the compressed image to your Firebase project. You will need to provide your Firebase project's storage bucket URL and a reference to the file you want to upload. For example:
// Get a reference to the storage service, which is used to create references in your storage bucket
// Create a storage reference from our storage service
const storageRef =;
// Create a reference to the file we want to upload
const fileRef = storageRef.child('images/my-image.jpg');

// Use the `put` method to upload the file to Firebase
fileRef.put(compressedFile).then((snapshot) => {
  // The image has been successfully uploaded to Firebase.
  console.log('Uploaded a file!');
Enter fullscreen mode Exit fullscreen mode

In this example, 'compressedFile' is the file that you want to upload to Firebase. This code will upload the file to the images directory in your Firebase storage bucket.

Top comments (2)

mikeesto profile image
Michael Esteban

Nice one!

javico11 profile image
El Náufrago ॐ

Cool, It's a good choice!