Error loading Preview in Firebase Cloud Storage

Question

I've uploaded an image to Cloud Storage , but I'm having an issue with displaying an image. On the Storage overview, I'm getting Error loading preview.

I haven't got to the step when I add the image link to an object in Cloud Firestore, but I wasn't sure if this is just due to the file type (HEIC, but image/jpeg) or if something is wrong with my code:

Storage Overview:

Image (When clicked on):

Showing question mark.

Image Response (react-native-image-picker):

 {height: 3024, origURL: "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC", fileName: null, data: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA…c4z+P04wa+twuG5Yq628/OR1QqSdtLLqrrTe32L79l63P/9k=", width: 4032, …}
height: 3024
origURL: "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC"
fileName: null
data: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA"
width: 4032
type: "image/jpeg"
fileSize: 13712705
isVertical: false
uri: "file:///Users/jefflewis/Library/Developer/CoreSimulator/Devices/6B2E3DBA-217F-46B5-AAF2-C1AA540B408E/data/Containers/Data/Application/4CD01B23-6649-4222-BF0E-CB5959732A3E/Documents/images/BECF69B3-9AFF-4CBB-9648-331EF623271C.jpg"
__proto__: Object

Code:

// Image URI
const imageURI = action.newRecipe.image.uri;

// Image Type
const imageType = action.newRecipe.image.type;

// Image Blob
const blob = new Blob([imageURI], {type : `${imageType}`});
console.log('Adding Blob');
console.log(blob.data);

// Firebase Cloud Storage File Path Ref (UUID Generates Randomized File Name)
const filePathRef = imagesRef.child(uuidv4());

// Metadata
const metadata = {
  contentType : `${imageType}`,
};

// Upload File
console.log('Firebase: Uploading image');
const uploadTask = reduxSagaFirebase.storage.uploadFile(filePathRef, blob, metadata);

// Upload Task
uploadTask.on('state_changed', (snapshot) => {
  // Progress
  const progress = (snapshot.bytesTransferred * 100) / snapshot.totalBytes;
  console.log(`Uploading Image: ${progress}%`);
});

// Wait For Upload To Complete
yield uploadTask;

Answer 1

Can you see an Access token if you click the File location section there in your Console? If not, this could be an issue with the fact that your file does not contain an "Access token".

Try adding one in the metadata and see how it goes.

const metadata  = {
  contentType : `${imageType}`,
  firebaseStorageDownloadTokens: uuidv4() //In this line you are adding the access token
};

See, whenever you upload an image using Firebase Console, an access token will be automatically generated. However, if you upload an image using any Admin SDK or gsutil you will need to manually generate this access token yourself.

This curious fact seems to affect the preview in the Firebase Console.

For example, I uploaded the same image using the Admin SDK and the Console and here are the results.

Uploaded using Admin SDK (It keeps loading forever):

Uploaded using the Console (Has an access token in the File location section)

I am aware that this error looks a little bit different but could be related. Good luck!

I addressed this issue in this question for Python

Answer 2

This is how I was able to fix it: Turn your file into blob and it will be fixed, check the code below:

const uploadImage = async () => {
    const response = await fetch(file.uri)
    const blob = await response.blob();
    var ref = firebase.storage().ref().child("FolderName");
    return ref.put(blob)
}

Answer 3

You can try this.

let newImageUri

try {
  const response = await fetch(imageUrl)
  const blob = await response.blob()
  await firebase.storage().ref().child(fileName).put(blob)
  var ref = firebase.storage().ref().child(fileName).put(blob)
  newImageUri = await ref.snapshot.ref.getDownloadURL()
    
} catch (error) {
    console.log(error)
    
}