Get Multer FileName and/or Path

Question

I hope that everyone is doing well. I am trying to get the file path or name after it has been uploaded to the folder but I am having trouble. When I console log req.files.path or req.files.filenames, it returns undefined. Can anyone provide some advice? Any help is appreciated.

React JS file:

import React, { useEffect, useState } from 'react';
import './Properties_Upload.css';
import Navbar from '../../../Components/Navbar/Navbar';
import Footer from '../../../Components/Footer/Footer';
import Axios from 'axios';
import { useNavigate } from 'react-router-dom';

export default function Properties_Upload() {
    const [addressLine, setAddressLine] = useState('');
    const [addressLine2, setAddressLine2] = useState('');
    const [addressCity, setAddressCity] = useState('');
    const [addressState, setAddressState] = useState('');
    const [addressZipCode, setAddressZipCode] = useState('');
    const [mlsID, setMLSID] = useState('');
    const [selectedFile, setSelectedFile] = useState('');
    const [errorMessage, setErrorMessage] = useState('');
    const navigate = useNavigate();
    
    const propertyInfoHandler = () => {
        const url = 'http://localhost:3001/property/properties_upload';
        const data = new FormData() 

        for (var x = 0; x < selectedFile.length; x++) {
            data.append('files', selectedFile[x]);
        }

        Axios.post(url, data, {
            addressLine: addressLine,
            addressLine2: addressLine2,
            addressCity: addressCity,
            addressState: addressState,
            addressZipCode: addressZipCode,
            mlsID: mlsID
        })
        .then((response) => {
            navigate('/properties');
            if (response.data.errorMessage){
                setErrorMessage(response.data.message);
            }
        });
    };

    return (
        <>
            <Navbar />
            <div className='propertiesUploadBody'>
                <h1>Properties Upload</h1>
                <div className='propertyInfoFormBody'>
                    <h1>Property Information</h1>
                    <p className='addressLine'> *Property address: <input name='addressLine' placeholder='Address' required autoComplete="off" onChange={(e) => setAddressLine(e.target.value)} /> </p>
                    <p className='addressLine2'> Apartment/Suite/Unit: <input name='addressLine2' placeholder='Apartment/Suite/Unit' autoComplete="off" onChange={(e) => setAddressLine2(e.target.value)} /> </p>
                    <p className='addressCity'> *Property city: <input name='addressCity' placeholder='City' required autoComplete="off" onChange={(e) => setAddressCity(e.target.value)} /> </p>
                    <p className='addressState'> *Property state: <input name='addressState' placeholder='State' maxLength={2} required autoComplete="off" onChange={(e) => setAddressState(e.target.value)} /> </p>
                    <p className='addressZipCode'> *Property zip code: <input type='number' name='addressZipCode' placeholder='Zip Code' required autoComplete="off" onChange={(e) => setAddressZipCode(e.target.value)} /> </p>
                    <p className='propertyMLSID'> MLS ID: <input type='number' name='propertyMLSID' placeholder='MLS ID' required autoComplete="off" onChange={(e) => setMLSID(e.target.value)} /></p>
                </div>
                <div className='propertyFileFormBody'>
                    <h1>Property Image Upload</h1>
                    <p> Upload Images of the property.</p>
                    <input className='uploadFiles' type='file' name='file' multiple required onChange={(e) => setSelectedFile(e.target.files)} />
                </div>
                <h2>{errorMessage}</h2>
                <button className='uploadButton' onClick={propertyInfoHandler}>Upload Property</button>
            </div>
            <Footer />
        </>
    )
}

Node JS file:

