Create Dropzone

src/lib/Dropzone.svelte

@@ -0,0 +1,63 @@
+<script>
+  export let files;
+  export let acceptedFiles;
+  export let onKeydown;
+  export let onClick;
+  export let onDrop;
+  export let onChange;
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  id="dropzone"
+  tabindex={0}
+  on:keydown={onKeydown}
+  on:click={onClick}
+  on:dragover|preventDefault|stopPropagation
+  on:drop|preventDefault|stopPropagation={onDrop}
+>
+  <label id="file-label" for="file-input"
+    >Drag and drop files here or click to upload.</label
+  >
+  <input
+    id="file-input"
+    type="file"
+    name="files[]"
+    accept={acceptedFiles.join(",")}
+    multiple
+    on:change={onChange}
+    bind:files
+  />
+</div>
+
+<style>
+  #dropzone {
+    display: flex;
+    height: 100px;
+    width: 500px;
+    border: 5px dotted black;
+    padding: 15px;
+    z-index: 10;
+  }
+
+  #file-label {
+    z-index: -1;
+    font-weight: 600;
+  }
+
+  #file-input {
+    display: none;
+  }
+
+  #dropzone:hover {
+    cursor: pointer;
+    border: 5px dotted #05345f;
+    color: #05345f;
+  }
+
+  @media only screen and (max-device-width: 812px) {
+    #dropzone {
+      width: 100%;
+    }
+  }
+</style>

src/lib/FileViewer.svelte

@@ -1,5 +1,6 @@
 <script>
   import CardList from "./CardList.svelte";
+  import Dropzone from "./Dropzone.svelte";
   import FileList from "./FileList.svelte";
 
   let files;
@@ -58,28 +59,8 @@
     <strong>{acceptedFiles.join(",")}</strong>.
   </p>
 
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <Dropzone {files} {acceptedFiles} {onKeydown} {onClick} {onDrop} {onChange} />
-  <div
+
-    id="dropzone"
-    tabindex={0}
-    on:keydown={onKeydown}
-    on:click={onClick}
-    on:dragover|preventDefault|stopPropagation
-    on:drop|preventDefault|stopPropagation={onDrop}
-  >
-    <label id="file-label" for="file-input"
-      >Drag and drop files here or click to upload.</label
-    >
-    <input
-      id="file-input"
-      type="file"
-      name="files[]"
-      accept={acceptedFiles.join(",")}
-      multiple
-      on:change={onChange}
-      bind:files
-    />
-  </div>
   <input type="submit" value="Render files" />
 </form>
 
@@ -90,37 +71,9 @@
 {/if}
 
 <style>
-  #dropzone {
-    display: flex;
-    height: 100px;
-    width: 500px;
-    border: 5px dotted black;
-    padding: 15px;
-    z-index: 10;
-  }
-
-  #file-label {
-    z-index: -1;
-    font-weight: 600;
-  }
-
-  #file-input {
-    display: none;
-  }
-
-  #dropzone:hover {
-    cursor: pointer;
-    border: 5px dotted #05345f;
-    color: #05345f;
-  }
-
   @media only screen and (max-device-width: 812px) {
     #form {
       width: 100%;
     }
-
-    #dropzone {
-      width: 100%;
-    }
   }
 </style>