req.file returning Undefined on frontend, but with Insomnia returns correctly

[GrazielaSousa]

Hello, I’m having trouble getting a client-side post to work, it turns out that with Insomnia, the file correctly goes up to the directory and returns all the file information. The code is currently like this

const express = require('express');

const app = express();

require('dotenv').config();

app.use('/uploads', express.static('uploads'));

app.use(express.urlencoded({ extended: true }));

const routes = require('./routes');

const cors = require('cors');

require('./config/mongoConfig');

app.use(cors());

app.use(express.json());

app.use(routes);

app.listen(3333);

upload.js

const multer = require('multer');

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

const upload = multer({ storage });

module.exports = upload;

routes

const express = require('express');
const routes = express.Router();
const upload = require('./upload');
const Document = require('./models/documentsData');
const documentsController = require('./controllers/uploadController');

// PDF
routes.post('/upload', upload.single('file'), async (req, res) => {
  if (req.file) {
    const file = req.file.filename;
    await Document.create({
      // title: title,
      // degree : degree,
      // subject : subject,
      file: file,
    });
    res.send('Arquivo enviado com sucesso!');
    console.log('arquivo passado: ' + req.file.filename);
  } else {
    console.log('arquivo passado: ' + req.file);
  }
  // const title = req.body.title;
  // const degree = req.body.degree;
  // const subject = req.body.subject;
});

routes.get('/files', documentsController.getFile);
routes.delete('/deleteFiles', documentsController.deleteFile);

module.exports = routes;

Insomnia

When sending the file from the front:

Frontend

const handleSubmitFile = async (e) => {
    e.preventDefault();
    const formData = new FormData();

    formData.append('file', file);
    // data.append('title', formData.title);
    // data.append('degree', formData.degree);
    // data.append('subject', formData.subject);
    console.log(formData.get('file'));

    const result = await apiDocument.post('/upload', formData, {
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log(result);
  };

[matheusblm]

try to send without the data field:

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

and verify if the api was called

[Chay009]

@GrazielaSousa Have you found the fix,i am me facing the same issue

[GrazielaSousa]

Hello, the file upload.js I put together the code routes, and worked, for some reason the code being separate it did not work properly

[joeyguerra]

do the <input /> fields all have the same id and name? if so, try just having 1 <input /> field and see if that fixes it.