React Single File Upload with Multer and Express.js

When we want to add functionality for uploading or deleting files, file storage becomes crucial, whether it's for website or personal use. The File Storage project using Express aims to develop a web application that provides users with a secure and efficient way to store and manage their files online. With Express, we'll be able to create a user-friendly application that allows you to upload, delete, and display your files hassle-free. Let's get started on this exciting project!

Preview of Final Output:

👁 Screenshot-(59)

Prerequisites and Technologies:

• Express: Express will be used to build the entire backend for file storage.
• Multer: The Multer module will be used for uploading files.
• Ejs: EJS will be used for rendering HTML pages.
• Bootstrap: Bootstrap will be used for elegant page design and display.

Approach:

We will be utilizing Express to develop the entire backend, while the Multer module will be used for file uploads. The application will include three routes: upload, delete, and view. The upload route will be used for file uploads, the delete route will be used for deleting specific files, and the view route will be used to display all files. The HTML page will be utilized to display all files, along with the options to upload and delete. The files will be stored on the server inside the /file storage folder, and the application will support all types of files.

Functionalities:

• File Upload : This option enables user to upload a file from computer to server .
• File Delete : This option deletes the selected file stored on server if it is not found then error is thrown.
• View All Files : This option displays all the uploaded files from server on html page . The file can be viewed by clicking the link.

Steps to Create A Project:

Step 1: First we need to create react app using below command

npx create-react-app <<Project_Name>>

Step 2: Navigate to the folder

cd <<Project_Name>>

Step 3: Install the following packages using the below command.

npm install express multer ejs

Step 4: Now create app.js file in project folder. we will setup express application first create a express app instance. Configure app to use EJS. For EJS create /views folder inside project folder. This folder will consist our HTML code.

Project Structure:

The updated dependencies in package.json will look like this:

{
 "name": "gfg-filestorage",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "node app.js"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "ejs": "^3.1.9",
 "express": "^4.18.2",
 "multer": "^1.4.5-lts.1"
 }
}

Example:

• App.js: This is the main server file where we will define all the routes and starts the server to listen at port 3000
• index.ejs: This file will contain the view or template design of the project we are making and we are using EJS as a view engine.

Steps to Run the application:

Step 1. Type the following command in terminal.

npm start

Step 2. Open web-browser and type the following URL

http://localhost:3000/

Output: