How to upload multiple images in Firebase 9 - React Js

Question

I have an array of images that I'm trying to upload to firebase (firestore) but when I try to upload, It throws the error dataUrl.match is not a function. Here's my code:

Form.js

import { db, storage } from "../../firebase";
import {
  addDoc,
  collection,
  doc,
  serverTimestamp,
  updateDoc,
} from "@firebase/firestore";
import { getDownloadURL, ref, uploadString } from "@firebase/storage";
import { useSelector } from "react-redux";

function Form() {
  const Images = useSelector((state) => state.draggedImages.images);

  const imageTarget = Images.length - 1;

  const SendPost = async () => {
    const docRef = await addDoc(collection(db, "Post-Ad"), {
      id: session.user.uid,
      username: session.user.name,
      ProductName: name,
      AdTitle: title,
      AdDescription: description,

      timestamp: serverTimestamp(),
    }).then(() => console.log("sent to firestore"));

    const imageRef = ref(storage, `Post-Ad/${docRef?.id}/image`);
    Images[imageTarget]?.map((Img) =>
      uploadString(imageRef, Img, "data_url").then(async () => {
        const downloadURL = await getDownloadURL(imageRef);
        await updateDoc(doc(db, "posts", docRef.id), {
          image: downloadURL,
        });
      })
    );
  };
}

The form information is uploaded but the images are not.

Please take a look at this link : ibb.co/sKffydB @MousumiRoy — Laspeed
– Laspeed, Commented Dec 20, 2021 at 10:20
You may have a look at a similar Stackoverflow case. Let me know if it helps! — Mousumi Roy
– Mousumi Roy, Commented Dec 20, 2021 at 11:50

Laspeed · Accepted Answer · 2021-12-20 12:47:59Z

2

It seemed like I was using the wrong function to upload the image that's why I was getting the DataUrl.match is not a function. So All I did was replace the 'uploadString' with 'uploadBytes' and that error went away. Here's the reference I followed thanks to @MousumiRoy : Error 400 Bad Request while Uploading Image to firebase storage in React Native

Here's what the code now looks like

Form.js

import { db, storage } from "../../firebase";
import {
  addDoc,
  collection,
  doc,
  serverTimestamp,
  updateDoc,
} from "@firebase/firestore";
import { getDownloadURL, ref, uploadBytes } from "@firebase/storage";
import { useSelector } from "react-redux";

function Form() {
  const Images = useSelector((state) => state.draggedImages.images);

  const imageTarget = Images.length - 1;

  const SendPost = async () => {
    const docRef = await addDoc(collection(db, "Post-Ad"), {
      id: session.user.uid,
      username: session.user.name,
      ProductName: name,
      AdTitle: title,
      AdDescription: description,

      timestamp: serverTimestamp(),
    }).then(() => console.log("sent to firestore"));

    const imageRef = ref(storage, `Post-Ad/${docRef?.id}/image`);
    Images[imageTarget]?.map((Img) =>
      uploadBytes (imageRef, Img, "data_url").then(async () => {
        const downloadURL = await getDownloadURL(imageRef);
        await updateDoc(doc(db, "posts", docRef.id), {
          image: downloadURL,
        });
      })
    );
  };
}

answered Dec 20, 2021 at 12:47

Laspeed

1,1211 gold badge14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xsmael Over a year ago

Good job. Well done! 👏

Rajesh Khadka Over a year ago

Does that const downloadURL = await getDownloadURL(imageRef); returns an array ?

Collectives™ on Stack Overflow

How to upload multiple images in Firebase 9 - React Js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related