CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-storage
Kalamazoo
Kalamazoo

Reputation: 141

Image does not seem to be uploaded to Firebase storage although no error is thrown

I am building a social media app. In the app I have a form that allows users to upload an image to firebase storage.

the images appear in folders in firebase storage (i.e. attached below) but somehow when I click on the image , it redirects me to a blank page and a popup appears

enter image description here

enter image description here

After saving the image, I tried to open it on my computer but it says "It appears that we don't support this file format."
Similarly, when I try to include the firebase link to my img in my react app using Img tag, it doesn't appear in the app but shows up as a icon.

Here's my code snippet for setting image as state using react hooks:

const handleFileChange = (e) => {
    setImage(null);
    let selected = e.target.files[0];
    console.log(selected);

    if (!selected) {
      setImgError("Please select a file.");
      return;
    }

    if (!selected.type.includes("image")) {
      setImgError("Selected file must be an image.");
      return;
    }
    if (!selected.size > 100000) {
      setImgError("Image file size must be less than 100kb.");
      return;
    }

    setImgError(null);
    setImage(selected);
  };

Here's my code snippet for the uploading of image to firebase storage (I am using firebase v9):

const handleSubmit = async (e) => {
    e.preventDefault();
    let time = new Date().valueOf();
    const file = `images/${user.uid}/${time}/${image.name}`;
    const storageRef = ref(storage, file);
    await uploadBytes(storageRef, file).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) =>
        addDoc(collection(db, "posts"), {
          uid: user.uid,
          caption: caption,
          post: post,
          displayName: user.displayName,
          imgURL: url,
          comments: [],
          likes: [],
        })
      );
    });
    setCaption("");
    setPost("");
    history.push("/home");
  };

EDIT: I tried following the documentation for uploading files here and made these changes as follows:

const handleSubmit = async (e) => {
    e.preventDefault();
    let time = new Date().valueOf();
    const storage = getStorage();
    const file = `${image.name}`;
    const storageRef = ref(storage, `images/${user.uid}/${time}/${image.name}`);

    uploadBytes(storageRef, file).then((snapshot) => {
      console.log("Uploaded a blob or file!");
    });

I'm not too sure what is expected as the 2nd argument (& the format of it) in storageRef; I'm assuming its the location of where I want the file to be stored. Would appreciate any help/insights on this. Thanks!

Upvotes: 0

Views: 2035

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598765

Your file variable is wrong in this snippet:

const file = `images/${user.uid}/${time}/${image.name}`;
const storageRef = ref(storage, file);
await uploadBytes(storageRef, file).then((snapshot) => {

The second argument to uploadBytes expects:

Blob | Uint8Array | ArrayBuffer The data to upload.

But you are passing it a string with the path that you want the file to have on the server, which is not one of the expected types.

As the sample in the documentation on uploading files says:

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});

So I expect that you'll want to pass in e.target.files[0] or something like that.

Upvotes: 3

Related Questions