Express.js File Upload

In Express.js, file upload is slightly difficult because of its asynchronous nature and networking approach.

It can be done by using middleware to handle multipart/form data. There are many middleware that can be used like multer, connect, body-parser etc.

Let's take an example to demonstrate file upload in Node.js. Here, we are using the middleware 'multer'.

Create a folder "jtp file upload" having the following files:

uploads: It is an empty folder i.e. created to store the uploaded images.

package: It is JSON file, having the following data:

File: package.json

{
"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"
}
}

File: index.html

<html>  
  <head>  
    <title>File upload in Node.js by Javatpoint</title>  
 <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>  
  <script>  
  $(document).ready(function() {  
     $('#uploadForm').submit(function() {  
         $("#status").empty().text("File is uploading...");  
  
        $(this).ajaxSubmit({  
  
            error: function(xhr) {  
                    status('Error: ' + xhr.status);  
            },  
  
            success: function(response) {  
                    console.log(response)  
                    $("#status").empty().text(response);  
            }  
    });  
  
    return false;  
    });      
});  
  </script>  
  </head>  
  <body>  
      <h1>Express.js File Upload: by Javatpoint</h1>  
      <form id="uploadForm" enctype="multipart/form-data" action="/uploadjavatpoint" method="post">  
       <input type="file" name="myfile" /><br/><br/>  
       <input type="submit" value="Upload Image" name="submit"><br/><br/>  
       <span id="status"></span>  
      </form>  
  </body>  
</html>  