Angular - Creating Express based Upload API

Let's create a "sample web application" to upload a file to the server. We will develop an API for file uploads and then call this API from the Angular front-end application. Throughout this process, we will learn and handle different types of responses.

First, let's create a new express app to upload a file to the server by executing the following steps:

Step 1: Go to your favorite workspace as shown below −

cd /go/to/your/favorite/workspace

Step 2: Create a new folder with the name expense-rest-api and move into the folder −

mkdir upload-rest-api && cd upload-rest-api

Step 3: Create a new application using the init subcommand provided by the npm command as shown below −

npm init

Once you hit the above command, it will ask a few questions and answer all of them with default answers.

Step 4: Install express and cors packages to create node-based web applications −

npm install express cors multer --save

Here,

• express is a web framework to create a web application.
• cors is a middleware used to handle CORS concept in HTTP application.
• multer is an another middleware used to handling file upload.

Step 5: Open index.js and place the below code (if not found create it manually within the root folder) −

index.js

var express = require("express")
var cors = require('cors')
const multer = require('multer');

var app = express()
app.use(cors());

var bodyParser = require("body-parser");
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

var HTTP_PORT = 8000
app.listen(HTTP_PORT, () => {
   console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT))
});

const storage = multer.diskStorage({
   destination: (req, file, cb) => {
      cb(null, "uploads/")
   },
   filename: (req, file, cb) => {
      cb(null, Date.now() + "-" + file.originalname)
   },
})

const upload = multer({ storage: storage });
app.post('/api/upload', upload.single('photo'), (req, res) => {
   console.log(req.file)
   res.json({ message: 'File uploaded successfully!' });
});

Here,

• Configured a simple express app by enabling cors, multi, and body-parser middleware.

• Created a new API/api/uploadto accept a file and store it in the uploads folder on the server.

• Configured the upload folder as uploads.

• The API will accept a file input with the name photo.

Step 6: Create a directory for storing uploads −

mkdir uploads

Step 7: Now, run the application by executing the below command −

node index.js

Step 8: To test the application, you can use the Postman, Curl, or any other HTTP client toolkit. Here is how you can do it −

• Create a new request to the API endpoint: http://localhost:8000/api/upload.
• Set the request method to post.
• Add a form-data field with the key photo, set its type to file, and attach the file you want to upload.

Output

Once request is sent, and file is uploaded, you will receive a success message.

{
   "message": "File uploaded successfully!"
}