Video-24-Upload-Image-Local-Server (#62)

Author: basir

README.md

@@ -179,9 +179,50 @@ This part shows list of reviews by users for each products. also it provides a f
 29. save review in product.reviews
 30. update avg rating
 
-### Part 25- Upload images
-
-Admin shoud be able to uploads photos from their computer. This section teaches this feature.
+### Part 25- Upload Product Images On Local Server
+
+Admin shoud be able to uploads photos from their computer. This section is about uploading images on local server ans aws s3 cloud server.
+
+1. npm install multer
+2. routes/uploadRoute.js
+3. import express and multer
+4. create disk storage with Date.now().jpg as filename
+5. set upload as multer({ storage })
+6. router.post('/', upload.single('image'))
+7. return req.file.path
+8. server.js
+9. app.use('/api/uploads',uploadRoute)
+10. ProductsScreen.js
+11. create state hook for uploading
+12. create input image file and onChange handler
+13. define handleUploadImage function
+14. prepare file for upload
+15. axios post file as multipart/form-data
+16. set image and set uploading
+17. check result
+
+### Part 26- Upload Product Images On AWS S3
+
+This section is about uploading images amazon aws s3 cloud server.
+
+1. create aws account
+2. open https://s3.console.aws.amazon.com
+3. create public bucket as amazona
+4. create api key and secret
+5. past it into .env as accessKeyId and secretAccessKey
+6. move dotenv to config.js
+7. add accessKeyId and secretAccessKey to config.js
+8. npm install aws-sdk multer-s3
+9. routes/uploadRoute.js
+10. set aws.config.update to config values
+11. create s3 from new aws.S3()
+12. create storageS3 from multerS3 by setting s3, bucket and acl
+13. set uploadS3 as multer({ storage: storageS3 })
+14. router.post('/s3', uploadS3.single('image'))
+15. return req.file.location
+16. ProductsScreen.js
+17. on handleUploadImage set axios.post('api/uploads/s3')
+18. check result on website and s3
 
 ## Summary
 

backend/routes/uploadRoute.js

@@ -0,0 +1,20 @@
+import express from 'express';
+import multer from 'multer';
+
+const storage = multer.diskStorage({
+  destination(req, file, cb) {
+    cb(null, 'uploads/');
+  },
+  filename(req, file, cb) {
+    cb(null, `${Date.now()}.jpg`);
+  },
+});
+
+const upload = multer({ storage });
+
+const router = express.Router();
+
+router.post('/', upload.single('image'), (req, res) => {
+  res.send(`/${req.file.path}`);
+});
+export default router;

backend/server.js

@@ -6,28 +6,32 @@ import config from './config';
 import userRoute from './routes/userRoute';
 import productRoute from './routes/productRoute';
 import orderRoute from './routes/orderRoute';
+import uploadRoute from './routes/uploadRoute';
 
 const mongodbUrl = config.MONGODB_URL;
-mongoose.connect(mongodbUrl, {
-  useNewUrlParser: true,
-  useUnifiedTopology: true,
-  useCreateIndex: true,
-}).catch((error) => console.log(error.reason));
-
+mongoose
+  .connect(mongodbUrl, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+    useCreateIndex: true,
+  })
+  .catch((error) => console.log(error.reason));
 
 const app = express();
 app.use(bodyParser.json());
-
+app.use('/api/uploads', uploadRoute);
 app.use('/api/users', userRoute);
 app.use('/api/products', productRoute);
 app.use('/api/orders', orderRoute);
 app.get('/api/config/paypal', (req, res) => {
   res.send(config.PAYPAL_CLIENT_ID);
 });
-
+app.use('/uploads', express.static(path.join(__dirname, '/../uploads')));
 app.use(express.static(path.join(__dirname, '/../frontend/build')));
 app.get('*', (req, res) => {
   res.sendFile(path.join(`${__dirname}/../frontend/build/index.html`));
 });
 
-app.listen(config.PORT, () => { console.log('Server started at http://localhost:5000'); });
+app.listen(config.PORT, () => {
+  console.log('Server started at http://localhost:5000');
+});