I have recently completed a node js course and wanted to work on projects to improve my skills. I started a dev.io challenge, an image uploader using react and express and I am trying to implement drag and drop but I get the error POST http://localhost:3000/upload 404 (Not Found) when trying to upload the file to the public/uploads folder. Here is my code.

Dropzone.js

import image from './images/image.svg';
import React, { useState } from 'react';
import axios from 'axios';
const Dropzone = () => {
  const [file, setFile] = useState('');
  const [uploadedFile, setUploadedFile] = useState({});

  const dropHandler = async (ev) => {
    // Prevent default behavior (Prevent file from being opened)
    ev.preventDefault();

    if (ev.dataTransfer.items) {
      // Use DataTransferItemList interface to access the file(s)
      for (let i = 0; i < ev.dataTransfer.items.length; i++) {
        // If dropped items aren't files, reject them
        if (ev.dataTransfer.items[i].kind === 'file') {
          let fileSync = ev.dataTransfer.items[i].getAsFile();
          setFile(ev.dataTransfer.files[i]);
        }
      }
    }

    const formData = new FormData();
    formData.append('file', file);

    try {
      const res = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      const { fileName, filePath } = res.data;

      setUploadedFile({ fileName, filePath });
    } catch (err) {
      if (err.response.status === 500) {
        console.log('There was a problem with the server');
      } else {
        console.log(err.response.data.msg);
      }
    }
  };

  const dragOverHandler = (e) => {
    // Prevent default behavior (Prevent file from being opened)
    e.preventDefault();
  };
  return (
    // Drag and drop zone
    <div
      className="image-upload-area"
      onDrop={dropHandler}
      onDragOver={dragOverHandler}
    >
      <img className="upload-icon" src={image} />
      <p className="upload-info">Drag & Drop your image here</p>
    </div>
  );
};

export default Dropzone;

server.js

const express = require('express');
const fileUpload = require('express-fileupload');

const app = express();

app.use(fileUpload());

// Upload Endpoint
app.post('/upload', (req, res) => {
  if (req.files === null) {
    return res.status(400).json({ msg: 'No file uploaded' });
  }

  const file = req.files.file;

  file.mv(`${__dirname}/client/public/uploads/${file.name}`, (err) => {
    if (err) {
      console.error(err);
      return res.status(500).send(err);
    }

    res.json({ fileName: file.name, filePath: `/uploads/${file.name}` });
  });
});

app.listen(5000, () => console.log('Server Started...'));