Recientemente completé un curso de node js y quería trabajar en proyectos para mejorar mis habilidades. Comencé un desafío dev.io, un cargador de imágenes usando reaccionar y expresar y estoy tratando de implementar arrastrar y soltar, pero aparece el error POST http://localhost:3000/upload 404 (Not Found) cuando intento cargar el archivo a la carpeta public/uploads. Aquí está mi código.

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;

servidor.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...'));