Question 74092 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Firebase Storage not displaying image properly (shows a small box) – Reactjs

EDIT: I’ve updated the CORS config but its still showing the same error.

I have a Tinymce RTE on my page, and when u drop an image into the editor, I have some functions that upload it to firebase storage, then swaps out the src of the text editor with the url fetched from firebase. It works kinda ok, but its being displayed as a broken link image icon.

When I check the link, its because originally it downloads the image when the link is clicked. I added a metadata property when it uploads it, but now its just showing a tiny box.

Here is the code where the image dropped into the editor is uploaded into firebase storage

const imagesUploadHandler = async (blobInfo, success, failure) => {
    try {
      const file = blobInfo.blob();
      const storageRef = ref(storage, file.name);
      const metadata = {
        contentType: 'image/jpeg',
      };
      
      await uploadBytes(storageRef, file, metadata);
      const url = await getDownloadURL(storageRef);
      console.log(url);
      return url;
    } catch (error) {
      // Call the failure callback with the error message
      console.log(error.message);
    }
  };

Originally, i didnt include the contentType metadata, and it was just uploading as application/octet-stream, which i assume is why it prompts you to save the image.

Image link: https://firebasestorage.googleapis.com/v0/b/cloudnoise-news.appspot.com/o/ref.jpg?alt=media&token=1edc90e7-1668-4a06-92a3-965ce275798b

Currently its displaying this box

Somethings i checked through

  • firebase storage rules is in test mode, so should be able to read and write by anyone.
  • i tried sticking in different MIME types but it either shows the tiny box, or it shows "undefined"
  • the files upload successfully and the "swap" in Tinymce editor is also all good.

Any idea why this is happening?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I fixed it by adding a blob, I created a blob object with the file data, then i just made it upload the blob object instead of the single file.

     const imagesUploadHandler = async (blobInfo, success, failure) => {
try {
  const file = blobInfo.blob();
  const storageRef = ref(storage, file.name);
  const metadata = {
    contentType: file.type,
  };
  
  // Create a new Blob object with the file data
  const blob2 = await new Blob([file], { type: file.type });
  
  // Upload the Blob to Firebase Storage
  await uploadBytes(storageRef, blob2, metadata);
  const url = await getDownloadURL(storageRef);
  console.log(url);
  return url;

} catch (error) {
  // Call the failure callback with the error message;;
  console.log(error.message)
}
  };


  2. 0

    you need to set the metadata tag

    const metadata = {
  contentType: file.type,
};

    This should ensure that the correct content type is set when the image is uploaded to Firebase Storage.

    If this does not resolve the issue, you may need to check that the URL returned from getDownloadURL is valid and points to the correct image. You can try opening the URL in a new browser tab to verify that the image is accessible.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search