How to upload a img to firebase storage correctly (javascript)?

Question

Im having problem uploading image to firebase storage, it keeps uploading 9B file to storage even if selected file is a 100mb file. It is showing the progress as NaN%, once i successfully uploaded a image to firebase storage but now im failing here is the code,

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const storage = getStorage();

var picker = document.getElementById('img');

picker.onchange = function(){
var file = window.URL.createObjectURL(picker.files[0]);
var filename = picker.files[0].name;
const storageRef = ref(storage, 'icons/' + filename);

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

I tried many options i doesn't know why it is not working, i want to upload image & get download url.

Where is the progress that shows NaN? Please share exact code that is not working for you. — Dharmaraj, Jan 15 '23 at 07:18
Oops sorry its showing when upload as uploadBytesResumable its also same — FlitchZy, Jan 15 '23 at 08:07
Then the code you've provided is totally irrelevant to the issue. Please see [How to create a Minimal, Reproducible Example?](https://stackoverflow.com/help/minimal-reproducible-example) and update your question. — Dharmaraj, Jan 15 '23 at 08:14

score 1 · Accepted Answer · answered Jan 15 '23 at 07:16

1

You have to pass the actual File object to uploadBytes and not the object URL. Try:

picker.onchange = function() {
    const file = picker.files[0];
    if (!file) {
      alert("No file selected")
      return
    }
  
    const storageRef = ref(storage, 'icons/' + file.name);

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

answered Jan 15 '23 at 07:16

Dharmaraj

47,845
8
52
84

@FlitchZy you should post a new question for another issue with relevant details so others can take a look as well instead of comments. – Dharmaraj Jan 15 '23 at 08:17
Ok i"ll post another question – FlitchZy Jan 15 '23 at 09:45
I have a question related to this code u sent, when i save the file variable to localStorage & get it from another page its showing it as [object file] why? – FlitchZy Jan 15 '23 at 10:12
@FlitchZy local storage is not used for storing files ideally. See https://stackoverflow.com/a/19198817/13130697 – Dharmaraj Jan 15 '23 at 10:19

score 0 · Answer 2 · answered Jan 15 '23 at 07:19

0

It seems you are providing a url to the image blob/file instead of passing the file itself. Try changing line 8 to just var file = picker.files[0].

If that doesn’t work, try logging fileafter it is initialized to make sure it exists.

answered Jan 15 '23 at 07:19

minnow

183
8

How to upload a img to firebase storage correctly (javascript)?

2 Answers2