Merge pull request #11 from br-ndt/upload-images

add upload-image feature to addNewAttraction form.

client/package.json

@@ -36,6 +36,7 @@
     "prop-types": "~15.7",
     "react": "~16.13",
     "react-dom": "~16.13",
+    "react-dropzone": "^11.3.1",
     "react-hot-loader": "^4.12.21",
     "react-router-dom": "5.2",
     "redbox-react": "~1.6",

client/src/components/AttractionShowPage.js

@@ -10,6 +10,7 @@ const AttractionShowPage = (props) => {
   const [attraction, setAttraction] = useState({
     name: "",
     description: "",
+    image: "",
     reviews: [],
   });
   const [errors, setErrors] = useState({});
@@ -129,6 +130,8 @@ const AttractionShowPage = (props) => {
 
   const attractionDescription = attraction.description ? <h2>{attraction.description}</h2> : null;
 
+  const attractionImage = attraction.image ? <img src={attraction.image} /> : null;
+
   const reviewSection = reviewTiles.length ? (
     <>
       <h4>{attraction.name} Reviews:</h4>
@@ -146,6 +149,7 @@ const AttractionShowPage = (props) => {
     <div className="callout">
       {attractionName}
       {attractionDescription}
+      {attractionImage}
       {reviewForm}
       {errorList}
       {reviewSection}

client/src/components/AttractionsList.js

@@ -29,7 +29,7 @@ const AttractionsList = (props) => {
   }, []);
 
   const attractionTileComponents = attractions.map((attractionObject) => {
-    return <AttractionTile key={attractionObject.id} {...attractionObject} />;
+    return <AttractionTile key={`attractionTile-${attractionObject.id}`} {...attractionObject} />;
   });
 
   const attractionForm = props.user ? (

client/src/components/DropDownSelect.js

@@ -10,8 +10,13 @@ const DropDownSelect = (props) => {
   });
 
   return (
-    <select value={props.value} name={props.listName} id={`dropdown-${props.listName}`} onChange={props.onChange}>
-      <option value={0}></option>
+    <select
+      value={props.value}
+      name={props.listName}
+      id={`dropdown-${props.listName}`}
+      onChange={props.onChange}
+    >
+      <option value={0}>(Enter Location)</option>
       {options}
     </select>
   );

client/src/components/NewAttractionForm.js

@@ -2,15 +2,20 @@ import React, { useState, useEffect } from "react";
 import translateServerErrors from "./../services/translateServerErrors.js";
 import DropDownSelect from "./DropDownSelect.js";
 import ErrorList from "./layout/ErrorList";
+import Dropzone from "react-dropzone";
 
 const NewAttractionForm = (props) => {
   const [locations, setLocations] = useState([]);
   const [newAttraction, setNewAttraction] = useState({
     name: "",
     description: "",
+    image: {},
     locationId: 0,
   });
   const [errors, setErrors] = useState({});
+  const [uploadedImage, setUploadedImage] = useState({
+    preview: "",
+  });
 
   useEffect(() => {
     fetchLocations();
@@ -42,10 +47,15 @@ const NewAttractionForm = (props) => {
     else setErrors({});
 
     try {
+      const body = new FormData();
+      body.append("name", newAttraction.name);
+      body.append("description", newAttraction.description);
+      body.append("image", newAttraction.image);
+      body.append("locationId", newAttraction.locationId);
       const response = await fetch(`/api/v1/locations/${newAttraction.locationId}/attractions`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(newAttraction),
+        headers: { Accept: "image/jpeg" },
+        body: body,
       });
       if (!response.ok) {
         if (response.status === 422) {
@@ -74,12 +84,27 @@ const NewAttractionForm = (props) => {
     postAttraction();
   };
 
+  const handleImageUpload = (acceptedImage) => {
+    setNewAttraction({
+      ...newAttraction,
+      image: acceptedImage[0],
+    });
+
+    setUploadedImage({
+      preview: URL.createObjectURL(acceptedImage[0]),
+    });
+  };
+
   const clearForm = () => {
     setNewAttraction({
       name: "",
       description: "",
+      image: {},
       locationId: 0,
     });
+    setUploadedImage({
+      preview: "",
+    });
   };
 
   return (
@@ -100,7 +125,33 @@ const NewAttractionForm = (props) => {
           onChange={handleInputChange}
           value={newAttraction.description}
         />
-        <DropDownSelect listItems={locations} listName="locationId" onChange={handleInputChange} value={newAttraction.locationId}/>
+        <Dropzone onDrop={handleImageUpload}>
+          {({ getRootProps, getInputProps }) => (
+            <section>
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                <div className="button-group">
+                  <input
+                    className="button"
+                    type="add"
+                    onChange={handleInputChange}
+                    value="Add Image"
+                  />
+                  <div>
+                    <ul>(Click to add, or drag and drop)</ul>
+                  </div>
+                </div>
+              </div>
+            </section>
+          )}
+        </Dropzone>
+        <img src={uploadedImage.preview} />
+        <DropDownSelect
+          listItems={locations}
+          listName="locationId"
+          onChange={handleInputChange}
+          value={newAttraction.locationId}
+        />
         <input className="button" type="submit" />
       </form>
     </div>

server/.env.example

@@ -1 +1,4 @@
 SESSION_SECRET=""
+AWS_ACCESS_KEY=""
+AWS_SECRET_KEY=""
+S3_BUCKET_DEVELOPMENT=""

server/package.json

@@ -48,13 +48,17 @@
     "webpack-hot-middleware": "^2.25.1"
   },
   "dependencies": {
+    "aws-sdk": "^2.842.0",
     "bcrypt": "^5.0.1",
     "body-parser": "^1.20.0",
     "cookie-session": "^2.0.0",
+    "dropzone": "^6.0.0-beta.2",
     "express": "^4.18.1",
     "express-handlebars": "^5.2.0",
     "knex": "^2.0.0",
     "morgan": "^1.10.0",
+    "multer": "^1.4.2",
+    "multer-s3": "^2.9.0",
     "objection": "^3.0.1",
     "objection-unique": "^1.2.2",
     "passport": "^0.5.2",

server/src/config.js

@@ -2,9 +2,23 @@ import "./boot.js";
 import getNodeEnv from "./config/getNodeEnv.js";
 import getDatabaseUrl from "./config/getDatabaseUrl.cjs";
 
-export default {
+const development = {
+  awsAccess: { key: process.env.AWS_ACCESS_KEY },
+  awsSecret: { key: process.env.AWS_SECRET_KEY },
+  s3Bucket: { name: process.env.S3_BUCKET_DEVELOPMENT },
+  databaseUrl: getDatabaseUrl(getNodeEnv()),
   nodeEnv: getNodeEnv(),
   session: { secret: process.env.SESSION_SECRET },
-  databaseUrl: getDatabaseUrl(getNodeEnv()),
   web: { host: process.env.HOST || "0.0.0.0", port: process.env.PORT || 3000 }
-};
+}
+
+const test = { ...development }
+
+const production = {
+  ...development,
+  s3Bucket: { name: process.env.S3_BUCKET_PRODUCTION }
+}
+
+const config = { development, test, production }
+
+export default config[getNodeEnv()]

server/src/db/migrations/20220503141649_createAttractions.cjs

@@ -10,6 +10,7 @@ exports.up = async (knex) => {
     table.bigIncrements("id");
     table.string("name").notNullable();
     table.text("description");
+    table.string("image")
     table.timestamp("createdAt").notNullable().defaultTo(knex.fn.now());
     table.timestamp("updatedAt").notNullable().defaultTo(knex.fn.now());
   });

server/src/models/Attraction.js

@@ -12,6 +12,7 @@ class Attraction extends Model {
       properties: {
         name: { type: "string", minLength: 1 },
         description: { type: "string" },
+        image: { type: "string" },
         locationId: { type: ["string", "integer"] },
       },
     };

server/src/routes/api/v1/locationAttractionsRouter.js

@@ -3,17 +3,18 @@ import express from "express";
 import cleanUserInput from "../../../services/cleanUserInput.js";
 import { ValidationError } from "objection";
 import { Attraction } from "../../../models/index.js";
+import uploadImage from "../../../services/uploadImage.js";
 
 const locationAttractionsRouter = express.Router({ mergeParams: true });
 
-locationAttractionsRouter.post("/", async (req, res) => {
+locationAttractionsRouter.post("/", uploadImage.single("image"), async (req, res) => {
   const { name, description } = cleanUserInput(req.body);
-  const { id } = req.params;
   try {
     const newAttraction = await Attraction.query().insertAndFetch({
       name,
       description,
-      locationId: id,
+      image: req.file.location,
+      locationId: req.params.id,
     });
     return res.status(201).json({ attraction: newAttraction });
   } catch (error) {

server/src/services/uploadImage.js

@@ -0,0 +1,26 @@
+import AWS from "aws-sdk"
+import multer from "multer"
+import multerS3 from "multer-s3"
+
+import config from "../config.js"
+
+AWS.config.update({
+  accessKeyId: config.awsAccess.key,
+  secretAccessKey: config.awsSecret.key,
+  region: "us-east-1"
+})
+
+const s3 = new AWS.S3()
+
+const uploadImage = multer({
+  storage: multerS3({
+    s3: s3,
+    bucket: "trip-production",
+    acl: "public-read",
+    key: function (req, file, cb) {
+      cb(null, Date.now().toString())
+    }
+  })
+})
+
+export default uploadImage