How to implement file uploading and downloading with Express ?
File uploading and downloading are important features of a web app. Here we are going to handle file upload using express-fileupload npm package, and the download is handled using res.download() function of the express. The express-fileupload is passed to the app as the middleware.
Approach: First, install express-fileupload module and then require it and pass it as middleware to the app as shown below:
const fileUpload = require('express-fileupload')
app.use(fileUpload())Then in order to access the uploaded files inside POST request using:
req.files.<uploaded_file_name>
It provides some functions and values such as file name, mime type, data, and size. It provides an important mv() function which is used to save the uploaded file. It takes the upload path and an error handling function as parameters.
req.files.<uploaded_file_name>.mv(<upload_path>, function(err) {
// statement(s)
})The download is handled using res.download() function which takes two parameters: file path and error handling function.
res.download( <file_path>, function(err) {
// statement(s)
})Implementation of uploading and downloading:
Step 1: Create an app.js file, index.html file, and initialize the project using the following command:
npm init
Step 2: Install express and express-fileupload using the following command:
npm install express npm install express-fileupload
Project Structure: The project structure would look like the following. Create an upload folder inside the project directory and also create a file named download_gfg.txt inside the project folder, which would be downloaded.
Project Structure
Step 3: Now let’s first code the index.html file. In it, we create two forms, the one which handles upload has action=’/upload’ and the one which handles download has action=’/download’.
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Files</title></head><body> <!-- Upload section--> <div> <h3>Upload Section</h3> <br> <!-- action to the /upload route--> <form action="/upload" method="post" enctype="multipart/form-data"> File to be uploaded: <input type="file" name="uploadFile" id=""> <br><br> <button type="submit">Upload</button> </form> <br> </div> <!-- Download Section--> <div> <h3>Download Section</h3> <br> <!-- action to the /download route--> <form action="/download" method="get"> <button type="submit">Download</button> </form> </div> </body></html> |
Step 4: Now we will code the app.js file. In it, we have created a POST route – ‘/upload’ to handle upload and GET route – ‘/download’ to handle download. For the GET request to the root of the app, we send the index.html file.
app.js
// Requiring express to handle routingconst express = require("express"); // The fileUpload npm package for handling// file upload functionalityconst fileUpload = require("express-fileupload"); // Creating appconst app = express(); // Passing fileUpload as a middlewareapp.use(fileUpload()); // For handling the upload requestapp.post("/upload", function (req, res) { // When a file has been uploaded if (req.files && Object.keys(req.files).length !== 0) { // Uploaded path const uploadedFile = req.files.uploadFile; // Logging uploading file console.log(uploadedFile); // Upload path const uploadPath = __dirname + "/uploads/" + uploadedFile.name; // To save the file using mv() function uploadedFile.mv(uploadPath, function (err) { if (err) { console.log(err); res.send("Failed !!"); } else res.send("Successfully Uploaded !!"); }); } else res.send("No file uploaded !!");}); // To handle the download file requestapp.get("/download", function (req, res) { // The res.download() talking file path to be downloaded res.download(__dirname + "/download_gfg.txt", function (err) { if (err) { console.log(err); } });}); // GET request to the root of the appapp.get("/", function (req, res) { // Sending index.html file as response to the client res.sendFile(__dirname + "/index.html");}); // Makes app listen to port 3000app.listen(3000, function (req, res) { console.log("Started listening to port 3000");}); |
Step to run the application: Start the application using the following command.
node app.js
Output: Open the browser and go to http://localhost:3000/, you will see the following command:
output
Please Login to comment...