How to fix storage/invalid-event-name: Event name must be running, progress, or pause in Firebase

Always call UploadTask.on with one of the supported labels and attach your callbacks to that event. The web SDK exposes the progress, running, and pause states, so your listener should look like this:

const uploadTask = storageRef.put(file);

uploadTask.on(
  "progress",
  (snapshot) => {
    const pct = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log(`Upload is ${pct.toFixed(1)}% complete`);
  },
  (error) => console.error("Upload listener failed", error),
  () => console.log("Upload completed")
);

Replace "progress" with "running" or "pause" if you need to monitor that specific state; do not invent new event names or fall back to deprecated labels.

Frameworks like AngularFire, React Native Firebase, or native wrappers often re-expose the upload task API but may translate your event names before hitting the SDK. Locate the wrapper that builds the observer or onStateChanged call and ensure it forwards one of the supported strings. If you're calling the wrapper with a custom event (or using a shorthand like task.on("state_changed")), switch to the library's progress helper or explicitly pass "progress", "running", or "pause" so the underlying SDK does not throw the invalid-event-name error.

Avoid hand-typed strings by importing the Firebase Storage enum helpers. The reference doc lists the states you can expect (TaskState) and keeps the permitted values centralized. For example:

import { TaskState } from "firebase/storage";

uploadTask.on(TaskState.Progress, ...); // TypeScript enum maps to "progress"

Using the enum also prevents typos ("progres" or "paused") and automatically updates if Firebase ever renames the constants, which keeps your listener code aligned with the supported event names.