This is a very simple basic refresher to uploading photos from a html
form to an express server and to save it into a folder.
Setup the server
We'll use express to run a simple server with an api route for uploading multiple images. Since the data will be coming over as a multi-part FormData
we'll use a middleware handler called multer
. multer
will take the FormData
and parse the content to store binary files while also being able to parse out other text fields.
npm i express multer
Create a new server file called server.js
and setup the basic foundations for an app with a POST
route called /upload
. We will also use express
to render static pages from a public
folder, where we will create a single page that has the upload form.
const express = require("express");
const app = express();
app.use(express.static(path.join(__dirname, "public")));
// Route
app.post("/upload", function (req, res, next) {
res.json({
success: true,
payload: []
});
});
app.listen(8080, () => console.log("Server started on 8080"));
Configure Multer
Next we'll configure the middleware multer
to handle the FormData
. Add the following to server.js
after const app = express()
.
const path = require("path");
const multer = require("multer");
const storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, "uploads");
},
filename: function (req, file, callback) {
callback(null, file.originalname);
},
});
const upload = multer({ storage: storage });
This will define the location where multer
will store the file and to also define the file name to be the same as the existing. Realistically you would want to rename the file to have some form of unique name in case a different image with the same name is uploaded, you would not want this to overwrite the original.
But I don't care here, this is just a basic example. Now lets incorporate upload
into the /upload
route. We use the .array()
method for multiple file uploads, and pass a String
as the first parameter that defines the field name that is being used in the FormData
to identify the files that are being uploaded. In this example we will use "images".
app.post("/upload", upload.array("images"), function (req, res, next) {
res.json({
success: true,
payload: req.files,
});
});
Prepare the form
Inside pubic
folder, create a new file named index.html
and add the following code.
<html>
<head>
<title>Basic Image Uploader</title>
</head>
<body>
<h1>Image Uploader</h1>
<form action="/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="images" multiple/>
<button type="submit">Upload</button>
</form>
</body>
</html>
We are simply creating a form that has an action to POST
the /upload
api endpoint and to encode the data as a multi-part FormData
. Defining the name
attribute for the input
field will be used for the field
name in the FormData
. This must be the same as the field name passed into the upload.array()
middleware function in the server.js
route for /upload
.
Test the form
Run the server by running node server.js
and visit the url http://localhost:8080/
to upload a file through the form. The file should end up in the project directory under the upload
folder or whatever that was defined in the multer
configuration.
Top comments (0)