Ajax file upload in Node.js

In last tutorial i have explained how to handle file uploads in node.js. That code needs a page refresh in order to upload file which is not a good practice in terms of user experience.

In this tutorial i am going to explain how to develop file uploads using node.js with Ajax. So it won’t need a page refresh at all.


Recommended read : File uploads using node.js

Our application :

I am going to develop same application as i have did in last tutorial with some additional code changes which makes 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 :



Ajax always provides richness to 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.

Enjoyed the article? Help us grow and produce more awesome content like this by going pro!
Become a pro!

Shahid (UnixRoot) Shaikh

Hey there, This is Shahid, an Engineer and Blogger from Bombay. I am also an Author and i wrote a programming book on Sails.js, MVC framework for Node.js.

Related Posts


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

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

    Am i using some outdated version or is it deprecated

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

  4. 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

  5. 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

  6. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.