Access file upload formData in Express

Question

How can I access the files in the API?

I read the other solutions and all of them require npm packages to solve this. I want to understand why I can't do it vanilla. Also, the answers are old and recommend using body-parser, which now comes bundled with Express.

I would like the solution to be vanilla JS in order to understand the process better.

client

async function uploadFile(file) {
    let formData = new FormData();
    formData.append("file", file);

    let res = await fetchPostFile("/api/files", formData);
}

fetch

export async function fetchPostFile(url, formData) {
    try {
        let result = await (
            await fetch(url, {
                method: "POST",
                withCredentials: true,
                credentials: "include",
                headers: {
                    Authorization: localStorage.getItem("token"),
                    Accept: "application/json",
                    "Content-type": "multipart/form-data",
                },
                body: formData,
            })
        ).json();

        return result;
    } catch (err) {
        return err;
    }
}

api

router.post("/api/files", async function (req, res, next) {
    try {
        console.log(req.file);          // undefined
        console.log(req.files);         // undefined
        console.log(req.body);          // {}

    } catch (err) {
        next(err);
    } finally {
        req.connection.release();
    }
});

Why is the req.body empty? Please help me understand what I'm doing wrong.

Answer 1

First you need to use multer package to handle multipart/form-data in express. You must use it as a middleware to set the field name for the file. The name passed as an argument to the single() function must match to the appended name on client side.

const multer = require('multer')

router.post("/api/files", multer().single('file'), async function (req, res, next) {
  try {
      console.log(req.file)
  } catch (err) {
      next(err)
  } finally {
      req.connection.release()
  }
});

Answer 2

Here's the whole file management API.

I am using busboy which is what multer uses under the hood. I found it easier to use.

const express = require("express");
const router = express.Router();

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

const busboy = require("busboy");
const fs = require("fs");

const SHA256 = require("crypto-js/sha256");

let filesFolderPath = config.paths.files;

router.get("/api/records/:recordUid/files/:fieldUid", async (req, res, next) => {
    try {
        let { recordUid, fieldUid } = req.params;

        let query = `
            select 
                rdf.*,
                r.uid recordUid,
                round(sizeBytes / 1024, 0) sizeKb,
                round(sizeBytes / 1024 / 1024, 0) sizeMb
            from recordDataFile rdf
                left join record r on r.id = rdf.recordId
                left join field f on f.id = rdf.fieldId
            where 
                r.uid = ?
                and f.uid = ?;
        `;

        let rows = await req.pool.query(query, [recordUid, fieldUid]);

        res.status(200).send(rows);
    } catch (err) {
        next(err);
    }
});

router.get("/api/files/:hash", async (req, res, next) => {
    try {
        let { hash } = req.params;

        let query = `
            select *
            from recordDataFile
            where hash = ?
        `;

        let rows = await req.pool.query(query, [hash]);
        let fileData = rows[0];

        res.download(fileData.path);
    } catch (err) {
        next(err);
    }
});

router.post("/api/files", async (req, res, next) => {
    try {
        let bb = busboy({
            headers: req.headers,
            defCharset: "utf8",
            limits: {
                fileSize: 20 * 1024 * 1024, // 20 mb
                files: 5,
            },
        });

        let fields = {};

        // Get any text values
        bb.on("field", (fieldname, val, fieldnameTruncated, valTruncated) => {
            console.log(fieldname, val);
            fields[fieldname] = val;
        });

        // Read file stream
        bb.on("file", (fieldname, fileStream, filename, encoding, mimetype) => {
            // Prevents hieroglyphs from cyrillic
            let originalName = Buffer.from(filename.filename, "latin1").toString("utf8");

            let nameParts = originalName.split(".");
            let extension = nameParts[nameParts.length - 1]; // without the . from .jpeg

            // IMPORTANT!!! FILE NAME CAN'T HAVE SPACES, it won't save properly!!!
            let hash = SHA256(`${+new Date()}${originalName}`).toString();

            // Absolute path to file
            let filePath = `${filesFolderPath}${hash}`;

            // Open writeable stream to path
            let writeStream = fs.createWriteStream(filePath);

            // Pipe the file to the opened stream
            fileStream.pipe(writeStream);

            // Check for errors
            writeStream.on("error", (err) => {
                console.log("writeStream", err);
            });

            // Writing done, stream closed
            writeStream.on("close", async (err) => {
                // console.log("closing + SQL");

                if (err) {
                    console.log("closing error");
                    return;
                }

                let query = `
                    insert into recordDataFile
                        (
                            recordId,
                            fieldId,
                            name,
                            extension,
                            hash,
                            path,
                            sizeBytes,
                            userId,
                            created
                        )
                    values
                        (
                            (select id from record where uid = ?),
                            (select id from field where uid = ?),
                            ?,
                            ?,
                            ?,
                            ?,
                            ?,
                            ?,
                            now()
                        );
                `;

                let sizeBytes = fs.statSync(filePath).size;

                await req.pool.query(query, [fields.recordUid, fields.fieldUid, originalName, extension, hash, filePath, sizeBytes, req.userId]);

                // record updated. send notification?
                await req.pool.query(`update record set updated = now(), updatedByUserId = ? where uid = ?`, [req.userId, fields.recordUid]);
            });
        });

        bb.on("finish", () => {
            res.status(200).send({ success: true });
        });

        req.pipe(bb); // Hooks the streams together. Without it, you're not feeding busboy any data to parse.
    } catch (err) {
        console.log("file upload catch", err);
        next(err);
    }
});

router.delete("/api/files/:hash", async (req, res, next) => {
    try {
        let { hash } = req.params;

        // get the file
        let query = `
            select * from recordDataFile where hash = ?
        `;

        let rows = await req.pool.query(query, [hash]);

        let file = rows[0];
        let filePath = file.path;

        // remove file
        fs.unlinkSync(filePath);

        // delete the file metadata
        await req.pool.query(` delete from recordDataFile where hash = ?`, [hash]);

        res.status(200).send(rows);
    } catch (err) {
        next(err);
    }
});

module.exports = router;