How To Resize Image Before Uploading to Firebase Storage in reactjs

Question

I am trying to resize the image that my users upload to keep my website more efficient and limit my storage usage.

I have created a function called resizeFile from the package "react-image-file-resizer"

Now what i am struggling with is how would i resize the image before it gets uploaded to firebase storage?

Here is my code:

const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(file, 500, 500, "JPEG", 100, 0, (uri) => {
      resolve(uri);
    });
  });

const addProperty = async () => {
      if (
        !propName ||
     
      
      ) {
        alert("Please Enter All Required Data");
      } else {
        await firebase
          .firestore()
          .collection("Properties")
          .add({
            propname: propName,
        
          })
          .then(async (result) => {
            await Promise.all(
              selectedImages.map(async (image) => {
                const uri = await resizeFile(image);// i dont know what to do after this point
                console.log(uri);
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.put(uri).then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );
          });
      }
    };

EDIT:

Okay i managed to some how solve the issue, but there is still one problem which is that the height never gets resized to my specified maxHeight for some reason. Why is that?

Here is what i modified:

await Promise.all(
              selectedImages.map(async (image) => {
                const uri = await resizeFile(image);
                console.log(uri);
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.putString(uri,'data_url').then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );

Answer 1

I solved the firebase and image resizing issue this way. It turned out that the package does resize and compress the image to whatever you are specifying but if the image was of another format such as png (since i specified JPEG) it wouldn't resize it exactly to your liking. However, someone in the comments suggested that it wasnt related to firebase and it was solved by a firebase function.

all i had to do is to use .putString() so that the base64 returned would be converted to a string in firebase storage. Therefore, the answer to my question actually had a huge link to firebase and firebase storage.

const resizeFile = file =>
  new Promise(resolve => {
    Resizer.imageFileResizer(file, 500, 500, "JPEG", 25, 0, uri => {
      resolve(uri);
    });
  });

const addProperty = async () => {
  if (
    !propName ||
    !price ||
    !bedroom ||
    !bathroom ||
    !area ||
    !type ||
    !category ||
    !features ||
    !services
  ) {
    alert("Please Enter All Required Data");
  } else {
    await firebase
      .firestore()
      .collection("Properties")
      .add({
        propname: propName,
        price: price,
        bedrooms: bedroom,
        bathroom: bathroom,
        exclusive: exclusive,
        area: area,
        type: type,
        category: category,
        features: features,
        services: services,
        summary: summary,
        location: location,
        salesAgentID: salesAgent,
        date: getCurrentDate(),
      })
      .then(async result => {
        await Promise.all(
          selectedImages.map(async image => {
            const uri = await resizeFile(image);
            const storageRef = storage.ref(
              `propertyImages/${result.id}/${image.name}`
            );
            storageRef.putString(uri, "data_url").then(urls => {
              storageRef.getDownloadURL().then(downloadUrls => {
                console.log(downloadUrls);
                firebase
                  .firestore()
                  .collection("Properties")
                  .doc(result.id)
                  .update({
                    propertyID: result.id,
                    imageUrls:
                      firebase.firestore.FieldValue.arrayUnion(
                        downloadUrls
                      ),
                  })
                  .then(res => {
                    setIsUploaded("Uploaded success");

                    //handleUploadChange();
                    // alert("Property Added Successfully");
                    // window.location.reload();
                  });
              });
            });
          })
        );
      });
  }
};