Ajax file upload in Node.js

We all love Ajax, don’t we? And there is an obvious reason. Ajax is great for user experience. In this tutorial, I am going to build an application using Node.js that will let the user upload files using Ajax instead of conventional upload that requires a browser refresh action to see the change.


Recommended read : File uploads using node.js

Our application :

I am going to develop the same application as I have done in the last tutorial with some additional code changes which make it asynchronous or Ajax.

#1 : Handling global variable issue.
#2 : Upgrading to latest version of multer.

So we will use FORM submit and same Express router with multer middleware for handling file upload.

  "name": "file_upload",
  "version": "0.0.1",
  "dependencies": {
    "express": "4.13.3",
    "multer": "1.1.0"
  "devDependencies": {
    "should": "~7.1.0",
    "mocha": "~2.3.3",
    "supertest": "~1.1.0"

Switch to the folder where package file is saved and type

npm install

to install the dependencies.

var express =   require("express");
var multer  =   require('multer');
var app     =   express();

var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());

var upload = multer({ storage : storage}).single('userPhoto');

      res.sendFile(__dirname + "/index.html");

    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        res.end("File is uploaded");

    console.log("Working on port 3000");
    <title>File upload Node.</title>
      <form id="uploadForm"
      <input type="file" name="userPhoto" />
      <input type="submit" value="Upload Image" name="submit">
      <span id = "status"></span>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>

If you have noticed we are using jquery.form library which allow us to do Ajax form submit. Have a look to JavaScript code.

  $(document).ready(function() {

     $('#uploadForm').submit(function() {
        $("#status").empty().text("File is uploading...");

            error: function(xhr) {
        status('Error: ' + xhr.status);

            success: function(response) {
        //Very important line, it disable the page refresh.
    return false;

On Form submit, we will stop the page refresh by returning FALSE and call the API using ajaxSubmit(). Add this code in separate file and add it below the jquery.form or copy and paste just below this line

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js">script>

------Paste above code ------

Running the code :

Either download the ready made code from Github or save all those files in separate folder and switch to that folder using command prompt.

node Server.js

Visit localhost:3000 to view the app. Open chrome developer console or firebug console in order to see response from server.
run code 1

Output :


Further Study

File uploads using Node.js
How to Upload Multiple Files Using Node.js
Node.js MySQL Tutorial


Ajax always provides richness to the web application. jQuery.form is one of the stable and popular library. Multer takes care of handling multi-part data and provides ease to implementation.

15 thoughts on “Ajax file upload in Node.js”

  1. Could you kindly demonstrate how to do select and update image immediately without file submit to server ?

  2. Hi,
    I have a query. Can I do drag & drop multiple images upload in nojejs?

    Thanks in advance.

    1. Drag and drop is HTML5 feature, had nothing to do with Node.js.

      On server side you need to tweak the code to accept multiple files at same time.

  3. ‘return false; ‘ not working and also
    showing error : ‘$(…).ajaxSubmit is not a function’

    Am i using some outdated version or is it deprecated

  4. Hy , thanks for this tuto,
    Please , how use multer without express ( using a new FormData() ) ,

  5. Hi.. Nice Tutorial!! The File Save to the disc system is uploaded without the extension, So can’t be viewed. Any other way to achieve it.

    NOTE: Am using a win-7 for development

  6. Hi .. Nice Tutorial and thanks for that!!
    And when trying out your example, file get saved without extension. So `file.fieldname` can be replaced with `file.originalname` to get the file name with extension

  7. What if I want to send other form field values along with the image? How my ajax will look like then?

    1. Shahid (UnixRoot) Shaikh

      Other form fields value can be accessible as we normally do by using body-parser.

  8. Hello Shahid, this tutorial was very interesting for uploading files using ajax. It worked, and the tasks to be done on the server on the uploaded file, were done too. Thanks. Now I need to generate a report (at the user’s request), the report should be generated using an executable on the server. This task should take some time. And then, there should be a link to the generated file, to download. The use of ajax, is necessary, since it is a Single Page Application and without ajax, I have to rebuild the whole user interface. Do you have any direction or any tutorial for this kind of use cases. Download a file using ajax, nodejs. Thanks in advance for any help. Bravo for sharing.

Comments are closed.