Saving Image to MYSQL and displaying it using Nodejs and Sequelizejs

In this blog, we will go through the process for storing the image data to the database rather than storing image URL to the database using Node application and Sequelizejs

Prerequisites: Knowledge on Javascript and basic knowledge on Node and Sequelize js

Sequelize js is an ORM (Object Relational Mapping) tool which helps with all the database operations for many servers like MySQL, Postgres, MongoDB etc..

In this blog, the process we follow is to upload an image from UI and send it to back end and store the image to database and then get the image from database and send it to the front end and then display the same image on the screen.

The first step creates a Node application where we can upload an image and for that add in the add the code to the onChange function from the front end.

var file_name = e.target.files[0].name // e is the event
let files = e.target.files;
let data = new FormData()
var self = this

for (var i = 0; i < files.length; i++) {
let file = files.item(i);
data.append('file', file, file.name);
}

Axios.post('/api/uploadProfilePic', data, {
headers: { 'content-type': 'multipart/form-data' }
})
.then(res => {
console.log(res.data)
})

In the above code we are getting the images from the input event ‘e’, we are converting the data to form data and with this, we can upload multiple images at once and upload. For sending a request we use Axios, for this we set headers as form data and as we are sending data, not in URL we are using post method. In the backend, we have the following code which will process the request and save the image to the database. Before this, we should create a model with sequelize which we have discussed in our previous blogs and that should contain a column with BLOB data type.

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

app.post('/api/uploadProfilePic', upload.single('file'), function (req, res, next) {
var imageData = fs.readFileSync(req.file.path);
db.profile.create({
profile_pic: imageData
})
.then(image => {
res.json({ success: true, file1: req.file, data: image, update: false })
})
})

In the above code, we use a module MULTER which is used to save images temporarily to the specified location. From the above code, we are using fs.readFileSync() method to convert the image data to the required datatype and the argument we give is the location of the file uploaded which multi stores locally. Now we are storing the output of the readFileSync() to the database to a model name ‘profile’. Now the image is stored and we can check In the database which will be stored in the datatype BLOB.

To display the image from the database we should again send a request to the database and for the request, we write an ajax call which is as follows.

Axios.post('/api/getProfilePic', { emp_id: 5 })
	.then(res => {
		Var imageURL = 'data:image/png;base64,' + new Buffer(res.data.data.profile_pic, 'binary').toString('base64')
	})

The backend code where we send response to the above request is as follows

  app.post('/api/getProfilePic', (req, res) => {
    db.profile.findAll({
      attributes: ['profile_pic', 'emp_id'],
      where: { emp_id: req.body.emp_id },
      raw: true
    })
      .then(profile => {
        res.json({ success: true, data: profile })
      })
      .catch(err => {
        console.log('in error :: /api/getProfilePic')
      })
  })

In the above code, we are sending a request to the backend to get the image data we query the database and send the response for the request. After receiving the request we cannot directly display the data as it is in BLOB format and we should convert it, for converting we use Buffer(URL, ‘binary’).toString(‘base64’) and this will convert to image URL. Then we can directly display them with the img tag as follows.

<img src = imageURL alt=’profile_pic’/>

For any further queries feel free to get back to us at support@helicaltech.com

Thanks
Gagan Manda
BI Developer
Helical IT Solutions

Best Open Source Business Intelligence Software Helical Insight Here

A Business Intelligence Framework

Free
Download

Best Open Source Business Intelligence Software Helical Insight is Here

A Business Intelligence Framework

Free
Download