Video-26-Upload-Product-Image-To-AWS-S3 (#63)

Author: basir

backend/config.js

@@ -7,4 +7,6 @@ export default {
   MONGODB_URL: process.env.MONGODB_URL || 'mongodb://localhost/amazona',
   JWT_SECRET: process.env.JWT_SECRET || 'somethingsecret',
   PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID || 'sb',
+  accessKeyId: process.env.accessKeyId || 'accessKeyId',
+  secretAccessKey: process.env.secretAccessKey || 'secretAccessKey',
 };

backend/routes/uploadRoute.js

@@ -1,5 +1,8 @@
 import express from 'express';
 import multer from 'multer';
+import multerS3 from 'multer-s3';
+import aws from 'aws-sdk';
+import config from '../config';
 
 const storage = multer.diskStorage({
   destination(req, file, cb) {
@@ -17,4 +20,23 @@ const router = express.Router();
 router.post('/', upload.single('image'), (req, res) => {
   res.send(`/${req.file.path}`);
 });
+
+aws.config.update({
+  accessKeyId: config.accessKeyId,
+  secretAccessKey: config.secretAccessKey,
+});
+const s3 = new aws.S3();
+const storageS3 = multerS3({
+  s3,
+  bucket: 'amazona-bucket',
+  acl: 'public-read',
+  contentType: multerS3.AUTO_CONTENT_TYPE,
+  key(req, file, cb) {
+    cb(null, file.originalname);
+  },
+});
+const uploadS3 = multer({ storage: storageS3 });
+router.post('/s3', uploadS3.single('image'), (req, res) => {
+  res.send(req.file.location);
+});
 export default router;

frontend/src/screens/ProductsScreen.js

@@ -81,7 +81,7 @@ function ProductsScreen(props) {
     bodyFormData.append('image', file);
     setUploading(true);
     axios
-      .post('/api/uploads', bodyFormData, {
+      .post('/api/uploads/s3', bodyFormData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },

package.json

@@ -4,13 +4,15 @@
   "description": "Demo : https://amazonaapp.herokuapp.com/",
   "main": "index.js",
   "dependencies": {
+    "aws-sdk": "^2.702.0",
     "body-parser": "^1.19.0",
     "dotenv": "^8.2.0",
     "eslint-plugin-react": "^7.19.0",
     "express": "^4.17.1",
     "jsonwebtoken": "^8.5.1",
     "mongoose": "^5.8.11",
-    "multer": "^1.4.2"
+    "multer": "^1.4.2",
+    "multer-s3": "^2.9.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",