Update for file-upload

README.md

@@ -18,9 +18,23 @@ server/
   public/
   routes/
   package.json
+.gitignore
 package.json
+README.md
 ```
 
+### Files to add
+
+You should have a `server/.env` file, with for example the following values:
+```
+CLOUDINARY_CLOUD_NAME=......
+CLOUDINARY_API_KEY=......
+CLOUDINARY_API_SECRET=......
+JWT_SECRET=......
+MONGODB_URI=......
+```
+
+
 ## Commands
 
 **To download the boilerplate and link it with your GitHub project**
@@ -88,7 +102,7 @@ So now you can go to
 ### `server/routes/users.js`
 
 - `router.get('/')`: Route to get all users
-- `router.post('/picture-one-user')`: Route to add a picture on one user with Cloudinary
+- `router.post('/first-user/pictures')`: Route to add a picture on one user with Cloudinary
 
 <!-- TODO: give instructions for Cloudinary -->
 <!-- TODO: give instructions for route guards -->

client/src/api.js

@@ -14,9 +14,9 @@ export default {
 
   getCountries() {
     return service
-    .get('/countries')
-    .then(res => res.data)
-    .catch(errHandler);
+      .get('/countries')
+      .then(res => res.data)
+      .catch(errHandler);
   },
 
   postCountries(data) {
@@ -47,7 +47,6 @@ export default {
         password,
       })
       .then(res => {
-        console.log("DEBUG res", res)
         const { data } = res;
         localStorage.setItem('user', JSON.stringify(data));
         axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.token;
@@ -74,5 +73,19 @@ export default {
 
   isLoggedIn() {
     return localStorage.getItem('user') != null
-  }
+  },
+
+
+  addPicture(file) {
+    const formData = new FormData();
+    formData.append("picture", file)
+    return service
+      .post('/users/first-user/pictures', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      })
+      .then(res => res.data)
+      .catch(errHandler);
+  },
 };

server/app.js

@@ -1,3 +1,5 @@
+require('dotenv').config()
+
 const express = require('express');
 const path = require('path');
 const favicon = require('serve-favicon');
@@ -7,13 +9,14 @@ const cors = require('cors');
 const passport = require('passport');
 const { Strategy, ExtractJwt } = require("passport-jwt");
 
-const config = require("./config");
+const config = require("./configs/index");
 var User = require('./models/user');
 var authRoutes = require('./routes/auth');
 var countriesRoutes = require('./routes/countries');
 var usersRoutes = require('./routes/users');
 
 require('./configs/database');
+require('./configs/cloudinary');
 
 
 const app = express();

server/configs/cloudinary.js

@@ -0,0 +1,7 @@
+const cloudinary = require("cloudinary");
+
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET
+});

server/configs/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+  // This secret should be in an environment variable instead
+  jwtSecret: process.env.JWT_SECRET || 'MyS3cr3tK3Y',
+  jwtSession: {
+    session: false,
+  },
+};

server/routes/auth.js

@@ -3,7 +3,7 @@ const router = express.Router();
 const User = require('../models/user');
 const jwt = require('jwt-simple');
 const passport = require('passport');
-const config = require('../config');
+const config = require('../configs/index');
 
 
 router.post('/signup', (req, res, next) => {

server/routes/users.js

@@ -2,7 +2,7 @@ const express = require('express');
 const router = express.Router();
 const User = require('../models/user');
 const passport = require('passport');
-const config = require('../config');
+const config = require('../configs/index');
 
 const cloudinary = require('cloudinary');
 const cloudinaryStorage = require('multer-storage-cloudinary');
@@ -27,17 +27,18 @@ router.get('/', (req, res, next) => {
 
 // Route to add a picture on one user with Cloudinary
 // To perform the request throw Postman, you need
-// - Endpoint: POST http://localhost:3030/api/users/picture
+// - Endpoint: POST http://localhost:3030/api/first-user/users/pictures
 // - Select: Body > form-data
 // - Put as key: picture (and select "File")
 // - Upload your file
 // To perform the request in HTML:
-//   <form method="post" enctype="multipart/form-data" action="http://localhost:3030/api/users/picture">
+//   <form method="post" enctype="multipart/form-data" action="http://localhost:3030/api/users/first-user/pictures">
 //     <input type="file" name="picture" />
 //     <input type="submit" value="Upload" />
 //   </form>
-router.post('/picture-one-user', parser.single('picture'), (req, res, next) => {
-  User.findOneAndUpdate({}, {pictureUrl: req.file.url })
+router.post('/first-user/pictures', parser.single('picture'), (req, res, next) => {
+  console.log('DEBUG req.file', req.file);
+  User.findOneAndUpdate({}, { pictureUrl: req.file.url })
     .then(() => {
       res.json({
         success: true,