Upload Image Using AJAX In Node

Introduction

In this blog we see how we can upload image file using ajax.Here we be using FileReader for reading the selected file and then we send that file data to server side using ajax and on server side we read and save that as image on server.

Project Structure

Setup Folder

Open the command prompt and create new folder using following command

• mkdir upload

Now change to the newly created folder by using folder command

• cd upload

Setup Node In Folder

Now we have to setup node environment in the folder for our project.

We have to use the below command to setup node in our folder

• npm init -y

This command will create a package.json file which indicates that node is initialized in folder.

The package.json file will look like this

Install Packages

Now we have to install the package required for building the application.

For installing packages we use npm install followed by package name.

• npm install body-parser ejs express jquery

After installing package the package.json will look like this 

Add Folder

As you can see in the project structure above. 

Now we have to add a new folder in out project folder and name it views.

And in views folder add file and name it demo.ejs

• demo.ejs

Setup EntryPoint
We have to setup the entry point for our application.
Add a new file in our project folder and name it app.js.As show in the project folder
Now add the below code in that app.js

• app.js

Now open the pacakge.json file and in scripts add "start":"node app.js"
and in main change it to app.js from index.js.

Download code from here

Watch Video Tutorial