image uploader working

package.json

@@ -7,11 +7,13 @@
     "mapbox-gl": "^1.2.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-dropzone": "^10.1.7",
     "react-images-upload": "^1.2.7",
     "react-map-gl": "^5.0.7",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
-    "reactstrap": "^8.0.1"
+    "reactstrap": "^8.0.1",
+    "superagent": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/applicationViews.js

@@ -9,7 +9,7 @@ import loginManager from "./modules/loginManager";
 import IssueEditForm from "./issues/issueEditForm";
 import IssueForm from "./issues/newIssueForm"
 import "./issues/issues.css";
-import Image from "./map/map"
+import Image from "./imgUpload/imgUpload"
 import "bootstrap/dist/css/bootstrap.min.css";
 
 
@@ -108,7 +108,7 @@ export default class ApplicationViews extends Component {
         />
         <Route
           exact
-          path="/map"
+          path="/imgUpload"
           render={props => {
             if (this.isAuthenticated()) {
               return (

src/components/imgUpload/imgUpload.js

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import Dropzone from "react-dropzone";
+import request from "superagent";
+
+const CLOUDINARY_UPLOAD_PRESET = "uploadCapstone";
+const CLOUDINARY_UPLOAD_URL =
+  "https://api.cloudinary.com/v1_1/dqwaphhqv/image/upload";
+
+class Image extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      uploadedFileCloudinaryUrl: ""
+    };
+  }
+  onImageDrop(files) {
+    this.setState({
+      uploadedFile: files[0]
+    });
+
+    this.handleImageUpload(files[0]);
+  }
+  handleImageUpload(file) {
+    let upload = request
+      .post(CLOUDINARY_UPLOAD_URL)
+      .field("upload_preset", CLOUDINARY_UPLOAD_PRESET)
+      .field("file", file);
+
+    upload.end((err, response) => {
+      if (err) {
+        console.error(err);
+      }
+
+      if (response.body.secure_url !== "") {
+        this.setState({
+          uploadedFileCloudinaryUrl: response.body.secure_url
+        });
+      }
+    });
+  }
+
+  render() {
+    return (
+    <React.Fragment>
+    <div>
+      <div className="FileUpload">
+        <Dropzone
+          onDrop={this.onImageDrop.bind(this)}
+          accept="image/*"
+          multiple={false}
+        >
+          {({ getRootProps, getInputProps }) => {
+            return (
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+                {
+                  <p>
+                    Try dropping some files here, or click to select files to
+                    upload.
+                  </p>
+                }
+              </div>
+            );
+          }}
+        </Dropzone>
+      </div>
+
+      <div>
+        {this.state.uploadedFileCloudinaryUrl === "" ? null : (
+          <div>
+            <p>{this.state.uploadedFile.name}</p>
+            <img src={this.state.uploadedFileCloudinaryUrl} />
+          </div>
+        )}
+      </div>
+    </div>
+    </React.Fragment>
+    )
+    }
+
+  }
+
+
+
+export default Image;

src/components/nav/navbar.js

@@ -18,8 +18,8 @@ class NavBar extends Component {
             </Link>
           </li>
           <li className="nav-item">
-            <Link className="nav-link" to="/map">
-              Mappie
+            <Link className="nav-link" to="/imgUpload">
+              Upload Image
             </Link>
           </li>
         </ul>