feat(components): Add FileDropArea

Author: hobbitronics

components/custom/FileDropArea/FileDropArea.svelte

@@ -0,0 +1,104 @@
+<script>
+import { isAboveMobile } from '../../mdc'
+import { createEventDispatcher } from 'svelte'
+
+export let raised = false
+export let outlined = false
+export let uploading = false
+export let mimeType = 'application/pdf,image/*'
+
+let fileInput = {}
+
+let highlighted = false
+
+const dispatch = createEventDispatcher()
+
+function highlight() {
+  highlighted = true
+}
+
+function unhighlight() {
+  highlighted = false
+}
+
+function handleDrop(e) {
+  unhighlight()
+
+  let dt = e.dataTransfer
+  let files = dt.files
+
+  handleFiles(files)
+}
+
+function handleFiles(files) {
+  if (!uploading) {
+    uploading = true
+    files = [...files] //turns files into an array so forEach works
+    files.forEach(uploadFile)
+  }
+}
+
+function uploadFile(file) {
+  const formData = new FormData()
+
+  formData.append('file', file)
+
+  dispatch('upload', formData)
+}
+</script>
+
+<style>
+form > * {
+  margin-top: 0;
+}
+#drop-area {
+  border: 2px dashed #ccc;
+}
+#drop-area.highlighted {
+  border-color: var(--mdc-theme-primary);
+}
+
+#fileElem {
+  display: none;
+}
+.disabled {
+  cursor: progress;
+}
+.icon {
+  color: hsla(213, 6%, 55%, 1);
+}
+</style>
+
+<div
+  id="drop-area"
+  class="br-8px {$$props.class}"
+  class:highlighted
+  on:dragenter|preventDefault|stopPropagation={highlight}
+  on:dragleave|preventDefault|stopPropagation={unhighlight}
+  on:dragover|preventDefault|stopPropagation={highlight}
+  on:drop|preventDefault|stopPropagation={handleDrop}
+>
+  <form class="flex justify-between align-items-center my-1 px-1" class:column={!isAboveMobile()}>
+    {#if !uploading}
+      <input
+        bind:this={fileInput}
+        type="file"
+        id="fileElem"
+        multiple
+        accept={mimeType}
+        disabled={uploading}
+        on:change={() => handleFiles(fileInput.files)}
+      />
+    {/if}
+    <label
+      class="mdc-button m-8px"
+      for="fileElem"
+      class:custom-text-button={raised}
+      class:mdc-button--outlined={outlined}
+      class:disabled={uploading}
+      class:mdc-button--raised={raised}>Choose files</label
+    >
+    <div class="m-8px">or drop files here</div>
+    <i class="material-icons icon m-8px" id="upload-icon">cloud_upload</i>
+  </form>
+</div>

components/custom/FileDropArea/_index.scss

@@ -0,0 +1,8 @@
+@use '@material/button/styles';
+@use "@material/button";
+
+label.custom-text-button {
+  --mdc-theme-primary: var(--mdc-theme-upload-button-color, hsla(214, 11%, 37%, 1));
+
+  @include button.ink-color(var(--mdc-theme-upload-button-ink-color, hsla(0,0%, 100%, 1)));
+}

components/custom/FileDropArea/index.ts

@@ -0,0 +1,4 @@
+import './_index.scss'
+import FileDropArea from './FileDropArea.svelte'
+
+export default FileDropArea

components/custom/index.js

@@ -2,5 +2,6 @@ import Badge from './Badge'
 import Form from './Form'
 import StaticChip from './StaticChip'
 import SearchableSelect from './SearchableSelect'
+import FileDropArea from './FileDropArea'
 
-export { Badge, Form, SearchableSelect, StaticChip }
+export { Badge, FileDropArea, Form, SearchableSelect, StaticChip }

index.mjs

@@ -28,7 +28,7 @@ import {
   setNotice,
 } from './components/mdc/index.js'
 
-import { Badge, Form, SearchableSelect, StaticChip } from './components/custom/index.js'
+import { Badge, FileDropArea, Form, SearchableSelect, StaticChip } from './components/custom/index.js'
 
 export {
   actions,
@@ -42,6 +42,7 @@ export {
   Dialog,
   Drawer,
   Fab,
+  FileDropArea,
   IconButton,
   List,
   Menu,

stories/FileDropArea.stories.svelte

@@ -0,0 +1,30 @@
+<script>
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+import { FileDropArea } from '../components/custom'
+import { copyAndModifyArgs } from './helpers.js'
+
+const args = {
+  raised: true,
+  outlined: false,
+  uploading: false,
+  mimeType: 'application/pdf,image/*',
+  class: '',
+  'on:upload': () => alert('you uploaded'),
+}
+</script>
+
+<Meta title="Atoms/FileDropArea" component={FileDropArea} />
+
+<Template let:args>
+  <FileDropArea {...args} on:upload={args['on:upload']} />
+</Template>
+
+<Story name="Default" {args} />
+
+<Story name="Raised" args={copyAndModifyArgs(args, { raised: true })} />
+
+<Story name="Outlined" args={copyAndModifyArgs(args, { outlined: true })} />
+
+<Story name="Uploading" args={copyAndModifyArgs(args, { uploading: true })} />
+
+<Story name="MimeType" args={copyAndModifyArgs(args, { mimeType: 'image/*' })} />

stories/_theme.scss

@@ -13,6 +13,8 @@
   --mdc-list-item__subtitle: #6d7580;
   --mdc-menu-icon-color: #6d7580;
   --mdc-theme-icon-color: #6d7580;
+  --mdc-theme-upload-button-color: rgb(205, 171, 201);
+  --mdc-theme-upload-button-ink-color: rgb(65, 1, 129);
 }
 
 .mdc-theme--primary-variant {