Firebase: Error loading preview after upload

Question

Can somebody please help? I have been searching documentation for hours, but can't find the right solution. I am trying to just upload a hard coded image that I have in my project called house.jpg. However, when I upload it, it is not uploading properly. I specified that it is an image, but it just shows 'error loading preview'. It is also storing at 9 bytes, when it should be storing around 50KB.

var storageRef = storage.ref();
var propertyRef = storageRef.child(mainImageUrl);
console.log("adding property image")

const myPromise = new Promise((resolve, reject) =>{
    var metadata = {
       contentType: 'image/jpeg',
       cacheControl: 'public,max-age=300',
    };
    var image = "../../assets/icons/house.jpg"
    console.log(image)
    propertyRef.put(image, metadata).then((snapshot)=>{
        console.log('Uploaded a file', snapshot);
        snapshot.ref.getDownloadURL().then((downloadURL)=>{
            console.log("url: ", downloadURL);
                resolve(downloadURL);
            })
        }).catch((error)=>{
                reject(error);
        })
   });

JustinMartinDev · Accepted Answer · 2021-04-20 10:08:40Z

You saved the string ../../assets/icons/house.jpg as file

if you want to save the file from this location you have to get the data before.

with require:

var storageRef = storage.ref();
var propertyRef = storageRef.child(mainImageUrl);
console.log("adding property image")

const myPromise = new Promise((resolve, reject) =>{
    var metadata = {
       contentType: 'image/jpeg',
       cacheControl: 'public,max-age=300',
    };
    var image = require("../../assets/icons/house.jpg")
    console.log(image)
    propertyRef.put(image, metadata).then((snapshot)=>{
        console.log('Uploaded a file', snapshot);
        snapshot.ref.getDownloadURL().then((downloadURL)=>{
            console.log("url: ", downloadURL);
                resolve(downloadURL);
            })
        }).catch((error)=>{
                reject(error);
        })
   });

But the best way is to not hard code this and use the upload button in firebase console — JustinMartinDev, Commented Apr 20, 2021 at 10:10

Oush · Accepted Answer · 2023-10-25 22:59:10Z

0

Saving the file directly like that and you will need to generate a token. (This however didn't work for me)

What worked is saving it as a blob

answered Oct 25, 2023 at 22:59

Oush

3,36826 silver badges25 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Firebase: Error loading preview after upload

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related