How can I access the text input fields when using express-fileupload from react

Front end

File input:

<div className="form-group row">   <label htmlFor="directorioSSH" className="col-sm-3 col-form-label">Directorio: </label>    <div className="col-sm-7">    <input type="file" className="file" name="directorioSSH" disabled={!antiDefaced} onChange={presetDatos} onInput={guardaSSH} />   </div>  </div>  

Saving file to state:

const guardaSFTP = async evento => {    setArchivoSFTP(evento.target.files[0]);  }  const formSFTP = new FormData();  formSFTP.append('directorioFTP', archivoSFTP)  

Sending axios post:

const response = await axios.post('http://localhost:4000/api/monitor', formSFTP, {monitor, contactos, exepciones })  

Where formSFTP is the file input, monitor are all the other form fields, contactos is an array of objects, and excepciones is also an array of objects

Back end

Index.js:

const fileUpload = require('express-fileupload');  server.use(cors());  server.use(morgan('dev'));  server.use(express.json());  server.use(express.urlencoded({ extended: true }));  server.use(fileUpload({      createParentPath: true  }));  server.use(express.static("./public"));      server.use('/api/monitor', require('./routes/monitorRouter'));  

monitorRouter.js:

const { Router } = require('express');  const router = Router();  const { obtenerTodos, obtenerUno, crear, modificar, eliminar, modificarEstadoMonitor, subirArchivo} = require('../controllers/monitorController')    router.get('/', obtenerTodos);  router.get('/:id', obtenerUno);  router.post('/', crear);  router.post('/subir', subirArchivo);  router.put('/', modificar);  router.delete('/:id', eliminar);  router.patch('/:id',modificarEstadoMonitor);    module.exports = router;  

monitorController.js:
controladorMonitor.crear, where I want my files and other form fields:

controladorMonitor.crear = async (req, res) => {      console.log(req.files);      console.log(req.body);      const crearMonitor = new Monitor({          generales: {              urlSitio:                   req.body.monitor.urlSitio,              userAgent:                  req.body.monitor.userAgent,              cookieName:                 req.body.monitor.cookieName,              validaURL:                  req.body.monitor.validaURL,              monitoreaCada:              req.body.monitor.monitoreaCada,              generarMinitatura:          req.body.monitor.generarMinitatura          },            maximoAlertas:                  req.body.monitor.maximoAlertas,          contactos:                      req.body.contactos,            exepcionesTexto:                req.body.exepciones,          habilitarExepcionesTexto:       req.body.monitor.habilitarExepcionesTexto,            antiDefaced:                    req.body.monitor.antiDefaced,          integridadImagen:               req.body.monitor.integridadImagen,          porcentajeIgualdad:             req.body.monitor.porcentajeIgualdad,          porcentajeIgual:                req.body.monitor.porcentajeIgual,          fuzzyHashing:                   req.body.monitor.fuzzyHashing,          fuzzyHash:                      req.body.monitor.fuzzyHash,          igualdad:                       req.body.monitor.igualdad,          ftp:                            req.body.monitor.ipFTP,          usuarioFTP:                     req.body.monitor.usuarioFTP,          contraseniaFTP:                 req.body.monitor.contraseniaFTP,          directorioFTP:                  req.body.monitor.directorioFTP,          puertoFTP:                      req.body.monitor.puertoFTP,          ipSSH:                          req.body.monitor.ipSSH,          usuarioSSH:                     req.body.monitor.usuarioSSH,          contraseniaSSH:                 req.body.monitor.contraseniaSSH,          directorioSSH:                  req.body.monitor.directorioSSH,          puertoSSH:                      req.body.monitor.puertoSSH      })        try {          await crearMonitor.save();          if (!fse.existsSync(crearMonitor._id)) {              fse.mkdirSync('archivos/'+crearMonitor._id)          }          res.status(201).json('Monitor creado exitosamente');      } catch (err) {          generateLog('db_error', err);          res.status(400).json('Error en la petición')      }  };  

If I send the axios like this:

const response = await axios.post('http://localhost:4000/api/monitor', {monitor, contactos, exepciones })  

I can send the request succesfully and get the other fields (undefined is obtained from console.log(req.files))

undefined  {    monitor: {      urlSitio: 'https://www.amazon.com.mx/',      userAgent: '',      cookieName: '',      validaURL: false,      monitoreaCada: 1,      generarMinitatura: false,      maximoAlertas: 0,      nombreContacto: '',      correoContacto: '',      adjuntarCambioAlerta: false,      habilitarExepcionesTexto: false,      exepcionesTexto: '',      antiDefaced: true,      integridadImagen: false,      porcentajeIgualdad: 0,      porcentajeIgual: false,      fuzzyHashing: 0,      fuzzyHash: false,      igualdad: false,      ipFTP: '',      usuarioFTP: '',      contraseniaFTP: '',      puertoFTP: 0,      ipSSH: '',      usuarioSSH: '',      contraseniaSSH: '',      puertoSSH: 0    },    contactos: [],    exepciones: []  }  POST /api/monitor 201 27.813 ms - 29  

But if I try to send it as I put before (with formSFTP file):

POST /api/monitor - - ms - -  {    directorioFTP: {      name: 'test.html',      data: <Buffer 3c 21 44 4f 43 54 59 50 45 20 68 74 6d 6c 3e 0d 0a 3c 68 74 6d 6c 3e 0d 0a 3c 68 65 61 64 3e 0d 0a 09 3c 74 69 74 6c 65 3e 54 65 73 74 20 64 65 20 73 ... 82 more bytes>,      size: 132,      encoding: '7bit',      tempFilePath: '',      truncated: false,      mimetype: 'text/html',      md5: '5f4261557e0c7da967573df932f4d593',      mv: [Function: mv]    }  }  {}  (node:21820) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'urlSitio' of undefined      at controladorMonitor.crear (C:\Users\Samuel\Desktop\somnus-monitor\back\controllers\monitorController.js:41:58)      at Layer.handle [as handle_request] (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\layer.js:95:5)      at next (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\route.js:137:13)      at Route.dispatch (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\route.js:112:3)      at Layer.handle [as handle_request] (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\layer.js:95:5)      at C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:281:22      at Function.process_params (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:335:12)      at next (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:275:10)      at Function.handle (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:174:3)      at router (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:47:12)      at Layer.handle [as handle_request] (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\layer.js:95:5)      at trim_prefix (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:317:13)      at C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:284:7      at Function.process_params (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:335:12)      at next (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\express\lib\router\index.js:275:10)      at serveStatic (C:\Users\Samuel\Desktop\somnus-monitor\back\node_modules\serve-static\index.js:75:16)  (node:21820) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)  

I do get the file but not the other form fields and I get the error above. I've tried putting formSFTP inside the the brackect but I just obtain an empty object

Any help will be appreciated, thanks in advance.

https://stackoverflow.com/questions/66558244/how-can-i-access-the-text-input-fields-when-using-express-fileupload-from-react March 10, 2021 at 12:09PM