i'm getting an error of "Firebase Storage: Invalid argument count in `put`: Expected between 1 and 2 arguments, received 0

Question

When I click to upload button firebase is giving me below error:

Uncaught FirebaseStorageError {code_: "storage/invalid-argument-count", message_: "Firebase Storage: Invalid argument count in put : Expected between 1 and 2 arguments, received 0.", serverResponse_: null, name_: "FirebaseError"}

function ImageUpload(username) {
    const [caption, setCaption] = useState('');

    const [image, setImage] = useState(null);
    // const [url, setUrl] = useState("");
    const [progress, setProgress] = useState(0);

    const handleChange =  (e) => {
        if(e.target.files[0]){
            setImage(e.target.files[0]); // setting current image
        } 
    };

    const handleUpload = () => {
        const uploadTask = firebase.storage().ref(`images/${image.name}`).put();

        uploadTask.on(
            "state_changed",
            (snapshot) => {
                // progress bar
                const progress = Math.round(
                    (snapshot.bytesTransferred / snapshot.totalBytes) * 100
                );
                setProgress(progress);
            },
            (error) => {
                // err function
                console.log(error); 
                alert(error.message);
            },
            () => {
                storage
                .ref("images")
                .child(image.name)
                .getDownloadURL()
                .then(url => {
                    //upload img inside DB
                    db.collection("posts").add({
                        timestamp : firebase.firestore.FieldValue.serverTimestamp(),
                        caption : caption ,
                        imageUrl : url ,
                        username : username
                    });

                    setProgress(0);
                    setCaption('');
                    setImage(null);
                });
            }
        )
    }

    return (
        <div>

            <progress value={progress} max="100" />

            <input type="text" placeholder='enter a caption...' 
                onChange={event => setCaption(event.target.value)} value={caption} 
            />

            <input type="file" onChange={handleChange} />

            <Button className="imageUpload__button" onClick={handleUpload}>
                Upload
            </Button>
        </div>
    )
}

export default ImageUpload

Answer 1

According to the docs:

put

put ( data: Blob | Uint8Array | ArrayBuffer, metadata? : UploadMetadata ): UploadTask Uploads data to this reference's location.

Parameters data: Blob | Uint8Array | ArrayBuffer The data to upload.

Optional metadata: UploadMetadata Metadata for the newly uploaded object.

Returns UploadTask

For example:

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

https://firebase.google.com/docs/storage/web/upload-files

https://firebase.google.com/docs/reference/js/firebase.storage.Reference#put

Therefore inside the put() method that you are using you need to either use a File or Blob