WIP - User can add an image to a quote request

cypress/integration/visitorCanRequestQuotes.feature.js

@@ -51,6 +51,7 @@ describe("Visitor can request quotes", () => {
         cy.get('[name="energy_consumption"]').type("10000");
         cy.get("[data-cy=button]").contains("Submit").click();
       });
+      cy.file_upload("img.jpeg", "#image-upload", "image/jpeg");
       cy.get("[data-cy=message]").should(
         "contain",
         "Form successfully submitted."

cypress/support/commands.js

@@ -1,25 +1,21 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+import 'cypress-file-upload'
+
+Cypress.Commands.add("file_upload", (file, element, type) => {
+  const selector = element;
+  const fixturePath = file;
+  cy.get(selector).then(subject =>
+    cy.window().then(win => 
+      cy
+        .fixture(fixturePath, "base64")
+        .then(Cypress.Blob.base64StringToBlob)
+        .then(blob => {
+          const el = subject[0]
+          const testFile = new win.File([blob], name, {type})
+          const dataTransfer = new win.DataTransfer()
+          dataTransfer.items.add(testFile);
+          el.files = dataTransfer.files;
+          cy.wrap(subject).trigger("change", { force: true })
+        })
+    )
+  )
+}) 

package.json

@@ -7,12 +7,14 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.20.0",
+    "cypress-file-upload": "^4.1.1",
     "final-form": "^4.20.1",
     "j-tockauth": "^1.2.7",
     "react": "^16.13.1",
     "react-async-script-loader": "^0.3.0",
     "react-dom": "^16.13.1",
     "react-final-form": "^6.5.2",
+    "react-images-upload": "^1.2.8",
     "react-places-autocomplete": "^7.3.0",
     "react-redux": "^7.2.1",
     "react-responsive": "^8.1.0",

src/components/QuotesPage.jsx

@@ -5,9 +5,19 @@ import TelephoneQuestion from "./mandatoryQuestions/TelephoneQuestion";
 import AddressQuestion from "./mandatoryQuestions/AddressQuestion";
 import axios from "axios";
 import { Form } from "react-final-form";
+import ImageUploader from "react-images-upload";
 
 const QuotesPage = () => {
   const [message, setMessage] = useState("");
+  const [photos, setPhotos] = useState([]);
+
+  const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(error);
+    });
 
   const onSubmit = async (event) => {
     event.preventDefault();
@@ -49,6 +59,7 @@ const QuotesPage = () => {
         roof_length: roof_length.value,
         fuse_size: fuse_size.value,
         energy_consumption: energy_consumption.value,
+        images: photos,
       };
 
       response = await axios.post("http://localhost:3000/api/v1/quotes", {
@@ -63,6 +74,15 @@ const QuotesPage = () => {
     }
   };
 
+  const onDrop = async (photo) => {
+    const encodedImages = [];
+    for (let image of photo) {
+      const encodedImage = await toBase64(image);
+      encodedImages.push(encodedImage);
+    }
+    setPhotos(encodedImages);
+  };
+
   return (
     <div id="quotesPage">
       <Form
@@ -120,6 +140,14 @@ const QuotesPage = () => {
                   }}
                 </>
               )}
+              <ImageUploader
+                withIcon={true}
+                onChange={onDrop}
+                imgExtension={[".jpg", ".gif", ".png", ".gif"]}
+                maxFileSize={5242880}
+                withPreview={true}
+                data-cy="image-upload"
+              />
             </form>
           );
         }}

yarn.lock

@@ -3835,6 +3835,13 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+cypress-file-upload@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-4.1.1.tgz#952713c8104ab7008de99c65bd63f74b244fe4df"
+  integrity sha512-tX6UhuJ63rNgjdzxglpX+ZYf/bM6PDhFMtt1qCBljLtAgdearqyfD1AHqyh59rOHCjfM+bf6FA3o9b/mdaX6pw==
+  dependencies:
+    mime "^2.4.4"
+
 cypress@4.11.0:
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.11.0.tgz#054b0b85fd3aea793f186249ee1216126d5f0a7e"
@@ -9546,6 +9553,19 @@ react-final-form@^6.5.2:
   dependencies:
     "@babel/runtime" "^7.12.1"
 
+react-flip-move@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-flip-move/-/react-flip-move-3.0.4.tgz#261f66101fbc305f9b7b28959c5cf8236413ca74"
+  integrity sha512-HyUVv9g3t/BS7Yz9HgrtYSWyRNdR2F81nkj+C5iRY675AwlqCLB5JU9mnZWg0cdVz7IM4iquoyZx70vzZv3Z8Q==
+
+react-images-upload@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/react-images-upload/-/react-images-upload-1.2.8.tgz#d1e993c50a0ca266aa7a9c7b7456167d80e9e6ab"
+  integrity sha512-d5mhAE0BfkLTlG5MLvKVw+q76LL8r5easgWW0TTBvXD8n6HXeLMZLwCuPiOibY1a3NRMXI4AnM1r34dqLOBjng==
+  dependencies:
+    react "^16.12.0"
+    react-flip-move "^3.0.4"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9695,7 +9715,7 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
-react@^16.13.1:
+react@^16.12.0, react@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==