req.files is undefined using express-fileupload with middleware also

Question

I used express-file upload for this purpose. Using nodejs send file to server from client. req.files is always undefined , can you one help me on this.

I have register express-fileupload middleware before refering req.files:

in Server.ts

import express, { Express, Request, Response } from 'express';
import fileUpload from 'express-fileupload';


const app: Express = express();
const port = process.env.PORT || 5000
app.use(fileUpload());
app.use(express.urlencoded({ extended: true }));
app.post("/upload", (req: Request, res: Response) => {
    console.log(req.files)
   
    console.log(req.body)
    const fileUpload = req.files.fileUpload as UploadedFile
});

in client.html

        <form onSubmit="return uploadFile()">
          <!-- HTML5 file upload selector-->

          <label for="formFile" class="form-label">Upload file</label>
          <input class="form-control" name="fileUpload" type="file" id="formFile"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
          <br />
          <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-3">Upload</button>
          </div>
        </form>

async function uploadFile() {

     
      const fileUpload = document.getElementById("formFile");
      const formData = new FormData();
      formData.append("files", fileUpload.files[0]);

      await fetch('/upload', {
        method: "POST",
        body: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then((res) => {console.log(res); 
        downloadedFileName = res.fileName})
        .catch((err) => 
        console.log(res)
        );
    }

Answer 1

You need to install @types/express-fileupload as a dev dependency.

npm i @types/express-fileupload
yarn add -D @types/express-fileupload

This types definition will augment express.Request with the 'files' property.