add dropzone

client/cypress/integration/upload.js

@@ -0,0 +1,19 @@
+/// <reference types="Cypress" />
+
+describe("upload route should", () => {
+    it.only("handle one file upload", () => {
+        cy.visit("/")
+        cy.contains("Drop files")
+
+        cy.fixture("logos/mcdonald.png", "base64").then(fileContent => {
+            cy.get('[cy="dropzone"]').upload(
+                {
+                    fileContent,
+                    fileName: "mcdonald.png",
+                    mimeType: "image/png",
+                },
+                { subjectType: "drag-n-drop" }
+            )
+        })
+    })
+})

client/cypress/support/commands.js

@@ -23,3 +23,4 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+import "cypress-file-upload"

client/package-lock.json

@@ -1404,6 +1404,12 @@
 				}
 			}
 		},
+		"cypress-file-upload": {
+			"version": "3.5.0",
+			"resolved": "https://registry.npmjs.org/cypress-file-upload/-/cypress-file-upload-3.5.0.tgz",
+			"integrity": "sha512-MgrsP4C2pUMvHqixH33OtXHNKkwQZV6ny0fu+APDTEP9O/uuKFh3sYcnPNU6XGfuC85/RmqVNw21ZQyyT+S5IQ==",
+			"dev": true
+		},
 		"dashdash": {
 			"version": "1.14.1",
 			"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -1442,6 +1448,11 @@
 			"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
 			"dev": true
 		},
+		"dropzone": {
+			"version": "5.5.1",
+			"resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.5.1.tgz",
+			"integrity": "sha512-3VduRWLxx9hbVr42QieQN25mx/I61/mRdUSuxAmDGdDqZIN8qtP7tcKMa3KfpJjuGjOJGYYUzzeq6eGDnkzesA=="
+		},
 		"ecc-jsbn": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",

client/package.json

@@ -13,6 +13,7 @@
     },
     "dependencies": {
         "compression": "^1.7.1",
+        "dropzone": "^5.5.1",
         "graphql-request": "^1.8.2",
         "polka": "^1.0.0-next.7",
         "sirv": "^0.4.0"
@@ -25,6 +26,7 @@
         "@babel/runtime": "^7.0.0",
         "@types/just-throttle": "^1.1.0",
         "cypress": "^3.6.1",
+        "cypress-file-upload": "^3.5.0",
         "npm-run-all": "^4.1.5",
         "rollup": "^1.12.0",
         "rollup-plugin-babel": "^4.0.2",

client/src/routes/index.svelte

@@ -1,20 +1,35 @@
-<svelte:head>
-    <title>Sapper project template</title>
-</svelte:head>
-
-<p>
-    <strong>
-        Try editing this file (src/routes/index.svelte) to test live reloading.
-    </strong>
-</p>
-
-<style>
-    p {
-        text-align: center;
-        margin: 0 auto;
-    }
-
-    p {
-        margin: 1em auto;
-    }
-</style>
+<script>
+    import { onMount } from "svelte"
+    let dz
+
+    onMount(async () => {
+        const dropzone = await import("dropzone")
+        dz = new dropzone.default("div#dropzone", {
+            url: "http://localhost:4000/graphql",
+            autoProcessQueue: true,
+        })
+
+        dz.on("sending", (file, xhr, data) => {
+            data.append(
+                "operations",
+                `{ "query": "mutation ($file: Upload!) { uploadFigure(file: $file)}", "variables": { "file": null } }`
+            )
+            data.append("map", `{ "file": ["variables.file"] }`)
+        })
+    })
+</script>
+
+<div id="dropzone" class="dropzone" cy="dropzone" />
+
+<style>
+    .dropzone {
+        height: 300px;
+        background: #fdfdfd;
+        border-radius: 5px;
+        border: 2px dashed #ff3e00;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all 300ms ease-out;
+    }
+</style>