A super simple Multer question, nested file uploading

[Mertakus]

I'm trying to do an image upload with Multer and Express. Doing just an image upload is going fine and everything works, the problem is, I want to send more than just one photo. Let me explain. I got the most basic form ever, not worth sharing. Then when submitting the form with JUST an image, the axios request looks like this:

`async onSubmit() {
const formData = new FormData();
formData.append('file', this.person.personData.file)
this.obj.file = formData

try {
    await axios.post('/projects/new', this.obj.file);
    this.message = 'Uploaded';
} catch (err) {
    console.log(err);
    this.message = 'Something went wrong'
}

},`

The post route in Express to receive the image looks like this:

`personRoutes.post('/new', upload.single('file'), (req, res) => {
console.log('BODY: ', req.body)
console.log('REQ.FILE: ', req.file)

const person = new Person({
    personData: {
        file: req.file.path
    }
});
person.save()
    .then(result => {
        console.log('YES', result)
        res.redirect('/projects')
    })
    .catch(err => {
        console.log('KUT', err)
    })

});`

Req.file is the upload.single('file') file. Req.body will hold the text fields, if there were any. Ez Pz, so far so good. Now, where things get a bit sketchy is, what if I wanted to upload more than just one photo? So my obj object would not only hold a file property but a few others aswell. Currently I am directly sending the formData file with:

await axios.post('/projects/new', this.obj.file);

But if my obj contained more than just a file, I would have to to this:

await axios.post('/projects/new', this.obj);

But what in the world should my Express post route look like? Because req.file will now (as far as I know) forever be undefined because file is not defined inside req object. It is defined in req.body object. Accessing the file as req.obj.file won't do anything. Any help would be very much appreciated. I don't even know if it is possible. And if not, what other options do I have?

Thanks in advance!

[sampathBlam]

@Mertakus : You have two options.

1. Going with upload.array
If your intention is to upload multiple files using the same form element,

Your axios code in the front-end would look like,

async function onSubmit() {
  const formData = new FormData();
  formData.append('files', this.person.personData.files) 
  //  this.person.personData.files would be an array containing File objects.
  try {
    await axios.post('/projects/new', formData);
    this.message = 'Uploaded';
  } catch (err) {
      console.log(err);
      this.message = 'Something went wrong'
  }
},

And you express route would look like,

app.post('/projects/new', upload.array('files', 10), function (req, res, next) {
  // req.files is array of files
  // req.body will contain the text fields, if there were any
  // max number of files is set as 10 here.
})

2. Going with upload.fields
Instead of sending all files under the name of files, if you wish to send each file with a different form element name, you need to go for upload.fields
In this case, your axios code would look like,

async function onSubmit() {
  const formData = new FormData();
  formData.append('name', this.person.personData.name); // name would be a string
  formData.append('photo', this.person.personData.photoFile);
  formData.append('resume', this.person.personData.resumeFile);  // photoFile and resumeFile are File objects.
  //  this.person.personData.files would be an array containing File objects.
  try {
    await axios.post('/projects/new', formData);
    this.message = 'Uploaded';
  } catch (err) {
      console.log(err);
      this.message = 'Something went wrong'
  }
},

And your express route would be,

var cpUpload = upload.fields([{ name: 'photo', maxCount: 1 }, { name: 'resume', maxCount: 1 }])
app.post('/projects/new', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['photo'][0] -> photo File
  //  req.files['resume'][0] -> resume File
  //
  // req.body will contain the text field - name
})

[mohib231]

var cpUpload = upload.fields([{ name: 'photo', maxCount: 1 }, { name: 'resume', maxCount: 1 }])
app.post('/projects/new', cpUpload, function (req, res, next) {
// req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
//
// e.g.
// req.files['photo'][0] -> photo File
// req.files['resume'][0] -> resume File
//
// req.body will contain the text field - name
})
i am stuck in it only able to get req.files['photo'][0] not getting second object