expressjs · davidmashe · Aug 29, 2026 · Aug 29, 2026
diff --git a/README.md b/README.md
@@ -93,6 +93,9 @@ app.post('/stats', upload.single('uploaded_file'), function (req, res) {
 
 
 
+Complete client-side and server-side examples (browser `FormData` uploads of a
+blob and of an image) are in the [`examples/`](examples/) folder.
+
 ## API
 
 ### File information

diff --git a/examples/FormDataBlob/.gitignore b/examples/FormDataBlob/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+public/data/uploads/
diff --git a/examples/FormDataBlob/README.md b/examples/FormDataBlob/README.md
@@ -0,0 +1,3 @@
+## FormDataBlob
+
+uses the `Blob` constructor to demonstrate sending a blob to the multer middleware on the server.
diff --git a/examples/FormDataBlob/index.js b/examples/FormDataBlob/index.js
@@ -0,0 +1,15 @@
+const express = require('express')
+const app = express()
+const multer = require('multer')
+
+const PORT = 3000
+
+const upload = multer({ dest: './public/data/uploads/' })
+
+app.use('/', express.static('public'))
+
+app.post('/upload', upload.single('uploaded_file'), (req, res) => {
+  res.sendStatus(200)
+})
+
+app.listen(PORT, () => console.log(`multer example listening on ${PORT}!`))
diff --git a/examples/FormDataBlob/package.json b/examples/FormDataBlob/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "FormData",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^5.1.0",
+    "multer": "^2.3.0"
+  }
+}
diff --git a/examples/FormDataBlob/public/index.html b/examples/FormDataBlob/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Multer Example</title>
+</head>
+<body>
+
+	<label>Enter text to upload:</label>
+	<input type="text" id="the-text" />
+	<button id="multer-test">send data with FormData</button>
+
+	<script type="text/javascript">
+		const postData = () => {
+
+			const theText = document.getElementById('the-text').value;
+			const formData = new FormData();
+			const blob = new Blob([theText], { type: 'text/plain' });
+			formData.append('uploaded_file', blob);
+
+			const options = {
+				method: 'POST',
+				body: formData
+			};
+
+			fetch('http://localhost:3000/upload', options)
+				.then(res => {
+					if (res.ok) {
+						return res.text()
+					}
+					return Promise.reject(res.statusText);
+				})
+				.then(() => alert('upload successful!'))
+				.catch(err => {
+					const errorText = 'error uploading';
+					console.error(`${errorText}: ${err}`);
+					alert(errorText);
+				});
+		};
+
+		document.getElementById('multer-test').addEventListener('click', postData);
+	</script>
+</body>
+</html>
diff --git a/examples/FormDataImage/.gitignore b/examples/FormDataImage/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+public/data/uploads/
diff --git a/examples/FormDataImage/README.md b/examples/FormDataImage/README.md
@@ -0,0 +1,3 @@
+## FormDataImage
+
+uses an `<image type="file" />` tag with the `Image` constructor to demonstrate sending an image to the multer middleware on the server.
diff --git a/examples/FormDataImage/index.js b/examples/FormDataImage/index.js
@@ -0,0 +1,15 @@
+const express = require('express')
+const app = express()
+const multer = require('multer')
+
+const PORT = 3000
+
+const upload = multer({ dest: './public/data/uploads/' })
+
+app.use('/', express.static('public'))
+
+app.post('/upload', upload.single('uploaded_file'), (req, res) => {
+  res.sendStatus(200)
+})
+
+app.listen(PORT, () => console.log(`multer example listening on ${PORT}!`))
diff --git a/examples/FormDataImage/package.json b/examples/FormDataImage/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "FormData",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^5.1.0",
+    "multer": "^2.3.0"
+  }
+}
diff --git a/examples/FormDataImage/public/index.html b/examples/FormDataImage/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Multer Example</title>
+</head>
+<body>
+
+	<label>Choose a file to upload:</label>
+	<input type="file" id="the-file" />
+	<button id="multer-test">send image with FormData</button>
+
+	<script type="text/javascript">
+		const postData = () => {
+
+			const fileInputNode = document.getElementById('the-file');
+
+			const formData = new FormData();
+
+			formData.append('uploaded_file', fileInputNode.files[0]);
+
+			const options = {
+				method: 'POST',
+				body: formData
+			};
+
+			fetch('http://localhost:3000/upload', options)
+				.then(res => {
+					if (res.ok) {
+						return res.text()
+					}
+					return Promise.reject(res.statusText);
+				})
+				.then(() => alert('upload successful!'))
+				.catch(err => {
+					const errorText = 'error uploading';
+					console.error(`${errorText}: ${err}`);
+					alert(errorText);
+				});
+		};
+
+		document.getElementById('multer-test').addEventListener('click', postData);
+	</script>
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up @@
+    Complete client-side and server-side examples (browser `FormData` uploads of a
+    blob and of an image) are in the [`examples/`](examples/) folder.
     ## API
     ### File information
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## FormDataBlob

		uses the `Blob` constructor to demonstrate sending a blob to the multer middleware on the server.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## FormDataImage

		uses an `<image type="file" />` tag with the `Image` constructor to demonstrate sending an image to the multer middleware on the server.