Feature/#154115334 (#206)

* feature: use FormData to send file to api

[#154115334]

* feature: use multer to save upload picture

[#154115334]

* Minio-server and upload project image

* feature: upload picture to s3

[#154115334]

* feature: add timestamp to filename

[#154115334]

* feature: save imageUrl to database

[#154115334]

* feature: use project.imageUrl for project image

[#154115334]

* fix: allow reading image from s3 without credentials

[#154115334]

* style: replace require with import

[#154115334]

Author: TWHou

.env

@@ -2,4 +2,4 @@ export DB_USER=user
 export DB_PASS=pass
 export NODE_ENV=dev
 export DB_URL=127.0.0.1
-export DEBUG=Rollbar:*
+export DEBUG=Rollbar:*

client/actions/project/index.js

@@ -80,8 +80,10 @@ export default class ProjectActionCreator {
   }
 
   static async uploadImage (file, apiOptions) {
-    const url = await projectsApiClient.getPresignedUrlForProjectImage(apiOptions, file.name)
+    const filename = file.name.replace(/(\.[\w\d_-]+)$/i, Date.now() + '$1')
+    const url = await projectsApiClient.getPresignedUrlForProjectImage(apiOptions, filename)
     await projectsApiClient.uploadImage(apiOptions, url, file)
+    return filename
   }
 
   static createProject (projectName, causes, technologies, organization, file) {
@@ -91,9 +93,9 @@ export default class ProjectActionCreator {
       try {
         const state = getState()
         const apiOptions = apiOptionsFromState(state)
-        await ProjectActionCreator.uploadImage(file, apiOptions)
+        const filename = await ProjectActionCreator.uploadImage(file, apiOptions)
         await projectsApiClient.createProject(apiOptions, projectName, causes,
-          technologies, organization)
+          technologies, organization, filename)
         dispatch({type: actionTypes.CREATE_PROJECT_SUCCESS})
         dispatch(push('/'))
       } catch (e) {

client/api/projects.js

@@ -15,13 +15,13 @@ const projectsApiClient = {
     return apiRequest.get('/projects', apiOptions, query)
   },
 
-  async createProject (apiOptions, name, causes, technologies, organization) {
+  async createProject (apiOptions, name, causes, technologies, organization, imageUrl) {
     const options = {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ name, causes, technologies, organization })
+      body: JSON.stringify({ name, causes, technologies, organization, imageUrl })
     }
     return fetch('/api/projects/', options)
   },

client/components/Project/Project.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import Chip from 'material-ui/Chip'
 import {Link} from 'react-router-dom'
 import styles from './Project.scss'
+import logo from '../../images/logo.png'
 
 class Project extends Component {
   constructor (props) {
@@ -61,7 +62,7 @@ class Project extends Component {
     return (
       <div className={projectClasses}
         onClick={this.handleClick.bind(this)}>
-        <img className={styles.image} src={project.image || require('../../images/logo.png')} />
+        <img className={styles.image} src={project.imageUrl || logo }/>
         <div className={styles.projectContent}>
           <div className={styles.projectTitle}>
             <Link to={`/projects/${project.id}`}>{project.name}</Link>

client/components/UploadDropzone/UploadDropzone.scss

@@ -1,4 +1,4 @@
-@import '../../scss/partials/partials';
+@import '../../scss/partials/_partials';
 
 .dropzone {
   @extend %hover;

package.json

@@ -115,4 +115,4 @@
     ],
     "babel": "inherit"
   }
-}
+}

server/database/models/Project.js

@@ -8,6 +8,7 @@ const ProjectSchema = mongoose.Schema({
   name: String,
   role: String,
   email: String,
+  imageUrl: String,
   causes: [{
     type: String,
     enum: ['Animal', 'Environment', 'International NGO', 'Health', 'Education', 'Arts & Culture', 'Other']
@@ -29,6 +30,7 @@ ProjectSchema.methods.toJSON = function () {
     name: this.name,
     role: this.role,
     email: this.email,
+    imageUrl: this.imageUrl,
     causes: this.causes,
     technologies: this.technologies,
     applications: this.applications,

server/routes/controllers/projects.js

@@ -2,6 +2,9 @@ import bindFunctions from '../../lib/bindFunctions'
 import ProjectModel from '../../database/models/Project'
 import { NotFoundError, RequestError } from '../../lib/errors'
 import { presignedPutObject, createBucketIfNecessary } from '../../lib/minio'
+import { minioConfig } from '../../config'
+
+const { client } = minioConfig
 
 const projectsBucket = 'projects'
 
@@ -36,6 +39,7 @@ export default {
 
   async createProject (req, res, next) {
     const project = new this.Projects(req.body)
+    project.imageUrl = `${client.protocol}//${client.host}:${client.port}/${projectsBucket}/${project.imageUrl}`
     const newProject = await project.save()
 
     return res.status(200).json(newProject.toJSON())