upload array of image in firebase storage in Next JS?

Question

i'm using Next JS 13 and firebase@latest. i've created a drop zone and it accepts an array of images. so now i want to store this array of images in firebase storage and store the url's inside firestore.

this is how i'm pushing to firestore

import { db } from "../../firebase";
import { collection, doc, addDoc } from "firebase/firestore/lite";
import { useSession } from "next-auth/react";

export default function Home(

  const { data: session } = useSession();

  const createDocument = () => {
    const docRef = doc(db, "allPosts", session?.user?.email);
    const colRef = collection(docRef, "posts")
    addDoc(colRef, {
      name: name,
      desc: desc,
      images: images
    });
  };
)

so how can i push the images to firebase storage and then store the url's of those array of images inside my firestore? ie: the images doc is just to show where the url's go.

the image array

[
  {
    id: 1
    name: "image_processing20220628-4591-yzir35.png"
    src: "blob:http://localhost:3000/6e2f33e5-a749-4e9a-b502-d20b8e3f38ca"
  }
 ...
]

Can you share complete code so we can see where `images` is coming from and what is its value? — Dharmaraj, Jan 28 '23 at 09:13
images is an object {id: index, name: imagename, src: image src} this is the structure. i want to store the src. — Mohammed Bekele, Jan 28 '23 at 09:15
`src` property is the Firebase storage URL? Also, is that an array of images? Can you please `console.log({images}) and share a screenshot? — Dharmaraj, Jan 28 '23 at 09:16
The object URLs won't help. I thought you have uploaded to Firebase storage already. It would be best if you could add code for the function that runs after a user selects the file and calls this createDoc function. That'll would be much easier of any of us to help with rather than coding from scratch. — Dharmaraj, Jan 28 '23 at 09:26
i didn't upload it to storage. that's what i wanted to know. how to upload the arrays and store the url — Mohammed Bekele, Jan 28 '23 at 09:27
This should help: https://stackoverflow.com/a/68485738/13130697 — Dharmaraj, Jan 28 '23 at 09:33

upload array of image in firebase storage in Next JS?

0 Answers0