Firebase - storage images on form submit. React JS

Question

I'm trying to upload image to firebase storage with this code:

const firebase = useFirebase();
      const handleSubmit = e => {
        e.preventDefault();
       // state.title && dispatch(createItems(state));

        firebase
          .storage()
          .ref(`images/${state.title}`)
          .child(state.title)
          .getDownloadURL()
          .then(url => setState({ ...state, avatarURL: url }));
      };

And it's not working. Almost the same code works fine with react-firebase-file-uploader. Does any anyone has idea why?

Thanks!

Doing.ref(`images/${state.title}`).child(state.title) means that you'll have state.title in the file path as well as being the file name. Is that what you want? — Renaud Tarnec
Actually it doean't matter what the file name would be. For know it can be the same and I'll think about it later. The question is why it's not uploading to firebase at all. — Ola Kozioł
"The question is why it's not uploading to firebase at all." -> See the answer. — Renaud Tarnec

Renaud Tarnec Renaud Tarnec · Accepted Answer · 2020-03-14T13:57:21

By doing

 firebase
      .storage()
      .ref(`images/${state.title}`)
      .child(state.title)
      .getDownloadURL()
      .then(url => setState({ ...state, avatarURL: url }));

you are not uploading a file to Cloud Storage but you are just getting "a long lived download URL for the object" represented by the .ref(`images/${state.title}`).child(state.title) Reference, through the getDownloadURL() method.

If you want to upload a file you need to use the put() method.

Firebase - storage images on form submit. React JS

1 Answers