parent
000f713751
commit
e94c1eeb61
After Width: | Height: | Size: 3.8 KiB |
@ -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" } |
||||
) |
||||
}) |
||||
}) |
||||
}) |
@ -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> |
||||
|
Loading…
Reference in new issue