English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

NodeJS Basic Tutorial

NodeJS Express.js

NodeJS Buffer&URL;

NodeJS MySql

NodeJS MongoDB

NodeJS File (FS)

NodeJS Other

Node.js File Upload

Node.js upload file to server

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:

  1. Required modules

    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
  2. Prepare HTML form

    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>
  3. Create an HTTP server

    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);
  4. File saved

    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(); 
        }); 
     });

Node.js File Upload Example

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

Summary:

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.