Upload image in mysql using node js express example; This tutorial will show you how to upload and store image path in MySQL database using Node js express using multer library.
Multer is a node. js middleware for handling multipart/form-data , which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.
Upload/store images in MySQL db using node.js express & multer example tutorial; you will learn step by step on how to upload images into MySQL database and directory in node js express framework with multer library.
How to Upload/Store Image in MySQL Database using Node js Express
- Step 1 – Create Node Express js App
- Step 2 – Create Table in MySQL Database
- Step 3 – Install express body-parser mysql dependencies
- Step 4 – Create image Upload Form
- Step 5 – Create Server.js File
- Step 6 – Start Node Express Js image Upload App Server
Step 1 – Create Node Express js App
Execute the following command on terminal to create node js app:
Step 2 – Create Table in MySQL Database
Execute the following sql query to create a table into your database:
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 dependencies
Execute the following command on the terminal to express multer ejs body-parser mysql dependencies :
npm install express multer body-parser mysqlStep 4 – Create image Upload Form
Create a form with a `file input` element that allows us to choose the file and a button to submit the form; So create index.html file and 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> <h2>How to store image path in MySQL database using Node js - Tutsmake.com</h2> <form action="/" enctype="multipart/form-data" method="post"> <input type="file" name="image" accept='image/*' > <input type="submit" value="Upload"> </form> </body> </html>
Make sure your form must have enctype="multipart/form-data"attribute and form method should be post.
Step 5 – Create Server.js File
Create server.js file and import express multer body-parser mysql dependencies in server.js; as shown below:
const express = require('express') const app = express() const bodyparser = require('body-parser') const mysql = require('mysql') const multer = require('multer') const path = require('path') //use express static folder app.use(express.static("./public")) // 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, './public/images/') // './public/images/' 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 }); //! Routes start //route for Home page app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); //@type POST //route for post data app.post("/post", upload.single('image'), (req, res) => { if (!req.file) { console.log("No file upload"); } else { console.log(req.file.filename) var imgsrc = '//127.0.0.1:3000/images/' + 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") }) } }); //create connection const PORT = process.env.PORT || 3000 app.listen(PORT, () => console.log(`Server is running at port ${PORT}`))
Note that; The following route in server.js will upload image into MySQL database and node js experss app directory:
//@type POST //route for post data app.post("/post", upload.single('image'), (req, res) => { if (!req.file) { console.log("No file upload"); } else { console.log(req.file.filename) var imgsrc = '//127.0.0.1:3000/images/' + 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") }) } });
Step 6 – Start Node Express Js image Upload App Server
You can use the following command to start upload image in mysql using node js express app server:
//run the below command npm start after run this command open your browser and hit //127.0.0.1:3000/Conclusion
How to upload/store image path in mysql database using node js example; You have learned how to upload and store image path in MySQL database using Node js express using multer library.