const express = require('express');
const router = express.Router();
const db = require('../config/db');
const bcrypt = require('bcrypt');
const saltRounds = 10;
const session = require('express-session');
const bodyParser = require('body-parser');
const app = express();
const SqlDbStore = require('express-mysql-session')(session);
const passport = require('passport');
const cookieParser = require('cookie-parser');
const multer = require('multer');
//----------------------------------------- BEGINNING OF PASSPORT MIDDLEWARE AND SETUP ---------------------------------------------------
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(passport.session());
app.use(session({
    key: 'session_cookie_name',
    secret: 'session_cookie_secret',
    store: new SqlDbStore({
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: '**************',
    database: '**************',
    }),
    resave: false,
    saveUninitialized: false,
    cookie:{
        maxAge:1000*60*60*24,
        secure: false
    }
}));
const multerDestination = './routes/Images/';
const storage = multer.diskStorage({
  destination: function (req, files, cb) {
    cb(null, multerDestination);
  },
  filename: function (req, files, cb) {
    cb(null, Date.now() + '-' + files.originalname );
  }
});
const upload = multer({ storage: storage }).array('files');
//----------------------------------------- END OF PASSPORT MIDDLEWARE AND SETUP ---------------------------------------------------
router.post('/properties_upload', (req, res) => {
  const address = req.body.addressLine;
  const address2 = req.body.addressLine2;
  const city = req.body.city;
  const state = req.body.state;
  const addressZipCode = req.body.addressZipCode;
  const mlsID = req.body.mlsID;
  const rentalID = Math.floor(Math.random()*90000) + 10000;

  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)
    }
    console.log("fileInfo: " + req.files);
    return res.status(200).send(req.files)
  });
});

module.exports = router;

Answer 1

Within the for loop that NeNad mentioned, I had to change some of the code to the listed preview below. I was able to console log the directory that the files are saving. However, the only issue is, that it will loop the number of files that are being imported. So if there are 5 files, it would locate the parent folder 5 times.

 for (const file of req.files) {
      const directory = path.dirname(file.path)
      console.log('File path: ', directory);
 }

The whole code for future help.

const express = require('express');
const router = express.Router();
const db = require('../config/db');
const bcrypt = require('bcrypt');
const saltRounds = 10;
const session = require('express-session');
const bodyParser = require('body-parser');
const app = express();
const SqlDbStore = require('express-mysql-session')(session);
const passport = require('passport');
const cookieParser = require('cookie-parser');
const multer = require('multer');
//----------------------------------------- BEGINNING OF PASSPORT MIDDLEWARE AND SETUP ---------------------------------------------------
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(passport.session());
app.use(session({
    key: 'session_cookie_name',
    secret: 'session_cookie_secret',
    store: new SqlDbStore({
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: '**************',
    database: '**************',
    }),
    resave: false,
    saveUninitialized: false,
    cookie:{
        maxAge:1000*60*60*24,
        secure: false
    }
}));
const multerDestination = './routes/Images/';
const storage = multer.diskStorage({
  destination: function (req, files, cb) {
    cb(null, multerDestination);
  },
  filename: function (req, files, cb) {
    cb(null, Date.now() + '-' + files.originalname );
  }
});
const upload = multer({ storage: storage }).array('files');
//----------------------------------------- END OF PASSPORT MIDDLEWARE AND SETUP ---------------------------------------------------
router.post('/properties_upload', (req, res) => {
  const address = req.body.addressLine;
  const address2 = req.body.addressLine2;
  const city = req.body.city;
  const state = req.body.state;
  const addressZipCode = req.body.addressZipCode;
  const mlsID = req.body.mlsID;
  const rentalID = Math.floor(Math.random()*90000) + 10000;

  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)
    }
    for (const file of req.files) {
      const directory = path.dirname(file.path)
      console.log('File path: ', directory);
    }
    return res.status(200).send(req.files)
  });
});

module.exports = router;

Answer 2

The req.files is an array, NOT object. So, each of his items will have path and name.

for (const file of req.files) {
  console.log('File path: ', file.path);
  console.log('File name: ', file.originalname);
}

Answer 3

I think my github repo will help you. I have used multer to upload files in nodejs.

github repo