Firebase.storage: uploading file from React form

Question

I'm trying to upload to Firebase storage some file, chosen earlier in input element of a React form

it's a handler: pass file object to uploader and waits (I'd like to do so) for the return from it.

// comes from input-type element, contains icon picture 
handleIconFile =(e) => {
const iconFile = e.target.files[0]

// try to upload in order to get download url
  const downloadURL = uploadFile(iconFile, ()=>{

  // takes some time ...
  console.log(downloadURL);

  // store url to state
  this.setState({ downloadURL })
  })
}

it's uploader: it was taken from firebase docs and added return statement in success handler

/** takes File Object to upload to storage
    returns url for download this file from firebase */
uploadFile = (iconFile) => {

    // root reference
    const fileName = iconFile.name
    console.log(fileName);
    // const metadata = { contentType: 'image/jpeg' }
    const storageRef = storage.ref()
    const uploadTask = storageRef.child('/icon/'+ fileName).put(iconFile)

    // Register three observers:
    // 1. 'state_changed' observer, called any time the state changes
    // 2. Error observer, called on failure
    // 3. Completion observer, called on successful completion
    uploadTask.on('state_changed', function(snapshot){
      // Observe state change events such as progress, pause, and resume
      // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
      var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log('Upload is ' + progress + '% done');
    }, function(error) {
      // Handle unsuccessful uploads
      console.log('error:', error);
    }, function() {
      // Handle successful uploads on complete
      var downloadURL = uploadTask.snapshot.downloadURL;
      // console.log(downloadURL);
      return downloadURL // <--- I did add this myself in order to return it back to handler
    });
}

file is loaded successfully. in console I see: Upload is 0% done Upload is 100% done

problem is: downloadURL don't return to handler back. I can see it in success section of uploader -- // console.log(downloadURL); , but can't see it anywhere else.

Why are you passing a second argument (a function) to uploadFile when it only accepts a single argument? Are you expecting it will be executed after the file is uploaded? — nshoes
– nshoes, Commented Jul 31, 2017 at 23:59
@nshoes, I did think so, but now i think would be better to execute what I need in success section of uploadFile function , like : } var downloadURL = uploadTask.snapshot.downloadURL; backFire(downloadURL); }) const backFire = (url) => { console.log(url); this.setState({ downloadURL: url }) } looks weird, but its the only way I found to return something in asynchronous world. — Pavel L
– Pavel L, Commented Aug 1, 2017 at 9:38

grgmo · Accepted Answer · 2017-08-01 12:56:55Z

It looks like you are trying to do this with callback, try something like this -

handleIconFile =(e) => {
  const iconFile = e.target.files[0]

  uploadFile(iconFile, result => {

    if (result.progress) {
      // Handle progress
      return;
    }

    if (result.downloadURL) {
      this.setState({ result.downloadURL });
      return;
    }

    if (result.error) {
      // Handle error
    }
  });
}

uploadFile = (iconFile, callback) => {

  const fileName = iconFile.name
  const storageRef = storage.ref()
  const uploadTask = storageRef.child('/icon/'+ fileName).put(iconFile)

  uploadTask.on('state_changed', snapshot => {
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    callback({ progress });
  }, error => {
    callback({ error });
  }, () => {
    var downloadURL = uploadTask.snapshot.downloadURL;
    callback({ downloadURL });
  });
}

Collectives™ on Stack Overflow

Firebase.storage: uploading file from React form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related