Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Node.js Express Project to Encode & Decode Images From Local PC or URL to Base64 Code in JS

Posted on February 12, 2023

 

 

Welcome folks today in this blog post we will be encoding and decoding images from local pc or url to base64 code in node.js and express. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new node.js project by executing the below commands as shown below.

 

 

npm init -y

 

 

This will create the package.json file for the node.js project. Now we need to install the libraries needed using the npm command as shown below

 

 

npm i node-base64-image

 

 

npm i image-to-base64

 

 

npm i express

 

 

npm i ejs

 

 

npm i multer

 

 

After installing all the above libraries you need to see the directory structure of the final project as shown below

 

 

 

 

As you can see inside the views folder we will be storing all the html templates for the node.js app. And inside the public/uploads folder we will be storing all the uploaded files by the user. Now after this you need to make an index.js file which will be starting point of the node.js express app

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const express = require('express')
 
const app = express()
 
const port = 5000
 
app.use(express.static('public/uploads'))
 
app.set('view engine','ejs')
 
app.get('/',(req,res) => {
    res.render('index')
})
 
app.listen(port,() => {
    console.log("App is listening on port 5000")
})

 

 

As you can see in the above code we are starting  a basic express app at the port number 5000. And then we are loading the ejs and setting the default view engine and then make a simple get request on the / route. And also we are setting the public/uploads to be the static directory because here we will be storing all the uploaded files from the user. And here we are loading the index.ejs file which we need to define the views folder as shown below

 

 

views/index.ejs

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>base64 decode and encode in Javascript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">
            Base64 Decode & Encode
        </h1>
        <form action="/encode" method="post" enctype="multipart/form-data">
            <div class="form-group container">
            <label for="file">Upload File:</label>
            <input class="form-control" type="file" name="file" id="" required>
            </div>
            <div class="form-group container">
                <button class="btn btn-danger btn-block">
                    Encode Image
                </button>
            </div>
        </form>
 
        <form action="/decode" method="post" enctype="multipart/form-data">
            <div class="form-group container">
            <label for="file">Upload Base64 Code File:</label>
            <input class="form-control" type="file" name="file" id="" required>
            </div>
            <div class="form-group container">
                <button class="btn btn-danger btn-block">
                    Decode Image
                </button>
            </div>
        </form>
    </div>
</body>
</html>

 

 

As you can see we are importing bootstrap for styling the ui elements. And inside it we have two html forms first one for encoding the image file and secondly for decoding the base64 code to image. And both the forms contain the file input element and then we have the respective buttons to submit the form.

 

 

 

 

Now we need to make the post requests at the /encode to encode the given image by the user. And also we need to make the post request at the /decode for decoding the base64 code to image.

 

 

Uploading the File Using Multer

 

 

Now guys we will look first how basically how we can configure multer library inside the express project. First of all you need to import the required library as shown below

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
const multer = require('multer')
const path = require('path')
 
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "public/uploads");
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "-" + Date.now() + path.extname(file.originalname));
  },
});
 
var upload = multer({ storage: storage }).single('file');

 

 

As you can see we are declaring the config object for storing the uploaded files in multer. We are providing the upload directory which is public/uploads and then we are giving the dynamic filename using the Date.now() method. And then lastly we are calling the multer constructor and passing these storage object and then allowing the user to only upload a single file at a time.

 

 

Including the BodyParser Middleware

 

 

Now guys while we are working with forms in the browser we will need the body-parser middleware to be included inside this express app. This can be done as follows

 

 

JavaScript
1
2
3
4
5
const bodyparser = require('body-parser')
 
app.use(bodyparser.urlencoded({ extended: false }))
 
app.use(bodyparser.json())

 

 

 

Encoding Image to Base64 Text File

 

 

Now we will be the post request to encode the image to base64 code and download it as text file in the browser. Just copy paste the code inside the index.js file as shown below

 

 

index.js

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const fs = require('fs');
 
const imageToBase64 = require('image-to-base64')
 
