⚙️ @szymmis/multipart
multipart/form-data parsing middleware for @expressjs
✨ Key features
- Written in TypeScript
- Works with CommonJS and ESModules import syntax
- Tests written for all use cases
express
is the only runtime dependencies- Only ~1kB in size when minified
💬 Introduction
Using express
middleware for transforming json or parsing cookies is super easy and requires minimal configuration, so why parsing multipart/form-data
should be different? Plug in the middleware and let it handle the request, while all you have to do is to utilize Request
param populated with fields
and files
from the request.
const express = require("express");
const multipart = require("@szymmis/multipart");
const app = express();
app.use(multipart());
app.post("/upload", (req, res) => {
console.log(req.fields);
console.log(req.files);
});
Perfect, when all you want is to have form data parsed in a convenient form, without unnecessary disk saves, e.g. parsing CSV sent over the network and sending JSON back. No redundant calls as the parser runs only when the Content-Type
header's value is set to multipart/form-data
.
📦 Installation and usage
- Install the package with your favorite package manager
$ yarn add @szymmis/multipart
- Import and register as a middleware
import express from "express";
import multipart from "@szymmis/multipart";
const app = express();
app.use(multipart());
- Utilize request object populated with fields and files
import express from "express";
import multipart from "@szymmis/multipart"
const app = express();
app.use(multipart());
app.post("/upload", (req, res) => {
console.log(req.fields);
{
name: "John",
surname: "Doe",
age: "32"
}
console.log(req.files);
{
file: {
filename: "file.txt",
extension: "txt",
type: "text/plain"
data: <Buffer ...>
}
}
})
⚠️ Note ⚠️
The Content-Type
header of the request must be in form of
Content-Type: multipart/form-data; boundary=...
for this middleware to work.
Such Content-Type
is set automatically when
you submit your form on the front-end or when you set the body
of your request as a FormData
Example of front-end code for sending FormData
over the fetch request
const form = document.querySelector("#form-id");
form.onsubmit = (e) => {
e.preventDefault();
const fd = new FormData(form);
fetch("http://localhost:3000/upload", { method: "POST", body: fd });
};
🔧 Options
name | description | default | valid values | example value |
---|
limit | Maximum payload size | 10mb | {number}kb/mb | 50mb |
You can specify options object when registering the middleware
app.use(
multipart({
})
);
For example:
app.use(multipart({ limit: "50mb" }));
📝 Documentation
req.fields: Record<string, string>
An object containing all non-file form fields values from inputs of type text, number, etc.
console.log(req.fields)
{
name: "John",
surname: "Doe",
age: "32"
}
req.files: Record<string, FormDataFile>
A dictionary of all the type="file"
fields in form
console.log(req.files)
{
invoice: {
filename: "my_invoice.pdf",
extension: "pdf",
type: "application/pdf",
data: <Buffer ...>
}
}
Where each file is an object of type FormDataFile
interface FormDataFile {
filename: string;
extension: string;
type: string;
data: <Buffer ...>;
}
field | description | example |
---|
filename | Uploaded file's name | data.txt |
extension | Uploaded file's extension | txt |
type | MIME type | text/plain |
data | Node.js Buffer containing raw data as bytes | <Buffer ...> |
🤔 Buffer containing what?
You can easily transform Buffer into string using its toString()
method
const { file } = req.files;
console.log(file?.data.toString());
Or save the file onto the disk using node fs
module
const fs = require("fs");
app.post("/", (req, res) => {
const { logs } = req.files;
fs.writeFileSync("output.txt", logs?.data);
});
🏦 License
MIT
🖥️ Credits
@szymmis