Convert Image to Base64 String Node js

Convert Image to Base64 String Node js

If you are making a system to upload images using node.js Express. And you have to convert the image to base 64 string before uploading and storing it in a directory and database.

In this tutorial guide, you will learn how to convert an image or image url to a base 64 string in node js express projects.

How to convert an Image to base64 using Node.js

By using the following steps, you can convert the image or image URL to base64 string in node js:

  • Step 1: Set up Node JS Project
  • Step 2: Install Express JS
  • Step 3: Create the server
  • Step 4: Create the HTML form
  • Step 5: Handle the image upload
  • Step 6: Start the server

Step 1: Set up Node JS Project

First of all, create new directory for your project and navigate to it in your command prompt or cmd. Then,execute the following command into it to initialize a new Node.js project:

cd /your-created-project-directory
npm init -y

Step 2: Install Express JS

Once you have setup your node js project, now you need to execute the following command to install express:

npm install express

Step 3: Create the server

Create a new file called server.js and open it in a code editor. Add the following code to set up a basic Express server:

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Step 4: Create the HTML form

Now, you need to create a new directory called public your node js project’s root directory. Inside the public directory, create an HTML file called index.html with the following content:

<!DOCTYPE html>
<html>
<head>
  <title>Image to Base64 Conversion - Tutsmake.com</title>
</head>
<body>
  <h1>Image to Base64 Conversion</h1>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="image" accept="image/*" />
    <button type="submit">Upload</button>
  </form>
</body>
</html>

Step 5: Handle the image upload

Now, open again your server.js file and add the following code to handle the image upload and conversion to Base64:

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    res.status(400).send('No file uploaded');
    return;
  }

  const imageFile = req.file.path;

  // Convert the image to Base64
  const fs = require('fs');
  const base64 = fs.readFileSync(imageFile, { encoding: 'base64' });

  // Send the Base64 image as a response
  res.send(base64);
});

Step 6: Start the server

Now, save the all file and open again your cmd. Then execute the following command to start the server:

node server.js

You should see the message “Server is running on http://localhost:3000”. Open your web browser and navigateto http://localhost:3000. You should see the “Image to Base64 Conversion” page with an upload form.

Conclusion

That’s all! You have successfully learned how to convert an image or image URL to Base64 string in node js express.

Recommended Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *