Node.js file upload example with Ajax and JavaScript

The art of the file upload is not elegantly addressed in languages such as Java and Python. But a file upload in Node is a relatively straightforward endeavor, especially if you have the right NPM libraries at your fingertips.

In this quick tutorial, I’ll show you how to upload a file from a web browser, with a Node.js file upload handler on the server-side, and a pure, Ajax based JavaScript process on the client side.

Step-by-step Node.js file upload example

The basic steps in this example to upload a file with Node.js and JavaScript follow this order:

  1. Ensure Node.js is installed locally
  2. Create a file named upload.js
  3. Add FileSystem (fs) and Formidable library dependencies
  4. Use Node.js to parse the incoming file and move it to a preferred folder
  5. Create an HTML upload form in a file named index.js
  6. Run the JavaScript file and use the HTML form to upload files
  7. Optionally configure the HTML page to upload with Ajax and JavaScript

Node web service

The first step is to make sure Node is installed on your computer. A quick version query will tell you this. I’m doing this tutorial on Node version 16.13.2.

More file upload options

I put together a bunch of file upload tutorials. Pick your technology and get uploading!

Uploading files to the server need not be a problem.

[email protected] /c/upload-example
$ node --version
v16.13.2

We want to walk before we run, so let’s first create a simple Node.js example that spits out a status message in a browser. Create a file named upload.js, and populate it with the following code:

let http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.write('Node JS File Uploader Checkpoint');
}).listen(80);

Open a command prompt in the same folder as the upload.js file and run the following command:

[email protected] /c/upload-example
$ node upload.js

As the command runs, open a browser and navigate to localhost:80/upload

simple JavaScript file upload

The first step to upload files with Node is to get a simple web service working.

The text ‘Node JS File Uploader Checkpoint’ will display in the browser window.

HTML 5 file uploader

In the same folder as update.js, create another file named index.html and code an HTML 5 file uploader:

<html> 
  <head><title> NodeJS File Upload Example </title></head> 
  <body>
    <form action="http://localhost:80/upload" method="post" enctype="multipart/form-data">
      <!-- HTML5 file upload selector-->
      <input type="file" name="fileupload">
      <br>
      <input type="submit">
    </form>
  </body> 
</html>

The input tag with its type attribute set to file will render a file selector component on the webpage.

The multipart enctype setting on the form makes it possible to upload files to the server.

Open the index.html page in a browser and click the submit button. The Node.js web service will run, and print out the checkpoint message to the screen.

The webpage now invokes the web service correctly. The next step is to implement the Node.js JavaScript upload functionality.

Install formidable and fs libraries

We need both the filesystem (fs) and formidable libraries to help handle the Node.js file upload. Stop the running server and issue the following two npm install commands:

[email protected] /c/upload-example
$ npm install fs

[email protected] /c/upload-example
$ npm install formidable

Node.js file uploader JavaScript implementation

Now rewrite the Node.js component to use both the Formidable and the FileSystem (fs) library.

In the createServer method, we will create an instance of Formidable’s IncomingForm object, which handles the intricacies of the file upload.

In the IncomingForm object’s parse method, we use the FileSystem library’s rename method to move the file from it’s original download location to a custom folder named C:/upload-example/

When the operation is complete, it sends a Node.js File Upload Success message to the browser.

let http = require('http');
let formidable = require('formidable');
let fs = require('fs');

http.createServer(function (req, res) {

  //Create an instance of the form object
  let form = new formidable.IncomingForm();

  //Process the file upload in Node
  form.parse(req, function (error, fields, file) {
    let filepath = file.fileupload.filepath;
    let newpath = 'C:/upload-example/';
    newpath += file.fileupload.originalFilename;

    //Copy the uploaded file to a custom folder
    fs.rename(filepath, newpath, function () {
      //Send a NodeJS file upload confirmation message
      res.write('NodeJS File Upload Success!');
      res.end();
    });
  });

}).listen(80);

Save this file and then run the upload.js file again.

[email protected] /c/upload-example
$ node upload.js

Then refresh the index.html page in the browser, select a file and click submit. The Node.js file upload process successfully stores the file to the C:/upload-example/ folder.

Node, Ajax and JavaScript integration

At this point, the Node.js file upload component is feature complete. However, some people like to perform an Ajax based JavaScript upload from the client to avoid needless request-response cycles in the browser. To do an Ajax and JavaScript file upload to Node.js, replace the form in the HTML page with these two lines:

<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()" > Upload </button>

And add the following script before the end body tag:

<script>
async function uploadFile() {
  let formData = new FormData(); 
  formData.append("fileupload", fileupload.files[0]);
    await fetch('http://localhost/upload', {
    method: "POST", 
    body: formData
  }); 
}
</script>

Save the index.html file and refresh the web browser. Uploads to Node.js will go through Ajax, and thus create a full JavaScript file uploader with JavaScript running both on the client and the server.

And that’s how easy it is to create a Node.js file uploader in JavaScript.

 

 

 

 

 

 

 

 

 

 

 

 

SearchAppArchitecture
SearchSoftwareQuality
SearchCloudComputing
SearchSecurity
SearchAWS
Close