feat(contact): init react-dropzone

package-lock.json

@@ -3178,6 +3178,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -7880,6 +7885,21 @@
         }
       }
     },
+    "file-selector": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
+      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
+      "requires": {
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "file-type": {
       "version": "12.4.2",
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
@@ -15450,6 +15470,16 @@
         "scheduler": "^0.20.1"
       }
     },
+    "react-dropzone": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.2.4.tgz",
+      "integrity": "sha512-EGSvK2CxFTuc28WxwuJCICyuYFX8b+sRumwU6Bs6sTbElV2HtQkT0d6C+HEee6XfbjiLIZ+Th9uji27rvo2wGw==",
+      "requires": {
+        "attr-accept": "^2.2.1",
+        "file-selector": "^0.2.2",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-error-overlay": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",

package.json

@@ -33,6 +33,7 @@
     "google-maps-react": "^2.0.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-dropzone": "^11.2.4",
     "react-helmet": "^6.1.0",
     "react-slick": "^0.27.13",
     "slick-carousel": "^1.8.1"

src/pages/contact.js

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { graphql } from "gatsby";
 import { Marker } from "google-maps-react";
+import { useDropzone } from "react-dropzone";
 import Layout from "../layout";
 import {
   Button,
@@ -22,15 +23,38 @@ import Envelope from "../icons/envelope.svg";
 import Phone from "../icons/phone.svg";
 import Team from "../icons/team.svg";
 
+const encode = data => {
+  const formData = new FormData();
+  Object.keys(data).forEach(k => {
+    formData.append(k, data[k]);
+  });
+  return formData;
+};
+
 export default function Index({ data }) {
   const [submitted, setSubmitted] = useState();
+  const [files, setFiles] = useState({});
+
+  const onDrop = useCallback(acceptedFiles => {
+    setFiles(acceptedFiles[0]);
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
   const handleSubmit = e => {
     e.preventDefault();
-    fetch("/contact", {
-      method: "POST",
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      body: new FormData(e.target)
-    })
+    const body = encode({
+      "form-name": "contact",
+      name: e.target.name.value,
+      email: e.target.email.value,
+      telephone: e.target.telephone.value,
+      start: e.target.start.value,
+      stage: e.target.stage.value,
+      status: e.target.status.value,
+      message: e.target.message.value,
+      files
+    });
+    console.log(body);
+
+    fetch("/contact", { method: "POST", body })
       .then(res => {
         if (res.status !== 200) {
           console.log("error", res);
@@ -215,8 +239,16 @@ export default function Index({ data }) {
                     Describe what needs to be done
                   </Label>
                   <InputText id="contact-message" name="message" textArea />
-                  <Label htmlFor="contact-files">Add photos</Label>
-                  <input id="contact-files" name="files" type="file" multiple />
+                  <div {...getRootProps()}>
+                    <input name="files" {...getInputProps()} />
+                    {isDragActive ? (
+                      <Text>Drop the images here</Text>
+                    ) : (
+                      <Text>
+                        Drop your images here, or click to select the files
+                      </Text>
+                    )}
+                  </div>
                   <Button type="submit">Submit</Button>
                 </form>
               </>