From 1fb6cd0b4b4aecbb753e151afb71fe7e9becaeae Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 22 Apr 2021 10:10:42 +0100
Subject: [PATCH] Add dropzone component and update builder and standard
 components

---
 packages/bbui/package.json                    |   2 +
 packages/bbui/src/Dropzone/Dropzone.svelte    | 295 ----------------
 packages/bbui/src/Dropzone/Dropzone.svench    |  17 -
 packages/bbui/src/Dropzone/fileTypes.js       |   5 -
 packages/bbui/src/Form/Core/Dropzone.svelte   | 334 ++++++++++++++++++
 packages/bbui/src/Form/Core/index.js          |   1 +
 packages/bbui/src/Form/Dropzone.svelte        |  31 ++
 packages/bbui/src/index.js                    |   2 +-
 packages/bbui/yarn.lock                       |  10 +
 .../backend/DataTable/RowFieldControl.svelte  |  18 +-
 .../src/components/common/Dropzone.svelte     |  13 +-
 .../src/attachments/AttachmentList.svelte     | 127 -------
 .../src/attachments/Dropzone.svelte           |  26 --
 .../src/attachments/fileTypes.js              |   5 -
 .../src/forms/AttachmentField.svelte          |  49 +--
 15 files changed, 418 insertions(+), 517 deletions(-)
 delete mode 100644 packages/bbui/src/Dropzone/Dropzone.svelte
 delete mode 100644 packages/bbui/src/Dropzone/Dropzone.svench
 delete mode 100644 packages/bbui/src/Dropzone/fileTypes.js
 create mode 100644 packages/bbui/src/Form/Core/Dropzone.svelte
 create mode 100644 packages/bbui/src/Form/Dropzone.svelte
 delete mode 100644 packages/standard-components/src/attachments/AttachmentList.svelte
 delete mode 100644 packages/standard-components/src/attachments/Dropzone.svelte
 delete mode 100644 packages/standard-components/src/attachments/fileTypes.js

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index 84273d00ff..b0192739be 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -45,9 +45,11 @@
     "@spectrum-css/checkbox": "^3.0.2",
     "@spectrum-css/dialog": "^3.0.1",
     "@spectrum-css/divider": "^1.0.1",
+    "@spectrum-css/dropzone": "^3.0.2",
     "@spectrum-css/fieldgroup": "^3.0.2",
     "@spectrum-css/fieldlabel": "^3.0.1",
     "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/illustratedmessage": "^3.0.2",
     "@spectrum-css/inputgroup": "^3.0.2",
     "@spectrum-css/label": "^2.0.9",
     "@spectrum-css/link": "^3.1.1",
