Upload Image in MySQL using Node.js, Express & Multer

To upload an image file in Node Express js using Multer & MySQL; Simply install the multer and MySQL modules in the Node Express app using command npm install express multer body-parser mysql, and use Multer to save the image file in the project folder and MySQL INSERT INTO table_name(file_src)VALUES(?) query to store the image file name.

Multer module is middleware, which is used to handle multipart/form-data in Node JS to upload files.

Upload/Store Image File in MySQL using Node. js, Express & Multer

Steps to upload/save image file in MySQL database using Node express js and multer:

Step 1 – Create Node Express js App

Start cmd or terminal window and run the following commands into it to create node express js application:

mkdir my-app
cd my-app
npm init -y
mkdir uploads

Step 2 – Create Table in MySQL Database

To create a table in MySQL database; simply run the following SQL query for:

CREATE TABLE users_file(id INT(10) NOT NULL AUTO_INCREMENT, file_src TEXT, PRIMARY KEY(id));

Step 3 – Install express multer body-parser mysql Modules

To install express, multer, bodyparser and mysql modules in the node express js application, which will help to upload image files into MySQL database and application folder, Simply run the npm install express multer body-parser mysql command on cmd or terminal window:

npm install express multer body-parser mysql

Step 4 – Create Image File Upload Form

To create image file upload form in a node express js application or project; Simply navigate to the root directory of project and create index.html file and then add the following code into it:

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>How to store image path in MySQL database using Node js - Tutsmake.com</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <h1>How to store image path in MySQL database using Node js - Tutsmake.com</h1>
      <form action="/uploading" enctype="multipart/form-data" method="post">
        <input type="file" name="image" accept='image/*' >
        <input type="submit" value="Upload">
      </form>
    </body>
</html>

Note that:- A form with a `file input` element that allows us to choose the file and a button to submit the form.

Step 5 – Create Server.js File and Import Modules & Routes

Navigate to your project root directory and create server.js file, Then import express multer body-parser mysql modules in server.js; like the following:

const express = require('express')
const app = express()
const bodyparser = require('body-parser')
const mysql = require('mysql')
const multer = require('multer')
const path = require('path')

// body-parser middleware use
app.use(bodyparser.json())
app.use(bodyparser.urlencoded({
    extended: true
}))

// Database connection
const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "test"
})

db.connect(function (err) {
    if (err) {
        return console.error('error: ' + err.message);
    }
    console.log('Connected to the MySQL server.');
})

//! Use of Multer
var storage = multer.diskStorage({
    destination: (req, file, callBack) => {
        callBack(null, './uploads/')     // './uploads/' directory name where save the file
    },
    filename: (req, file, callBack) => {
        callBack(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
})

var upload = multer({
    storage: storage
});

//create connection
const PORT = process.env.PORT || 3000
app.listen(PORT, () => console.log(`Server is running at port ${PORT}`))

Import Routes for Upload and Store Image File in MySQL DB using Multer

Simply import the following routes in server.js for showing the image file upload form and store image file in mysql db & folder route using multer:

//! Routes start

//route for Home page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

//@type   POST
//route for post data
app.post("/uploading", upload.single('image'), (req, res) => {
    if (!req.file) {
        console.log("No file upload");
    } else {
        console.log(req.file.filename)
        var imgsrc = 'http://127.0.0.1:3000/uploads/' + req.file.filename
        var insertData = "INSERT INTO users_file(file_src)VALUES(?)"
        db.query(insertData, [imgsrc], (err, result) => {
            if (err) throw err
            console.log("file uploaded")
  res.send('Image Has been uploaded, please check your directory and mysql database....');
        })
    }
});

Step 6 – Start App Server

Run the npm start to start uploading image file in MySQL database using node js express app server:

//run the below command

npm start

after run this command open your browser and hit

http://127.0.0.1:3000/

Conclusion

That’s it; You have learned how to upload and store image path in MySQL database using Node js express using multer module.

Subscribe to Blog via Email