add

Backend/models/shop/index.js

@@ -35,9 +35,6 @@ module.exports = db.sequelize.define("shops", {
   facebook: {
     type: Sequelize.TEXT
   },
-  image:{
-    type: Sequelize.TEXT
-  },
   userId: {
     type: Sequelize.INTEGER,
     references: 'users',

Backend/models/shopimage/index.js

@@ -2,18 +2,22 @@ const Sequelize = require("sequelize");
 const db = require("../../db");
 
 module.exports = db.sequelize.define("shopimages", {
-  id: {
+  image_id: {
     type: Sequelize.INTEGER,
     primaryKey: true,
     autoIncrement: true
   },
+  shop_id: {
+    type: Sequelize.INTEGER,
+    primaryKey: true,
+    references: 'shops',
+    referencesKey: 'id'
+  },
 
   image: {
     type: Sequelize.TEXT
   },
-  shop: {
-    type: Sequelize.INTEGER,
-    references: 'shops',
-    referencesKey: 'id'
+  type: {
+    type: Sequelize.STRING
   }
 });

Backend/multer.js

+const multer = require('multer');
+
+const storage = multer.memoryStorage();
+
+module.exports = multer({ storage });

Backend/package-lock.json

@@ -68,6 +68,11 @@
         "picomatch": "^2.0.4"
       }
     },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -151,6 +156,20 @@
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
     },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      }
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
@@ -246,6 +265,46 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "configstore": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz",
@@ -283,6 +342,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
     "cors": {
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@@ -355,6 +419,15 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      }
+    },
     "dot-prop": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
@@ -814,6 +887,11 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -989,6 +1067,21 @@
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+        }
+      }
+    },
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
@@ -1007,6 +1100,21 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
     "mysql2": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-2.1.0.tgz",
@@ -1221,6 +1329,11 @@
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
       "dev": true
     },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -1274,6 +1387,17 @@
         "strip-json-comments": "~2.0.1"
       }
     },
+    "readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
     "readdirp": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
@@ -1473,6 +1597,11 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -1501,6 +1630,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "strip-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
@@ -1583,6 +1717,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
     "undefsafe": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
@@ -1651,6 +1790,11 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -1714,6 +1858,11 @@
       "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=",
       "dev": true
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",

Backend/package.json

@@ -9,6 +9,7 @@
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "jsonwebtoken": "^8.5.1",
+    "multer": "^1.4.2",
     "mysql2": "^2.1.0",
     "sequelize": "^5.21.3",
     "util": "^0.12.1"

Backend/routers/index.js

@@ -4,11 +4,13 @@ const shop = require("./shop");
 const promotion = require("./promotion");
 const review = require("./review");
 const booking = require("./booking");
+const storageshop = require("./shopimage")
 module.exports = {
   auth,
   list,
   shop,
   promotion,
   review,
-  booking
+  booking,
+  storageshop
 };

Backend/routers/shopimage/index.js

+const express = require('express');
+const router = express.Router();
+
+const storage = require('../../multer');
+const ShopImage = require('../../models/shopimage');
+
+router.post('/upload/shop/:shopId', storage.single('image'), async (req, res) => {
+    const images = req.files;
+    for (let i = 0; i < images.length; i++) {
+        await ShopImage.create({ 
+            shop_id: req.params.shopId,
+            image: images[i].buffer,
+            type: images[i].mimetype
+        });
+    }
+    res.send('success')
+})
+//get file
+router.get('/file/Shop/:imageId', async (req, res) => {
+    const existingImage = await ShopImage.findOne({
+        where: {
+            image_id: req.params.imageId
+        }
+    })
+    const url = existingImage.image.toString('base64');
+    res.status(200).send(url);
+})
+

Backend/server.js

@@ -15,6 +15,7 @@ app.use("/api/shop", router.shop);
 app.use("/api/promotion", router.promotion);
 app.use("/api/review", router.review);
 app.use("/api/booking", router.booking);
