Today we are going to build a Node.js Express file upload function. I used the busboy library.

Busboy is an event-based file stream parser that can be used by any file stream, not just the Express framework. It does not store files, but writes them directly to the write stream you provide.

Using Busboy will make uploading easier for us, so let’s get started.

Node.js Express upload file/image steps

1. Create an Express application project

2. Install the Express and Busboy dependencies

3. Write a file upload form

4. Create a file receiving and processing service

5. Start the service

6. Test whether the service works properly

1. Create an Express application

Execute the following command to create the project folder and initialize the Node.js project

mkdir express-upload-file
cd express-upload-file
npm init -y
Copy the code

2. Install the Express and Busboy dependencies

Execute the following command from the command line to install express and Busboy dependencies

npm install express
npm install busboy
Copy the code

3. Create a file upload form

Create an input with an upload file and a Submit button

// Used to upload file forms
app.get('/'.(req, res) = > {
  res.send(
    ` 
       < HTML >  
      
 
       
 Select the file to upload 
 
        < input type = "submit" value = "upload" > < / form > < / body > < / HTML > `
      
)})Copy the code

Make sure the form has encType =”multipart/form-data” and is a POST request, otherwise the form cannot upload the file. Many beginners who just touch the front end can easily encounter this pit.

4. Create the server.js file and process the received file

Create server.js file, create uploads folder for storing uploaded files, introduce Express and Busboy dependencies, and handle file receipt

const express = require('express')
const Busboy = require('busboy')
const path = require('path')
const fs = require('fs')

var app = express();

// Used to upload file forms
app.get('/'.(req, res) = > {
  res.send(
    ` 
       < HTML >  
      
 
       
 Select the file to upload 
 
        < input type = "submit" value = "upload" > < / form > < / body > < / HTML > `
      
)})// Process the file upload service
app.post('/upload'.(req, res) = > {
  const busboy = new Busboy({ headers: req.headers });
  busboy.on('file'.(fieldname, file, filename, encoding, mimetype) = > {
    const saveTo = path.join(__dirname, 'uploads', filename);
    file.pipe(fs.createWriteStream(saveTo));
  });

  busboy.on('finish'.function () {
    res.send("File uploaded successfully");
  });

  return req.pipe(busboy);
});


app.listen(3000.function () {
  console.log('Service started successfully: http://localhost:3000');
});
Copy the code

5. Start the service

Modify package.json file to add start command

{
  "name": "express-upload-file"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "start": "node server"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {
    "busboy": "^ 0.3.1"."express": "^ 4.17.1"}}Copy the code

Run the following command to start the file upload service

npm start
Service started successfully: http://localhost:3000
Copy the code

6. Test the uploaded file

Test with a browser

Pass the Postman test

You can see that uploads will be stored in the Uploads folder regardless of which way they are uploaded.

We’re done here. If you have any questions, please leave a message.

Source: github.com/cmdfas/expr…