├── .gitignore
├── README.md
├── package.json
├── resources
    └── static
    │   └── assets
    │       ├── tmp
    │           └── logo.png
    │       └── uploads
    │           └── 1588129738631-bezkoder-logo.png
├── server.js
└── src
    ├── config
        └── db.config.js
    ├── controllers
        ├── home.js
        └── upload.js
    ├── middleware
        └── upload.js
    ├── models
        ├── image.model.js
        └── index.js
    ├── routes
        └── web.js
    └── views
        └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Node.js upload images to MySQL database
 2 | 
 3 | For more detail, please visit:
 4 | > [Upload/store images in MySQL using Node.js, Express & Multer](https://bezkoder.com/node-js-upload-image-mysql/)
 5 | 
 6 | More Practice:
 7 | > [How to upload multiple files in Node.js](https://bezkoder.com/node-js-upload-multiple-files/)
 8 | 
 9 | > [Upload & resize multiple images in Node.js using Express, Multer, Sharp](https://bezkoder.com/node-js-upload-resize-multiple-images/)
10 | 
11 | > [How to upload/store images in MongoDB using Node.js, Express & Multer](https://bezkoder.com/node-js-upload-store-images-mongodb/)
12 | 
13 | > [Node.js Rest APIs example with Express, Sequelize & MySQL](https://bezkoder.com/node-js-express-sequelize-mysql/)
14 | 
15 | > [Node.js & JWT – Token Based Authentication & Authorization example](https://bezkoder.com/node-js-jwt-authentication-mysql/)
16 | 
17 | ## Project setup
18 | ```
19 | npm install
20 | ```
21 | 
22 | ### Run
23 | ```
24 | node src/server.js
25 | ```
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "upload-multiple-files-mysql",
 3 |   "version": "1.0.0",
 4 |   "description": "Node.js upload images to MySQL database",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "node",
11 |     "upload",
12 |     "image",
13 |     "mysql"
14 |   ],
15 |   "author": "bezkoder",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "express": "^4.17.1",
19 |     "multer": "^1.4.2",
20 |     "mysql2": "^2.1.0",
21 |     "sequelize": "^5.21.7"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/resources/static/assets/tmp/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/nodejs-upload-image-mysql/21621043680623ad05b9b51c10e5260f29072692/resources/static/assets/tmp/logo.png


--------------------------------------------------------------------------------
/resources/static/assets/uploads/1588129738631-bezkoder-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bezkoder/nodejs-upload-image-mysql/21621043680623ad05b9b51c10e5260f29072692/resources/static/assets/uploads/1588129738631-bezkoder-logo.png


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const app = express();
 3 | const db = require("./src/models");
 4 | const initRoutes = require("./src/routes/web");
 5 | 
 6 | global.__basedir = __dirname;
 7 | 
 8 | app.use(express.urlencoded({ extended: true }));
 9 | initRoutes(app);
10 | 
11 | // db.sequelize.sync();
12 | db.sequelize.sync({ force: true }).then(() => {
13 |   console.log("Drop and re-sync db.");
14 | });
15 | 
16 | let port = 3000;
17 | app.listen(port, () => {
18 |   console.log(`Running at localhost:${port}`);
19 | });
20 | 


--------------------------------------------------------------------------------
/src/config/db.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   HOST: "localhost",
 3 |   USER: "root",
 4 |   PASSWORD: "123456",
 5 |   DB: "testdb",
 6 |   dialect: "mysql",
 7 |   pool: {
 8 |     max: 5,
 9 |     min: 0,
10 |     acquire: 30000,
11 |     idle: 10000
12 |   }
13 | };


--------------------------------------------------------------------------------
/src/controllers/home.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | const home = (req, res) => {
 4 |   return res.sendFile(path.join(`${__dirname}/../views/index.html`));
 5 | };
 6 | 
 7 | module.exports = {
 8 |   getHome: home
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/controllers/upload.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | 
 3 | const db = require("../models");
 4 | const Image = db.images;
 5 | 
 6 | const uploadFiles = async (req, res) => {
 7 |   try {
 8 |     console.log(req.file);
 9 | 
10 |     if (req.file == undefined) {
11 |       return res.send(`You must select a file.`);
12 |     }
13 | 
14 |     Image.create({
15 |       type: req.file.mimetype,
16 |       name: req.file.originalname,
17 |       data: fs.readFileSync(
18 |         __basedir + "/resources/static/assets/uploads/" + req.file.filename
19 |       ),
20 |     }).then((image) => {
21 |       fs.writeFileSync(
22 |         __basedir + "/resources/static/assets/tmp/" + image.name,
23 |         image.data
24 |       );
25 | 
26 |       return res.send(`File has been uploaded.`);
27 |     });
28 |   } catch (error) {
29 |     console.log(error);
30 |     return res.send(`Error when trying upload images: ${error}`);
31 |   }
32 | };
33 | 
34 | module.exports = {
35 |   uploadFiles,
36 | };
37 | 


--------------------------------------------------------------------------------
/src/middleware/upload.js:
--------------------------------------------------------------------------------
 1 | const multer = require("multer");
 2 | 
 3 | const imageFilter = (req, file, cb) => {
 4 |   if (file.mimetype.startsWith("image")) {
 5 |     cb(null, true);
 6 |   } else {
 7 |     cb("Please upload only images.", false);
 8 |   }
 9 | };
10 | 
11 | var storage = multer.diskStorage({
12 |   destination: (req, file, cb) => {
13 |     cb(null, __basedir + "/resources/static/assets/uploads/");
14 |   },
15 |   filename: (req, file, cb) => {
16 |     cb(null, `${Date.now()}-bezkoder-${file.originalname}`);
17 |   },
18 | });
19 | 
20 | var uploadFile = multer({ storage: storage, fileFilter: imageFilter });
21 | module.exports = uploadFile;
22 | 


--------------------------------------------------------------------------------
/src/models/image.model.js:
--------------------------------------------------------------------------------
 1 | module.exports = (sequelize, DataTypes) => {
 2 |   const Image = sequelize.define("image", {
 3 |     type: {
 4 |       type: DataTypes.STRING,
 5 |     },
 6 |     name: {
 7 |       type: DataTypes.STRING,
 8 |     },
 9 |     data: {
10 |       type: DataTypes.BLOB("long"),
11 |     },
12 |   });
13 | 
14 |   return Image;
15 | };
16 | 


--------------------------------------------------------------------------------
/src/models/index.js:
--------------------------------------------------------------------------------
 1 | const dbConfig = require("../config/db.config.js");
 2 | 
 3 | const Sequelize = require("sequelize");
 4 | const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
 5 |   host: dbConfig.HOST,
 6 |   dialect: dbConfig.dialect,
 7 |   operatorsAliases: false,
 8 | 
 9 |   pool: {
10 |     max: dbConfig.pool.max,
11 |     min: dbConfig.pool.min,
12 |     acquire: dbConfig.pool.acquire,
13 |     idle: dbConfig.pool.idle,
14 |   },
15 | });
16 | 
17 | const db = {};
18 | 
19 | db.Sequelize = Sequelize;
20 | db.sequelize = sequelize;
21 | 
22 | db.images = require("./image.model.js")(sequelize, Sequelize);
23 | 
24 | module.exports = db;
25 | 


--------------------------------------------------------------------------------
/src/routes/web.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const router = express.Router();
 3 | const homeController = require("../controllers/home");
 4 | const uploadController = require("../controllers/upload");
 5 | const upload = require("../middleware/upload");
 6 | 
 7 | let routes = (app) => {
 8 |   router.get("/", homeController.getHome);
 9 | 
10 |   router.post("/upload", upload.single("file"), uploadController.uploadFiles);
11 | 
12 |   return app.use("/", router);
13 | };
14 | 
15 | module.exports = routes;
16 | 


--------------------------------------------------------------------------------
/src/views/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Node.js upload images</title>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
11 |     />
12 |     <style>
13 |       div.preview-images > img {
14 |         width: 30%;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div class="container">
20 |       <div class="row">
21 |         <div class="col-sm-8 mt-3">
22 |           <h4>Node.js upload images - bezkoder.com</h4>
23 | 
24 |           <form
25 |             class="mt-4"
26 |             action="/upload"
27 |             method="POST"
28 |             enctype="multipart/form-data"
29 |           >
30 |             <div class="form-group">
31 |               <input
32 |                 type="file"
33 |                 name="file"
34 |                 id="input-files"
35 |                 class="form-control-file border"
36 |               />
37 |             </div>
38 |             <button type="submit" class="btn btn-primary">Submit</button>
39 |           </form>
40 |         </div>
41 |       </div>
42 |       <hr />
43 |       <div class="row">
44 |         <div class="col-sm-12">
45 |           <div class="preview-images"></div>
46 |         </div>
47 |       </div>
48 |     </div>
49 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
50 |     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
51 |     <script>
52 |       $(document).ready(function() {
53 |         let imagesPreview = function(input, placeToInsertImagePreview) {
54 |           if (input.files) {
55 |             let filesAmount = input.files.length;
56 |             for (i = 0; i < filesAmount; i++) {
57 |               let reader = new FileReader();
58 |               reader.onload = function(event) {
59 |                 $($.parseHTML("<img>"))
60 |                   .attr("src", event.target.result)
61 |                   .appendTo(placeToInsertImagePreview);
62 |               };
63 |               reader.readAsDataURL(input.files[i]);
64 |             }
65 |           }
66 |         };
67 |         $("#input-files").on("change", function() {
68 |           imagesPreview(this, "div.preview-images");
69 |         });
70 |       });
71 |     </script>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------