+app.use("/api/storageshop", router.storageshop);
 
 app.listen(port, () => {
   console.log("Express server listening on port " + port);

b_beauty_project/src/views/DataShopPage/Datashop/index.js

@@ -4,6 +4,11 @@ import compose from "recompose/compose";
 import { withRouter } from "react-router-dom";
 import {
   Input,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
   InputLabel,
   InputAdornment,
   FormControl,
@@ -25,6 +30,7 @@ import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
 import BusinessIcon from "@material-ui/icons/Business";
 import EditIcon from "@material-ui/icons/Edit";
 import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
+import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
 import PostAddIcon from "@material-ui/icons/PostAdd";
 import CancelIcon from "@material-ui/icons/Cancel";
 import axios from "axios";
@@ -90,9 +96,19 @@ class Datashop extends Component {
     map: "",
     facebook: "",
     type: "",
-    promotion: ""
+    promotion: "",
+    open: false
+  };
+  handleClickOpen = () => {
+    this.setState({
+      open: true
+    });
+  };
+  handleClose = () => {
+    this.setState({
+      open: false
+    });
   };
-
   handleChange = event => {
     console.log("name : ", event.target.name);
     console.log("value : ", event.target.value);
@@ -121,7 +137,9 @@ class Datashop extends Component {
       map,
       facebook,
       type,
-      promotion
+      promotion,
+      open,
+      image
     } = this.state;
     return (
       <div className="row center">
@@ -139,7 +157,74 @@ class Datashop extends Component {
 
               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRGzUPvW-KAdZI6KiIyh-HHSKtqKRGSWcP3vDqHUd2Sn2F3SHwr" />
             </div>
+
             <div className="row center">
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={this.handleClickOpen}
+              >
+                <AddAPhotoIcon />
+                เพิ่มรูปภาพร้าน
+              </Button>
+              <Dialog
+                open={open}
+                onClose={this.handleClose}
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+              >
+                <DialogTitle id="alert-dialog-title">
+                  {"เพิ่มรูปภาพ"}
+                </DialogTitle>
+                <DialogContent>
+                  <TextField
+                    className={classes.margin}
+                    id="outlined-file-input"
+                    label="เพิ่มรูปภาพ"
+                    type="file"
+                    autoComplete="current-password"
+                    variant="outlined"
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <AddPhotoAlternateIcon />
+                        </InputAdornment>
+                      )
+                    }}
+                  />
+                </DialogContent>
+                <DialogActions>
+                  <Button onClick={this.handleClose} color="primary">
+                    ยกเลิก
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      axios
+                        .post(
+                          "http://localhost:9000/api/storageshop//upload/shop/:5",
+                          {
+                            image: image,
+                            type: type
+                          }
+                        )
+                        .then(response => {
+                          console.log("เพิ่มรูปภาพสำเร็จ", response);
+                          alert("เพิ่มรูปภาพสำเร็จ");
+                         
+                        })
+                        .catch(error => {
+                          console.log(error);
+                        });
+                      
+                    }}
+                    color="primary"
+                    autoFocus
+                  >
+                    ยืนยัน
+                  </Button>
+                </DialogActions>
+              </Dialog>
+              &nbsp; &nbsp; &nbsp;
               <Button variant="outlined" color="primary">
                 <PhotoCameraIcon />
                 แก้ไขรูปภาพร้าน
@@ -197,7 +282,6 @@ class Datashop extends Component {
                 }}
                 onChange={this.handleChange}
               />
-             
             </div>
             <br />
             <div>
@@ -252,7 +336,6 @@ class Datashop extends Component {
                 }}
                 onChange={this.handleChange}
               />
-             
             </div>
             <br />
             <div>
@@ -350,7 +433,7 @@ class Datashop extends Component {
                     axios
                       .post("http://localhost:9000/api/shop/add", {
                         name: name,
-                        nameeng:nameeng,
+                        nameeng: nameeng,
                         timeopen: timeopen,
                         timeclose: timeclose,
                         tel: tel,