Why do I get status code 500 when I make a POST request?

Question

JavaScript

I'm trying to upload an image to the server along with my data, but I'm getting a 500 error in response to the request. How can I fix this?
preview:

{errno: -4058, code: "ENOENT", syscall: "open",…}
code: "ENOENT"
errno: -4058
path: "C:\\Users\\propr\\Desktop\\react-apps\\anime-sait\\src\\Server\\public\\Fotoram.jpg"
storageErrors: []
syscall: "open"

Route.js code:

var express = require("express");
var app = express();
var multer = require("multer");
var cors = require("cors");
app.use(cors());
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "public");
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

var upload = multer({ storage: storage }).array("file");

app.get("/", function (req, res) {
  return res.send("Hello Server");
});
app.post("/upload", function (req, res) {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      return res.status(500).json(err);
    } else if (err) {
      return res.status(500).json(err);
    }
    return res.status(200).send(req.file);
  });
});

app.listen(8000, function () {
  console.log("App running on port 8000");
});

Upload.jsx code:

const [selectedImage, setSelectedImage] = useState(null);
  const [avatar, setAvatar] = useState(null);
  const onClickHandler = () => {
    const data = new FormData();
    data.append("file", selectedImage);

    axios
      .post("http://localhost:8000/upload", data, {})
      .then((res) => {
        console.log("upload succes");
      })
      .catch((err) => {
        console.log("upload fail");
      });
  };
  return (
    <div>
        <input
          type='file'
          onChange={(event) => setSelectedImage(event.target.files[0])}
        />
        <button onClick={onClickHandler}> go</button>
    </div>
  );
};

Please help, I can't figure out what the problem is.

Answer 1

No access to file.