Angular 5 Firebase 文件上传标题错误问题排查求助

Hey there, let's break down the file title-related error you're hitting with your Angular upload service. Based on the code snippet you shared, here are the most likely culprits and actionable fixes to get you back on track:

Common Causes & Solutions #

1. Invalid Characters in Filename #

Firebase Storage restricts certain characters in filenames and storage paths—things like #, $, [, ], *, \, /, or leading/trailing slashes can trigger validation errors.

Fix: Add a quick validation check before initiating the upload:

pushUpload(upload: Project) {
  // Validate filename for restricted characters first
  const restrictedChars = /[#$\\[\]*/]/;
  if (restrictedChars.test(upload.file.name)) {
    console.error("Oops! Your filename has restricted characters (e.g., #, $, [ ]). Please rename it and try again.");
    throw new Error("Invalid filename: contains restricted characters");
  }

  // Rest of your upload logic
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);
  // ...
}

2. Mismatched or Missing Title Field in Your Project Model #

If you're writing the filename (or a custom title) to Firestore, a mismatch between your Project type definition and the Firestore collection schema is a common source of errors. Examples include:

• Forgetting to define a title field in your Project interface/class
• Using the wrong data type (e.g., expecting a number but passing a string)
• Typos in the field name (e.g., titile instead of title)

Fix: Double-check your Project type and explicitly set the title when writing to Firestore:

// Ensure your Project interface includes the title field
interface Project {
  title: string;
  file: File;
  downloadURL?: string;
  // Other required fields...
}

// In your upload completion handler
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
  // Set title using the filename (remove extension if needed)
  upload.title = upload.file.name.split('.')[0];
  // Write to Firestore
  this.projectsCollection.add(upload)
    .catch(err => console.error("Firestore write failed:", err));
});

3. Empty or Undefined Filename #

If upload.file.name is empty or undefined, Firebase will throw an error when trying to create the storage path.

Fix: Add a guard clause for empty filenames:

if (!upload.file.name || upload.file.name.trim() === "") {
  console.error("Filename can't be empty!");
  throw new Error("Empty filename provided");
}

4. Use Firebase Error Codes to Narrow Down Issues #

Always check your browser's console for specific Firebase error codes—they’ll point you directly to the problem:

• storage/invalid-argument: Likely a filename/path format issue
• firestore/invalid-field-name: You’re using a reserved word or invalid character for a Firestore field
• firestore/missing-required-field: Your Project is missing a required title field expected by Firestore

Quick Troubleshooting Checklist #

1. Log the filename: Add console.log("Uploading file:", upload.file.name) at the start of pushUpload to confirm what’s being passed.
2. Test with a simple filename: Try uploading test.txt—if it works, your original filename has invalid characters.
3. Verify Firestore rules: Ensure your rules allow writing the title field to your target collection.

内容的提问来源于stack exchange，提问作者Angulandy2