I'm trying to upload a file to the server using NodeJs and Multer. But I'm unsuccessful. When I post the file from my front end I get the conditional statement as follow:

You must select at least 1 file.

The console.log(req.files) as per script below returns back an empty array [].

Here below the userController.js

   

const mysql = require('mysql');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const { promisify } = require('util');
const upload = require("../middleware/upload");
    
    
exports.update = async (req, res) => {
    message = '';
    if (req.method == 'POST') {
        var post = req.body;
        var first_name = post.first_name;
        var last_name = post.last_name;


        if (req.files) {
            //    console.log(req.files)


            try {
                await upload(req, res);
                console.log(req.files);

                if (req.files.length <= 0) {
                    return res.send(`You must select at least 1 file.`);
                }

                return res.send(`Files has been uploaded.`);
            } catch (error) {
                console.log(error);

                if (error.code === "LIMIT_UNEXPECTED_FILE") {
                    return res.send("Too many files to upload.");
                }
                return res.send(`Error when trying upload many files: ${error}`);
            }

Here my middleware upload.js

 
const util = require("util");
const path = require("path");
const multer = require("multer");

var storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, path.join(`${__dirname}/../../upload`));
  },
  filename: (req, file, callback) => {
    const match = ["image/png", "image/jpeg", "application/pdf"];

    if (match.indexOf(file.mimetype) === -1) {
      var message = `<strong>${file.originalname}</strong> is invalid. Only accept png/jpeg/pdf.`;
      return callback(message, null);
    }

    var filename = `${Date.now()}-bezkoder-${file.originalname}`;
    callback(null, filename);
  }
});

var uploadFiles = multer({ storage: storage }).array("multi-files", 10);
var uploadFilesMiddleware = util.promisify(uploadFiles);
module.exports = uploadFilesMiddleware;

Here my user.js for the routing:

const express = require('express');
const router = express.Router();
const userController = require('../controllers/userController');

   router.post('/editcrew/:id',userController.update);

And my front end:

<form  method="POST" action="/editcrew/{{this.id}}" encType="multipart/form-data" novalidate>
</form>
<input type="file" name="covid_19D" id="file_box" />

<div >
  <button  type="submit">Submit</button>
</div>

Any advice, suggestion, and direction on the correct path is highly appreciated THANKS!!

CodePudding user response：

Your file input is outside of the form, so it's not part of what will be sent when the form is submitted.

Move it into the form instead:

<form  method="POST" action="/editcrew/{{this.id}}" encType="multipart/form-data" novalidate>
  <input type="file" name="covid_19D" id="file_box" />
</form>

I should mention that most likely the submit button should go into the form tag as well, but since you managed to submit the form nonetheless, I assume you already have some other code in place that handles submission of the form...

CodePudding user response：

change the HTML form (add the submit button and other fields inside the form as well):

<form  method="POST" action="/editcrew/{{this.id}}" encType="multipart/form-data" novalidate>
    <input type="file" name="covid_19D" id="file_box" />
    <div >
        <button  type="submit">Submit</button>
    </div>
</form>

add the correct file name in upload.js:

var uploadFiles = multer({ storage: storage }).array("covid_19D", 10);

in the userController.js, call the upload middleware first, and then check req.files, also, move req.body variables there as well:

const upload = require("./upload");


exports.update = async(req, res) => {

    if (req.method == 'POST') {

        try {

            await upload(req, res);

            var post = req.body;
            var first_name = post.first_name;
            var last_name = post.last_name;

            if (req.files.length <= 0) {
                return res.send(`You must select at least 1 file.`);
            }

            return res.send(`Files has been uploaded.`);

        } catch (error) {

            if (error.code === "LIMIT_UNEXPECTED_FILE") {
                return res.send("Too many files to upload.");
            }
            return res.send(`Error when trying upload many files: ${error}`);
        }
    }
}