Firebase Storage upload of img dont work -> Invalid argument in `put` at index 0: Expected Blob or File

Question

I try to use firebase storage for the first time. My goal is to upload img to the storage.

Console shows this err:

"Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.", serverResponse_: null, name_: "FirebaseError"}

 export default function ImgUpload() {
  const [img, setImg] = useState([]);

  console.log('img', img);

  const handleUpload = () => {
    firebase
      .storage()
      .ref()
      .child(`images/${img.name}`)
      .put(img)
      .then(function (snapshot) {
        console.log('what');
      });
  };

  return (
    <div>
      <Input onChange={setImg} type="file" value={img} />
      <Button onClick={e => handleUpload(e)} type="submit">
        Upload
      </Button>
    </div>
  );
}

I have also find this in documentation:

var file = ... // use the Blob or File API 
ref.put(file).then(function(snapshot) {   
console.log('Uploaded a blob or file!'); });

I cant figure out how to set it to work even with this.

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2020-04-27T14:34:23

From a quick check of the ReactJS documentation on the file input tag you can get the actual file with this.fileInput.current.files[0].

So that'd means it'd look something like this for you:

let file = this.fileInput.current.files[0];
firebase
  .storage()
  .ref()
  .child(`images/${file.name}`)
  .put(file)

With this in the JSX:

<input type="file" ref={this.fileInput} />

Firebase Storage upload of img dont work -> Invalid argument in `put` at index 0: Expected Blob or File

1 Answers