app.post('/encode', (req, res) => {
    // upload the file
 
    output = Date.now() + "output.txt"
 
    upload(req, res, (err) => {
        if (err) {
            console.log("some error occured in uploading the file")
            return
        }
        else {
            console.log(req.file.path)
 
            // encode to base64
 
            imageToBase64(req.file.path) // Path to the image
              .then((response) => {
                  console.log(response); // "cGF0aC90by9maWxlLmpwZw=="
                  
                  fs.writeFileSync(output, response)
                  
                  res.download(output, () => {
                      console.log("file is downloaded")
                  })
              })
              .catch((error) => {
                console.log(error); // Logs an error if there was one
              });
        }
    })
})

 

 

As you can see we are importing the fs module to save the files inside the root directory and then we are importing the library to encode the image to base64 text file. And inside this post request we are using the imageToBase64() method and inside this we are passing the input image file and then it returns the promise where we are getting the base64 code and after that we are saving the base64 code inside the text file and download it as text file as an attachment.

 

 

 

 

 

Decoding the Base64 Text to Image

 

 

Now we will be writing the /decode request to actually take the base64 text file and decode it to convert to image file and download it as an attachment.

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const decodebase64toimage = require('node-base64-image').decode
 
app.post('/decode', async (req, res) => {
    
    output = Date.now() + "output"
    upload(req, res,async (err) => {
        if (err) {
            console.log("error takes place")
            return
        }
        else {
            console.log(req.file.path)
 
            const base64code = fs.readFileSync(req.file.path, "utf8");
 
            console.log(base64code)
            
            await decodebase64toimage(base64code, { fname: output, ext: "jpg" });
 
            res.download(output + ".jpg", () => {
                console.log("file is downloaded")
            })
 
        }
    })
})

 

 

As you can see in the above code we are importing decode module wbich will decode the base64 text file to image file. And then inside the post request we are uploading the file first of all using multer and then after that we are decoding the base64 to jpg image and then using the download() method of express to download the file as an attachment inside the browser.

 

 

 

 

Full Source Code

 

 

Wrapping the blog post this is the full source code of the index.js file as shown below

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const express = require('express')
 
const app = express()
 
const path = require('path')
 
const bodyparser = require('body-parser')
 
app.use(bodyparser.urlencoded({ extended: false }))
 
const fs = require('fs');
 
const decodebase64toimage = require('node-base64-image').decode
 
const imageToBase64 = require('image-to-base64')
 
app.use(bodyparser.json())
 
const multer = require('multer')
 
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "public/uploads");
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "-" + Date.now() + path.extname(file.originalname));
  },
});
 
var upload = multer({ storage: storage }).single('file');
 
app.post('/encode', (req, res) => {
    // upload the file
 
    output = Date.now() + "output.txt"
 
    upload(req, res, (err) => {
        if (err) {
            console.log("some error occured in uploading the file")
            return
        }
        else {
            console.log(req.file.path)
 
            // encode to base64
 
            imageToBase64(req.file.path) // Path to the image
              .then((response) => {
                  console.log(response); // "cGF0aC90by9maWxlLmpwZw=="
                  
                  fs.writeFileSync(output, response)
                  
                  res.download(output, () => {
                      console.log("file is downloaded")
                  })
              })
              .catch((error) => {
                console.log(error); // Logs an error if there was one
              });
        }
    })
})
 
app.post('/decode', async (req, res) => {
    
    output = Date.now() + "output"
    upload(req, res,async (err) => {
        if (err) {
            console.log("error takes place")
            return
        }
        else {
            console.log(req.file.path)
 
            const base64code = fs.readFileSync(req.file.path, "utf8");
 
            console.log(base64code)
            
            await decodebase64toimage(base64code, { fname: output, ext: "jpg" });
 
            res.download(output + ".jpg", () => {
                console.log("file is downloaded")
            })
 
        }
    })
})
 
const port = 5000
 
app.set('view engine','ejs')
 
app.get('/',(req,res) => {
    res.render('index')
})
 
app.listen(port,() => {
    console.log("App is listening on port 5000")
})

Recent Posts

  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme