How to Upload Files Using AJAX in Node.js(Express)

Introduction

In this blog, we will see how to upload an image file using AJAX. We will use the FileReader API to read the selected file, send the file data to the server via AJAX, and handle and save it as an image on the server side.

Project Structure

|--------- views
          |--------- demo.ejs
|--------- app.js
|--------- package.json
  

Setup Folder

Open your command prompt and create a new folder using the following command:

mkdir upload

Navigate into the newly created folder:

cd upload

Setup Node In Folder

Initialize the Node.js environment by running:

npm init -y

This command creates a package.json file indicating that Node is initialized in the folder.

Install Packages

Install the required packages for building the application (Express, Body-Parser, EJS, and jQuery):

npm install body-parser ejs express jquery

Add Folders and Views

Create a new folder named views in your project root, and inside it, create a file named demo.ejs.

• views/demo.ejs — Handles the client-side form, FileReader API preview, and AJAX submission.

Setup Entry Point (app.js)

Create a new file named app.js in your root directory as the entry point for your application. Open your package.json file, update the "main" entry to "app.js", and add the start script:

"scripts": {
  "start": "node app.js"
}

Resources & Code

Download complete source code from here

Click here to watch the video tutorial