Node.js file upload hatası

import { useContext, useRef, useState } from "react";
import "./share.css";
import { PermMedia, Label, Room, EmojiEmotions } from "@mui/icons-material";
import { AuthContext } from "../../context/AuthContext";
import axios from "axios";
import React from "react";

export default function Share() {
 const { user } = useContext(AuthContext);
 const PF = process.env.REACT_APP_PUBLIC_FOLDER;
 const desc = useRef();
 const [file, setFile] = useState(null);

 const submitHandler = async (e) => {
 e.preventDefault();
 const newPost = {
 userId: user._id,
 desc: desc.current.value,
 };
 if (file) {
 const data = new FormData();
 const fileName = Date.now() + file.name;
 data.append("file", file);
 data.append("name", fileName);
 newPost.img = fileName;
 try {
 await axios.post("http://localhost:8800/api/upload", data);
 } catch (error) {
 console.log(error);
 }
 }

 try {
 await axios.post("http://localhost:8800/api/posts", newPost);
 } catch (error) {}
 };
 return (
 <div className="share">
 <div className="shareWrapper">
 <div className="shareTop">
 <img
 src={
 user.profilePicture
 ? PF + user.profilePicture
 : PF + "person/noAvatar.png"
 }
 alt=""
 className="shareProfileImg"
 />
 <input
 placeholder={"What's in your mind " + user.username + "?"}
 className="shareInput"
 ref={desc}
 />
 </div>
 <hr className="shareHr" />
 <form className="shareBottom" onSubmit={submitHandler}>
 <div className="shareOptions">
 <label htmlFor="file" className="shareOption">
 <PermMedia htmlColor="tomato" className="shareIcon" />
 <span className="shareOptionsText">Photo or Video</span>
 <input
 style={{ display: "none" }}
 type="file"
 id="file"
 accept=".png,.jpeg,.jpg"
 onChange={(e) => setFile(e.target.files[0])}
 />
 </label>
 <div className="shareOption">
 <Label htmlColor="blue" className="shareIcon" />
 <span className="shareOptionsText">Tag</span>
 </div>
 <div className="shareOption">
 <Room htmlColor="green" className="shareIcon" />
 <span className="shareOptionsText">Location</span>
 </div>
 <div className="shareOption">
 <EmojiEmotions htmlColor="goldenrod" className="shareIcon" />
 <span className="shareOptionsText">Feelings</span>
 </div>
 </div>
 <button className="shareButton" type="submit">
 Share.
 </button>
 </form>
 </div>
 </div>
 );
}

const express = require("express");
const mongoose = require("mongoose");
const dotenv = require("dotenv");
const helmet = require("helmet");
const morgan = require("morgan");
const userRoute = require("./routes/users");
const authRoute = require("./routes/auth");
const postRoute = require("./routes/posts");
const app = express();
const multer = require("multer");
const path = require("path");

dotenv.config();

mongoose.set("strictQuery", false);
mongoose.
 .connect(process.env.MONGO_URL, {
 useNewUrlParser: true,
 useUnifiedTopology: true,
 })
 .then(() => console.log("Connected to MongoDB"))
 .catch((err) => console.log(err));

app.use("/images", express.static(path.join(__dirname, "public/images")));

//middleware
app.use(express.json());
app.use(helmet());
app.use(morgan("common"));

const storage = multer.diskStorage({
 destination: (req, file, cb) => {
 cb(null, "public/images");
 },
 filename: (req, file, cb) => {
 cb(null, file.originalname);
 },
});

const upload = multer({ storage });
app.post("/api/upload", upload.single("file"), (req, res) => {
 try {
 return res.status(200).json("File uploaded successfully!");
 } catch (error) {
 console.log(error);
 }
});

app.use("/api/users", userRoute);
app.use("/api/auth", authRoute);
app.use("/api/posts", postRoute);

app.listen(8800, () => {
 console.log("Backend server is running!");
});

{
 "name": "client",
 "version": "0.1.0",
 "private": true,
 "type": "module",
 "eslintConfig": {
 "env": {
 "browser": true,
 "node": true.
 }
 },
 "dependencies": {
 "@emotion/react": "^11.13.0",
 "@emotion/styled": "^11.13.0",
 "@mui/icons-material": "^5.15.17",
 "@mui/material": "^5.15.17",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.7.2",
 "react": "^18.3.1",
 "react-dom": "^18.3.1",
 "react-router-dom": "^5.2.0",
 "react-scripts": "^3.4.1",
 "timeago.js": "^4.0.2",
 "watch": "^0.13.0",
 "web-vitals": "^2.1.4"
 },
 "scripts": {
 "start": "react-scripts --openssl-legacy-provider start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 },
 "extends": [
 "react-app",
 "react-app/jest"
 ],
 "browserslist": {
 "production": [
 ">0.2%",
 "not dead",
 "not op_mini all"
 ],
 "development": [
 "last 1 chrome version",
 "last 1 firefox version",
 "last 1 safari version"
 ]
 },
 "proxy": "http://localhost:8800/api",
 "devDependencies": {
 "@types/react-router": "^5.1.20",
 "@types/react-router-dom": "^5.3.3"
 }
}