I am trying to allow the user to upload multiple images (no more than 3) to the Firebase Database. Currently, the user can only select one image and upload it. This code is also displaying the selected image, how would I be able to modify it so that the multiple selected images will be shown just like Twitter
Post.js
function Post() {
const { data: session } = useSession();
const [selectedFile, setSelectedFile] = useState(null);
const filePickerRef = useRef(null);
const sendPost = async () => {
const docRef = await addDoc(collection(db, "posts"), {
postid: postId,
id: session.user.uid,
name: session.user.realname,
username: session.user.username,
email: session.user.email,
userImg: session.user.image,
timestamp: serverTimestamp(),
});
const imageRef = ref(storage, `posts/${docRef.id}/image`);
if (selectedFile) {
await uploadString(imageRef, selectedFile, "data_url").then(async () => {
const downloadURL = await getDownloadURL(imageRef);
await updateDoc(doc(db, "posts", docRef.id), {
image: downloadURL,
});
});
}
setSelectedFile(null);
};
const addImageToPost = (e) => {
const reader = new FileReader();
if (e.target.files[0]) {
reader.readAsDataURL(e.target.files[0]);
}
reader.onload = (readerEvent) => {
setSelectedFile(readerEvent.target.result);
};
};
return (
<div>
<img
src={selectedFile}
alt=""
className="rounded-2xl max-h-80 object-contain"
/>
<div className="flex items-center justify-center pt-2.5 px-3 py-2 ">
<div className="flex space-x-3">
<div
className="text-white grayBoxHover"
onClick={() => filePickerRef.current.click()}
>
<PhotographIcon className="text-[#FEFEFE] h-[25px]" />
<input
type="file"
ref={filePickerRef}
hidden
onChange={addImageToPost}
/>
</div>
<div className="ml-auto">
<button
className="px-5 py-2.5 text-lg font-bold bg-[#A3A3A5] hover:bg-[#d9d9d9] text-[#FEFEFE] disabled:hover:bg-[#A3A3A5] disabled:cursor-default rounded-lg"
onClick={sendPost}
>
Post
</button>
</div>
</div>
</div>
</div>
);
}
export default Post;