How to add a file to firestore?

Question

On the page, the user fills out a form to add an advertisement for renting a house. He enters information about the house and adds one photo. I need to implement adding photo in Firebase. How can i do this? I need the user to add a photo and it will appear on the page. How can I store photos in Firestore. Now the error in my code is Function setDoc() called with invalid data. Unsupported field value: a custom File object.

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredText, setEnteredText] = useState("");
  const [enteredLatitude, setEnteredLatitude] = useState("");
  const [enteredLongitude, setEnteredLongitude] = useState("");
  const [file, setFile] = useState();
  const housesRef = collection(db, "map-markers");

  const togglePopup = () => {
    setIsOpen(!isOpen);
  };

  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };
  const textChangeHandler = (event) => {
    setEnteredText(event.target.value);
  };
  const latitudeChangeHandler = (event) => {
    setEnteredLatitude(event.target.value);
  };
  const longitudeChangeHandler = (event) => {
    setEnteredLongitude(event.target.value);
  };

  const handleChange = (event) => {
    setFile(event.target.files[0]);
  };

  const submitHandler = async (e) => {
    e.preventDefault();
    try {
      await setDoc(doc(housesRef, enteredTitle), {
        title: enteredTitle,
        descr: enteredText,
        lat: enteredLatitude,
        lon: enteredLongitude,
        img: file,
      });
      togglePopup();
      setEnteredTitle("");
      setEnteredText("");
      setEnteredLatitude("");
      setEnteredLongitude("");
    } catch (err) {
      alert(err);
    }
  };

  return (
    <div className="header">
      <div className="header-content">
        <div className="header-input">
          <input
            className="add-adv"
            type="button"
            value="Add advertisement"
            onClick={togglePopup}
          />
          {isOpen && (
            <AddAdvertisement
              content={
                <>
                  <input
                    type="text"
                    placeholder="Enter title"
                    value={enteredTitle}
                    onChange={titleChangeHandler}
                  />
                  <textarea
                    type="textarea"
                    placeholder="Enter description"
                    value={enteredText}
                    onChange={textChangeHandler}
                  />
                  <input
                    type="text"
                    placeholder="Enter latitude"
                    value={enteredLatitude}
                    onChange={latitudeChangeHandler}
                  />
                  <input
                    type="text"
                    placeholder="Enter longitude"
                    value={enteredLongitude}
                    onChange={longitudeChangeHandler}
                  />
                  <input type="file" onChange={handleChange} />
                  <input type="submit" value="Add" onClick={submitHandler} />
                </>
              }
              handleClose={togglePopup}
            />
          )}
        </div>
      </div>
    </div>
  );
};

Answer 1

To achieve what you have mentioned in the question above, you may use Firebase storage which allows you to quickly and easily upload files to a Cloud Storage bucket provided and managed by Firebase.

To upload a file to Cloud Storage, you first create a reference to the full path of the file, including the file name and then use this reference to add files. The error message you mentioned here is telling you that the object you passed to setDoc() contains a File object as one of its properties, which is not accepted. You should only be passing objects to Firestore that have common JavaScript types, or Timestamps, or DocumentReferences.What you will have to do instead is make sure that you're composing an object that has valid type.
Also you may check and debug your code by printing the values of the variables. The photo upload requirement also should be taken care of in a way to limit the document size ,since you could easily exceed the max document size of 1MB. Please check for more information on File reader and Upload files with Cloud Storage on Web here.