upload a file to firebase storage

I am working on this project that allow users to upload a file to a firebase storage from their local computer.the user choose file or image to upload to firebase storage or firestore, a message is display if successful.

Below is the code i have written to achieve the task, but it is returning error, saying .put is not a function.

const handleUpload = () => {
    setUploading(true);
    const storageRef = ref(storage, `files/${file.name}`)
      .put(file)
      .then((snapshot) => {
        console.log(snapshot);
        storageRef("files")
          .child(file.name)
          .getDownloadURL()
          .then((url) => {
            db.collection("myFiles").add({
              timestamp: db.FieldValue.serverTimestamp(),
              caption: file.name,
              fileUrl: url,
              size: snapshot.bytesTransferred,
            });
            setUploading(false);
            setOpen(false);
            setFile(null);
          });
        storageRef("files")
          .child(file.name)
          .getMetadata()
          .then((meta) => {
            console.log(meta.size);
          });
      });
  };

Solution

Given that you call a function called ref, it seems that you're using the modular API syntax to access Cloud Storage through Firebase. In that syntax, many API calls are top-level functions that you import explicitly and then call similar to how you call ref.

The top-level functions for uploading data in the modular API are uploadBytes and uploadString. I recommend checking out this documentation for an example of them.

Since the rest of your code is using the more traditional namespaced API that Firebase also supports, I recommend also reading the guide on upgrading to the modular API, and specifically focus on the section on using the compat libraries, which might actually allow you to get your code working with a smaller change.