English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Node.js upload file– In this Node.js tutorial, we will learn how to upload a file from a web client to a Node.js server. In other words, the client can upload a file to a Node.js server.
To upload a file to a Node.js server, please follow the following step-by-step guide:
In this example, we will use the http, fs, and powerful modules.http: For server activities.Node.js fs: Save the uploaded file to a location on the server.Powerful: Parse HTML form data. If the above modules are not installed, you can immediately use NPM to install them. Run the following command in the terminal to install each module:
npm install http npm install fs npm install formidable |
Prepare an HTML page (upload_file.html) using the following form, including input tags for file upload and form submission.
<form action="fileupload" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload"> <input type="submit" value="Upload"> </form>
Create a listening port8086HTTP server (you can change the port), and provide the server for two URLs as follows:
http.createServer(function (req, res) { if (req.url == '/uploadform') { // If the request URL contains “ / uploadform” // Fill the response with an HTML file containing the upload form } else if (req.url == '}}/fileupload') { // If the request URL contains “ / fileupload” // Using powerful modules // Read form data (including the uploaded file) // and save the file to a location. } ).listen(8086);
Using a powerful module to parse form elements and save files to a certain location. After the file is uploaded, you may display a message indicating that the file upload was successful. Initially, the file is saved to a temporary location. We can use the fs.rename() method to move the file to the desired location with a new path.
var form = new formidable.IncomingForm(); form.parse(req, function (err, fields, files) { // oldpath: The temporary folder where the file is saved var oldpath = files.filetoupload.path; var newpath = upload_path + files.filetoupload.name; // Copy the file to a new location fs.rename(oldpath, newpath, function (err) { if (err) throw err; // You may respond with another html page res.write('File uploaded and moved!'); res.end(); }); });
Below is a complete working example of Node.js file upload
This example has two files as follows:
upload_file.html
<!DOCTYPE html> <html> <head> <title>Upload File</title> <style> body{text-align:center;} form{display:block;border:1px solid black;padding:20px;} </style> </head> <body> <h1>Upload files to Node.js Server</h1> <form action="fileupload" method="post" enctype="multipart/form-data"> <input type="file" name="filetoupload"> <input type="submit" value="Upload"> </form> </body> </html
var http = require('http'); var fs = require('fs'); var formidable = require('formidable'); // HTML file containing the upload form var upload_html = fs.readFileSync("upload_file.html"); // Replace it with the location where the uploaded file will be saved var upload_path = "/home/arjun/workspace/nodejs/upload_file/"; http.createServer(function (req, res) { if (req.url == '/uploadform') { res.writeHead;200); res.write(upload_html); return res.end(); } else if (req.url == '}}/fileupload') { var form = new formidable.IncomingForm(); form.parse(req, function (err, fields, files) { // oldpath: The temporary folder where the file is saved var oldpath = files.filetoupload.path; var newpath = upload_path + files.filetoupload.name; // Copy the file to a new location fs.rename(oldpath, newpath, function (err) { if (err) throw err; // You may respond with another html page res.write('File uploaded and moved!'); res.end(); }); }); } ).listen(8086);
Run the Node.js script file in the terminal with nodes
arjun@w3codebox:~/workspace/nodejs/upload_file$ node nodejs-upload-file.js
The uploaded file is saved in the node.js file nodejs-upload-next to file.js. You can change this location in the node.js script file.
Open a web browser (HTTP client) and then click the URL http:// localhost:8086/uploadform
Click Browse.
Select a file and then click 'Open'.
Currently, the file has been uploaded to the form. Click the Node.js Upload button to parse the form elements and save the file.
Check the Node.js server next to the Node.js script file.
arjun@w3codebox:~/workspace/nodejs/upload_file$ ls blur1.jpg nodejs-upload-file.js upload_file.html
In this Node.js tutorial – Upload Files to Node.js ServerWe have learned how to use the powerful fs and http modules to upload files to the Node.js server.