diff --git a/packages/bbui/src/Dropzone/Dropzone.svelte b/packages/bbui/src/Dropzone/Dropzone.svelte
deleted file mode 100644
index 4f4f4bc7bf..0000000000
--- a/packages/bbui/src/Dropzone/Dropzone.svelte
+++ /dev/null
@@ -1,295 +0,0 @@
-<script>
-  import { Heading, Body, Button } from "../"
-  import { FILE_TYPES } from "./fileTypes"
-
-  const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
-
-  export let icons = {
-    image: "fas fa-file-image",
-    code: "fas fa-file-code",
-    file: "fas fa-file",
-    fileUpload: "fas fa-upload",
-  }
-
-  export let files = []
-  export let fileSizeLimit = BYTES_IN_MB * 20
-  export let processFiles
-  export let handleFileTooLarge
-
-  let selectedImageIdx = 0
-  let fileDragged = false
-  // Generate a random ID so that multiple dropzones on the page don't conflict
-  let id = Math.random()
-    .toString(36)
-    .substring(7)
-
-  $: selectedImage = files ? files[selectedImageIdx] : null
-
-  function determineFileIcon(extension) {
-    const ext = extension.toLowerCase()
-
-    if (FILE_TYPES.IMAGE.includes(ext)) return icons.image
-    if (FILE_TYPES.CODE.includes(ext)) return icons.code
-
-    return icons.file
-  }
-
-  async function processFileList(fileList) {
-    if (Array.from(fileList).some(file => file.size >= fileSizeLimit)) {
-      handleFileTooLarge(fileSizeLimit, file)
-      return
-    }
-
-    const processedFiles = await processFiles(fileList)
-
-    files = [...processedFiles, ...files]
-    selectedImageIdx = 0
-  }
-
-  async function removeFile() {
-    files.splice(selectedImageIdx, 1)
-    files = files
-    selectedImageIdx = 0
-  }
-
-  function navigateLeft() {
-    selectedImageIdx -= 1
-  }
-
-  function navigateRight() {
-    selectedImageIdx += 1
-  }
-
-  function handleFile(evt) {
-    processFileList(evt.target.files)
-  }
-
-  function handleDragOver(evt) {
-    evt.preventDefault()
-    fileDragged = true
-  }
-
-  function handleDragLeave(evt) {
-    evt.preventDefault()
-    fileDragged = false
-  }
-
-  function handleDrop(evt) {
-    evt.preventDefault()
-    processFileList(evt.dataTransfer.files)
-    fileDragged = false
-  }
-</script>
-
-<div
-  class="dropzone"
-  on:dragover={handleDragOver}
-  on:dragleave={handleDragLeave}
-  on:dragenter={handleDragOver}
-  on:drop={handleDrop}
-  class:fileDragged>
-  {#if selectedImage}
-    <ul>
-      <li>
-        <header>
-          <div>
-            <i class={determineFileIcon(selectedImage.extension)} />
-            <span class="filename">{selectedImage.name}</span>
-          </div>
-          <p>
-            {#if selectedImage.size <= BYTES_IN_MB}
-              {selectedImage.size / BYTES_IN_KB}KB
-            {:else}{selectedImage.size / BYTES_IN_MB}MB{/if}
-          </p>
-        </header>
-        <div class="delete-button" on:click={removeFile}>
-          <i class="ri-close-circle-fill" />
-        </div>
-        {#if selectedImageIdx !== 0}
-          <div class="nav left" on:click={navigateLeft}>
-            <i class="ri-arrow-left-circle-fill" />
-          </div>
-        {/if}
-        <img alt="preview" src={selectedImage.url} />
-        {#if selectedImageIdx !== files.length - 1}
-          <div class="nav right" on:click={navigateRight}>
-            <i class="ri-arrow-right-circle-fill" />
-          </div>
-        {/if}
-      </li>
-    </ul>
-  {/if}
-  <i class={icons.fileUpload} />
-  <input {id} type="file" multiple on:change={handleFile} {...$$restProps} />
-  <i class="ri-upload-cloud-line" />
-  <p class="drop">Drop your files here</p>
-  <label for={id}>Select a file from your computer</label>
-</div>
-
-<style>
-  .dropzone {
-    padding: var(--spacing-l);
-    border: 2px dashed var(--grey-4);
-    text-align: center;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .fileDragged {
-    border: 2px dashed var(--grey-7);
-    background: var(--blue-light);
-  }
-
-  input[type="file"] {
-    display: none;
-  }
-
-  label {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    cursor: pointer;
-    overflow: hidden;
-    color: var(--grey-7);
-    text-rendering: optimizeLegibility;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
-    -webkit-box-align: center;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    text-decoration: underline;
-  }
-
-  .drop {
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-    margin: 12px 0;
-  }
-
-  div.nav {
-    padding: var(--spacing-xs);
-    position: absolute;
-    display: flex;
-    align-items: center;
-    bottom: var(--spacing-s);
-    border-radius: 5px;
-    transition: 0.2s transform;
-  }
-
-  .nav:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .left {
-    left: var(--spacing-s);
-  }
-
-  .right {
-    right: var(--spacing-s);
-  }
-
-  li {
-    position: relative;
-    height: 300px;
-    background: var(--grey-7);
-    display: flex;
-    justify-content: center;
-    border-radius: 10px;
-  }
-
-  img {
-    border-radius: 10px;
-    width: 100%;
-    box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
-    object-fit: contain;
-  }
-
-  i {
-    font-size: 2rem;
-    color: var(--ink);
-  }
-
-  i:hover {
-    cursor: pointer;
-    color: var(--background);
-  }
-
-  .file-icon {
-    color: var(--background);
-    font-size: 2em;
-    margin-right: var(--spacing-s);
-  }
-
-  ul {
-    padding: 0;
-    display: grid;
-    grid-gap: var(--spacing-s);
-    list-style-type: none;
-    width: 100%;
-  }
-
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: absolute;
-    background: linear-gradient(
-      180deg,
-      rgb(255, 255, 255),
-      rgba(255, 255, 255, 0)
-    );
-    width: 100%;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    height: 60px;
-  }
-
-  header > div {
-    color: var(--ink);
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    margin-left: var(--spacing-m);
-    width: 60%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .filename {
-    overflow: hidden;
-    margin-left: 5px;
-    text-overflow: ellipsis;
-  }
-
-  header > p {
-    color: var(--grey-5);
-    margin-right: var(--spacing-m);
-  }
-
-  .delete-button {
-    position: absolute;
-    top: var(--spacing-s);
-    right: var(--spacing-s);
-    padding: var(--spacing-s);
-    border-radius: 10px;
-    transition: all 0.3s;
-  }
-
-  .delete-button i {
-    font-size: 2em;
-    color: var(--ink);
-  }
-
-  .delete-button:hover {
-    cursor: pointer;
-    color: var(--red);
-  }
-</style>
diff --git a/packages/bbui/src/Dropzone/Dropzone.svench b/packages/bbui/src/Dropzone/Dropzone.svench
deleted file mode 100644
index 110195ab5a..0000000000
--- a/packages/bbui/src/Dropzone/Dropzone.svench
+++ /dev/null
@@ -1,17 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Dropzone from "./Dropzone.svelte";
-
-  async function processFiles(files) {
-    console.log("Processing", files);
-    return files;
-  }
-
-  function handleFileTooLarge() {
-    alert("File too large.");
-  }
-</script>
-
-<View name="dropzone">
-  <Dropzone {processFiles} {handleFileTooLarge} />
-</View>
diff --git a/packages/bbui/src/Dropzone/fileTypes.js b/packages/bbui/src/Dropzone/fileTypes.js
deleted file mode 100644
index 1ebd85070b..0000000000
--- a/packages/bbui/src/Dropzone/fileTypes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const FILE_TYPES = {
-  IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"],
-  CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
-}
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
new file mode 100644
index 0000000000..e6addd4e42
--- /dev/null
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -0,0 +1,334 @@
+<script>
+  import "@spectrum-css/dropzone/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
+  import "@spectrum-css/illustratedmessage/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import { generateID } from "../../utils/helpers"
+  import Icon from "../../Icon/Icon.svelte"
+
+  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
+
+  export let value = []
+  export let id = null
+  export let disabled = false
+  export let fileSizeLimit = BYTES_IN_MB * 20
+  export let processFiles = null
+  export let handleFileTooLarge = null
+
+  const dispatch = createEventDispatcher()
+  const imageExtensions = [
+    "png",
+    "tiff",
+    "gif",
+    "raw",
+    "jpg",
+    "jpeg",
+    "svg",
+    "bmp",
+    "jfif",
+  ]
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+
+  const fieldId = id || generateID()
+  let selectedImageIdx = 0
+  let fileDragged = false
+  $: selectedImage = value?.[selectedImageIdx] ?? null
+  $: fileCount = value?.length ?? 0
+  $: isImage = imageExtensions.includes(selectedImage?.extension?.toLowerCase())
+
+  async function processFileList(fileList) {
+    if (
+      handleFileTooLarge &&
+      Array.from(fileList).some(file => file.size >= fileSizeLimit)
+    ) {
+      handleFileTooLarge(fileSizeLimit, value)
+      return
+    }
+    if (processFiles) {
+      const processedFiles = await processFiles(fileList)
+      const newValue = [...value, ...processedFiles]
+      dispatch("change", newValue)
+      selectedImageIdx = newValue.length - 1
+    }
+  }
+
+  async function removeFile() {
+    dispatch(
+      "change",
+      value.filter((x, idx) => idx !== selectedImageIdx)
+    )
+    selectedImageIdx = 0
+  }
+
+  function navigateLeft() {
+    selectedImageIdx -= 1
+  }
+
+  function navigateRight() {
+    selectedImageIdx += 1
+  }
+
+  function handleFile(evt) {
+    processFileList(evt.target.files)
+  }
+
+  function handleDragOver(evt) {
+    evt.preventDefault()
+    fileDragged = true
+  }
+
+  function handleDragLeave(evt) {
+    evt.preventDefault()
+    fileDragged = false
+  }
+
+  function handleDrop(evt) {
+    evt.preventDefault()
+    processFileList(evt.dataTransfer.files)
+    fileDragged = false
+  }
+</script>
+
+<div class="container">
+  {#if selectedImage}
+    <div class="gallery">
+      <div class="title">
+        <div class="filename">{selectedImage.name}</div>
+        <div class="filesize">
+          {#if selectedImage.size <= BYTES_IN_MB}
+            {`${selectedImage.size / BYTES_IN_KB} KB`}
+          {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+        </div>
+        {#if !disabled}
+          <div class="delete-button" on:click={removeFile}>
+            <Icon name="Close" />
+          </div>
+        {/if}
+      </div>
+      {#if isImage}
+        <img alt="preview" src={selectedImage.url} />
+      {:else}
+        <div class="placeholder">
+          <div class="extension">{selectedImage.extension}</div>
+          <div>Preview not supported</div>
+        </div>
+      {/if}
+      <div
+        class="nav left"
+        class:visible={selectedImageIdx > 0}
+        on:click={navigateLeft}>
+        <Icon name="ChevronLeft" />
+      </div>
+      <div
+        class="nav right"
+        class:visible={selectedImageIdx < fileCount - 1}
+        on:click={navigateRight}>
+        <Icon name="ChevronRight" />
+      </div>
+      <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+    </div>
+  {/if}
+  <div
+    class="spectrum-Dropzone"
+    class:disabled
+    role="region"
+    tabindex="0"
+    on:dragover={handleDragOver}
+    on:dragleave={handleDragLeave}
+    on:dragenter={handleDragOver}
+    on:drop={handleDrop}
+    class:is-dragged={fileDragged}>
+    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+      <input
+        id={fieldId}
+        {disabled}
+        type="file"
+        multiple
+        on:change={handleFile} />
+      <svg
+        class="spectrum-IllustratedMessage-illustration"
+        width="125"
+        height="60"
+        viewBox="0 0 199 97.7"><defs>
+          <style>
+            .cls-1,
+            .cls-2 {
+              fill: none;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            }
+            .cls-1 {
+              stroke-width: 3px;
+            }
+            .cls-2 {
+              stroke-width: 2px;
+            }
+          </style>
+        </defs>
+        <path
+          class="cls-1"
+          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" />
+        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+        <path
+          class="cls-1"
+          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" />
+        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+        <path
+          class="cls-2"
+          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" />
+        <path
+          class="cls-2"
+          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" />
+        <path
+          class="cls-2"
+          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" />
+        <path
+          class="cls-1"
+          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" />
+        <rect
+          class="cls-1"
+          x="1.5"
+          y="34.5"
+          width="58"
+          height="39"
+          rx="2"
+          ry="2" />
+      </svg>
+      <h2
+        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">
+        Drag and drop your file
+      </h2>
+      {#if !disabled}
+        <p
+          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description">
+          <label for={fieldId} class="spectrum-Link">Select a file to upload</label>
+          <br />
+          from your computer
+        </p>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    --spectrum-dropzone-padding: var(--spectrum-global-dimension-size-400);
+    --spectrum-heading-l-text-size: var(
+      --spectrum-global-dimension-font-size-400
+    );
+  }
+  .container * {
+    font-family: "Inter", sans-serif !important;
+  }
+
+  .gallery,
+  .spectrum-Dropzone {
+    user-select: none;
+  }
+  input[type="file"] {
+    display: none;
+  }
+
+  .gallery {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background-color: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+    font-size: var(--spectrum-alias-item-text-size-m);
+    box-sizing: border-box;
+    border: var(--spectrum-alias-border-size-thin)
+      var(--spectrum-alias-border-color) solid;
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    padding: 10px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+  .placeholder,
+  img {
+    height: 120px;
+    max-width: 100%;
+    object-fit: contain;
+    margin: 20px 30px;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .filename {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 0;
+    margin-right: 10px;
+  }
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .extension {
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    font-weight: 500;
+    margin-bottom: 5px;
+  }
+
+  .nav {
+    padding: var(--spacing-xs);
+    position: absolute;
+    top: 50%;
+    border-radius: 5px;
+    display: none;
+    transition: all 0.3s;
+  }
+  .nav.visible {
+    display: block;
+  }
+  .nav:hover {
+    cursor: pointer;
+    color: var(--blue);
+  }
+  .left {
+    left: 5px;
+  }
+  .right {
+    right: 5px;
+  }
+  i {
+    font-size: 2rem;
+    color: var(--ink);
+  }
+  i:hover {
+    cursor: pointer;
+    color: var(--background);
+  }
+  .delete-button {
+    transition: all 0.3s;
+    margin-left: 10px;
+  }
+  .delete-button i {
+    font-size: 2em;
+  }
+  .delete-button:hover {
+    cursor: pointer;
+    color: var(--red);
+  }
+
+  .spectrum-Dropzone.disabled {
+    pointer-events: none;
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+  .disabled .spectrum-Heading--sizeL {
+    color: var(--spectrum-alias-text-color-disabled);
+  }
+</style>
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js
index 95588458b6..a31c5941ec 100644
--- a/packages/bbui/src/Form/Core/index.js
+++ b/packages/bbui/src/Form/Core/index.js
@@ -8,3 +8,4 @@ export { default as CoreCombobox } from "./Combobox.svelte"
 export { default as CoreSwitch } from "./Switch.svelte"
 export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
+export { default as CoreDropzone } from "./Dropzone.svelte"
diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte
new file mode 100644
index 0000000000..5886c58fa9
--- /dev/null
+++ b/packages/bbui/src/Form/Dropzone.svelte
@@ -0,0 +1,31 @@
+<script>
+  import Field from "./Field.svelte"
+  import CoreDropzone from "./Core/Dropzone.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+  export let fileSizeLimit = undefined
+  export let processFiles = undefined
+  export let handleFileTooLarge = undefined
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {disabled} {error}>
+  <CoreDropzone
+    {error}
+    {disabled}
+    {value}
+    {fileSizeLimit}
+    {processFiles}
+    {handleFileTooLarge}
+    on:change={onChange} />
+</Field>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index f72463669a..73fc8699a5 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -8,7 +8,7 @@ export { default as Input } from "./Form/Input.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
 export { default as Select } from "./Form/Select.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
-export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
+export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 6a1f988878..c03cb4b1f5 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -106,6 +106,11 @@
   dependencies:
     "@spectrum-css/vars" "^3.0.2"
 
+"@spectrum-css/dropzone@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.2.tgz#34f137851054442b219fed7f32006b93fc5e0bcf"
+  integrity sha512-BuBBzm5re6lM0AWgd6V+mI5eEGnnmFEtcFiJBEn9jYNEQYgflFhvnERUt89jMX5WmspiecwI2JBWJFrtFsOzug==
+
 "@spectrum-css/fieldgroup@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
@@ -121,6 +126,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
   integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
 
+"@spectrum-css/illustratedmessage@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
+  integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
+
 "@spectrum-css/inputgroup@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index f2568db5e6..7f160600ba 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -1,12 +1,5 @@
 <script>
-  import {
-    Input,
-    Select,
-    Label,
-    DatePicker,
-    Toggle,
-    TextArea,
-  } from "@budibase/bbui"
+  import { Input, Select, DatePicker, Toggle, TextArea } from "@budibase/bbui"
   import Dropzone from "components/common/Dropzone.svelte"
   import { capitalise } from "../../../helpers"
   import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
@@ -29,16 +22,11 @@
 {:else if type === 'datetime'}
   <DatePicker {label} bind:value />
 {:else if type === 'attachment'}
-  <div>
-    <Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
-    <Dropzone bind:files={value} />
-  </div>
+  <Dropzone {label} bind:value />
 {:else if type === 'boolean'}
   <Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
 {:else if type === 'link'}
-  <div>
-    <LinkedRowSelector bind:linkedRows={value} schema={meta} />
-  </div>
+  <LinkedRowSelector bind:linkedRows={value} schema={meta} />
 {:else if type === 'longform'}
   <TextArea {label} bind:value />
 {:else}
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 5d4d3f0124..d44b975a41 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,9 +1,9 @@
 <script>
-  import { notifications } from "@budibase/bbui"
-  import { Dropzone } from "@budibase/bbui"
+  import { Dropzone, notifications } from "@budibase/bbui"
   import api from "builderStore/api"
 
-  export let files = []
+  export let value = []
+  export let label
 
   const BYTES_IN_MB = 1000000
 
@@ -24,4 +24,9 @@
   }
 </script>
 
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />
+<Dropzone
+  bind:value
+  {label}
+  {...$$restProps}
+  {processFiles}
+  {handleFileTooLarge} />
diff --git a/packages/standard-components/src/attachments/AttachmentList.svelte b/packages/standard-components/src/attachments/AttachmentList.svelte
deleted file mode 100644
index d7bdbeb596..0000000000
--- a/packages/standard-components/src/attachments/AttachmentList.svelte
+++ /dev/null
@@ -1,127 +0,0 @@
-<script>
-  import { Modal, ModalContent } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  import { FILE_TYPES } from "./fileTypes"
-
-  export let files = []
-  export let height = "70"
-  export let width = "70"
-
-  let modal
-  let currentFile
-
-  const openModal = file => {
-    currentFile = file
-    modal.show()
-  }
-
-  const handleConfirm = () => {
-    dispatch("delete", currentFile)
-  }
-</script>
-
-<div class="file-list">
-  {#each files as file}
-    <div class="file-container">
-      <a href={file.url} target="_blank" class="file">
-        {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
-          <img {width} {height} src={file.url} alt="preview of {file.name}" />
-        {:else}<i class="far fa-file" />{/if}
-      </a>
-      <span>{file.name}</span>
-      <div class="button-placement">
-        <button primary on:click|stopPropagation={() => openModal(file)}>
-          ×
-        </button>
-      </div>
-    </div>
-  {/each}
-</div>
-<Modal bind:this={modal}>
-  <ModalContent
-    title="Confirm File Deletion"
-    confirmText="Delete"
-    onConfirm={handleConfirm}>
-    <span>Are you sure you want to delete this attachment?</span>
-  </ModalContent>
-</Modal>
-
-<style>
-  .file-list {
-    display: grid;
-    justify-content: start;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    grid-template-columns: repeat(auto-fill, 1fr);
-  }
-
-  img {
-    object-fit: contain;
-  }
-
-  i {
-    margin-bottom: var(--spacing-m);
-  }
-
-  a {
-    color: var(--ink);
-    text-decoration: none;
-  }
-
-  .file-container {
-    position: relative;
-  }
-
-  button {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    font-size: var(--font-size-m);
-    line-height: 110%;
-    z-index: 1000;
-    top: 4px;
-    left: 50px;
-    margin: 0;
-    padding: 0;
-    width: 1.3rem;
-    height: 1.3rem;
-    border: 0;
-    color: white;
-    border-radius: var(--border-radius-xl);
-    background: black;
-    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    -webkit-appearance: none;
-    outline: none;
-  }
-  button:hover {
-    background-color: var(--grey-8);
-    cursor: pointer;
-  }
-  button:active {
-    background-color: var(--grey-9);
-    cursor: pointer;
-  }
-
-  .file {
-    position: relative;
-    height: 75px;
-    width: 75px;
-    border: 2px dashed var(--grey-7);
-    padding: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  span {
-    width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>
diff --git a/packages/standard-components/src/attachments/Dropzone.svelte b/packages/standard-components/src/attachments/Dropzone.svelte
deleted file mode 100644
index 8ac3486354..0000000000
--- a/packages/standard-components/src/attachments/Dropzone.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-  import { Dropzone } from "@budibase/bbui"
-  import { getContext } from "svelte"
-
-  const { API } = getContext("sdk")
-  const BYTES_IN_MB = 1000000
-
-  export let files = []
-
-  function handleFileTooLarge(fileSizeLimit) {
-    alert(
-      `Files cannot exceed ${fileSizeLimit /
-        BYTES_IN_MB}MB. Please try again with smaller files.`
-    )
-  }
-
-  async function processFiles(fileList) {
-    let data = new FormData()
-    for (let i = 0; i < fileList.length; i++) {
-      data.append("file", fileList[i])
-    }
-    return await API.uploadAttachment(data)
-  }
-</script>
-
-<Dropzone bind:files {processFiles} {handleFileTooLarge} />
diff --git a/packages/standard-components/src/attachments/fileTypes.js b/packages/standard-components/src/attachments/fileTypes.js
deleted file mode 100644
index 2ce6958f2d..0000000000
--- a/packages/standard-components/src/attachments/fileTypes.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const FILE_TYPES = {
-  IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg"],
-  CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
-  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
-}
diff --git a/packages/standard-components/src/forms/AttachmentField.svelte b/packages/standard-components/src/forms/AttachmentField.svelte
index 5df1d40eb9..fbc5ef0426 100644
--- a/packages/standard-components/src/forms/AttachmentField.svelte
+++ b/packages/standard-components/src/forms/AttachmentField.svelte
@@ -1,7 +1,7 @@
 <script>
   import Field from "./Field.svelte"
-  import Dropzone from "../attachments/Dropzone.svelte"
-  import { onMount } from "svelte"
+  import { CoreDropzone } from "@budibase/bbui"
+  import { getContext } from "svelte"
 
   export let field
   export let label
@@ -10,16 +10,25 @@
   let fieldState
   let fieldApi
 
-  // Update form value from bound value after we've mounted
-  let value
-  let mounted = false
-  $: mounted && fieldApi?.setValue(value)
+  const { API, notifications } = getContext("sdk")
+  const BYTES_IN_MB = 1000000
 
-  // Get the fields initial value after initialising
-  onMount(() => {
-    value = $fieldState?.value
-    mounted = true
-  })
+  export let files = []
+
+  const handleFileTooLarge = fileSizeLimit => {
+    notifications.warning(
+      `Files cannot exceed ${fileSizeLimit /
+        BYTES_IN_MB} MB. Please try again with smaller files.`
+    )
+  }
+
+  const processFiles = async fileList => {
+    let data = new FormData()
+    for (let i = 0; i < fileList.length; i++) {
+      data.append("file", fileList[i])
+    }
+    return await API.uploadAttachment(data)
+  }
 </script>
 
 <Field
@@ -30,16 +39,12 @@
   bind:fieldState
   bind:fieldApi
   defaultValue={[]}>
-  {#if mounted}
-    <div class:disabled={$fieldState.disabled}>
-      <Dropzone bind:files={value} />
-    </div>
+  {#if $fieldState}
+    <CoreDropzone
+      value={$fieldState.value}
+      disabled={$fieldState.disabled}
+      on:change={e => fieldApi.setValue(e.detail)}
+      {processFiles}
+      {handleFileTooLarge} />
   {/if}
 </Field>
-
-<style>
-  div.disabled :global(> *) {
-    background-color: var(--spectrum-global-color-gray-200) !important;
-    pointer-events: none !important;
-  }
-</style>