From 65f5f358d0e8f3288430bd01da16f466ad7d9358 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 11 Sep 2020 15:09:56 +0100
Subject: [PATCH 01/15] attachments

---
 packages/builder/package.json                 |   4 +
 .../src/components/common/Dropzone.svelte     |  39 +++
 .../src/components/common/Spinner.svelte      |   4 +-
 .../database/DataTable/ModelDataTable.svelte  |   4 +
 .../modals/RecordFieldControl.svelte          |  22 +-
 .../builder/src/constants/backend/index.js    |  27 +-
 .../pages/[application]/deploy/index.svelte   |   4 +-
 packages/builder/yarn.lock                    | 291 +++++++++++++++++-
 packages/server/src/electron.js               |   2 +-
 9 files changed, 365 insertions(+), 32 deletions(-)
 create mode 100644 packages/builder/src/components/common/Dropzone.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index ea555007a9..04dab3bf5e 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -73,10 +73,14 @@
     "deepmerge": "^4.2.2",
     "fast-sort": "^2.2.0",
     "feather-icons": "^4.21.0",
+    "filepond": "^4.20.1",
+    "filepond-plugin-image-exif-orientation": "^1.0.9",
+    "filepond-plugin-image-preview": "^4.6.4",
     "lodash": "^4.17.13",
     "mustache": "^4.0.1",
     "posthog-js": "1.3.1",
     "shortid": "^2.2.15",
+    "svelte-filepond": "^0.0.1",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
new file mode 100644
index 0000000000..46bb81c7a7
--- /dev/null
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -0,0 +1,39 @@
+<script>
+  import FilePond, { registerPlugin } from "svelte-filepond"
+  import "filepond/dist/filepond.min.css"
+  import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
+
+  // Import the Image EXIF Orientation and Image Preview plugins
+  // Note: These need to be installed separately
+  // `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
+  import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
+  import FilePondPluginImagePreview from "filepond-plugin-image-preview"
+
+  // Register the plugins
+  registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)
+
+  // a reference to the component, used to call FilePond methods
+  let pond
+
+  // pond.getFiles() will return the active files
+
+  // the name to use for the internal file input
+  let name = "filepond"
+
+  // handle filepond events
+  function handleInit() {
+    console.log("FilePond has initialised")
+  }
+
+  function handleAddFile(err, fileItem) {
+    console.log("A file has been added", fileItem)
+  }
+</script>
+
+<FilePond
+  bind:this={pond}
+  {name}
+  server="/api"
+  allowMultiple={true}
+  oninit={handleInit}
+  onaddfile={handleAddFile} />
diff --git a/packages/builder/src/components/common/Spinner.svelte b/packages/builder/src/components/common/Spinner.svelte
index a9c947915c..01199e72ec 100644
--- a/packages/builder/src/components/common/Spinner.svelte
+++ b/packages/builder/src/components/common/Spinner.svelte
@@ -1,5 +1,7 @@
 <script>
   import { Circle } from "svelte-loading-spinners"
+  
+  export let size = "60"
 </script>
 
-<Circle size="60" color="#000000" unit="px" />
+<Circle {size} color="#000000" unit="px" />
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
index af99b2bada..36280498c8 100644
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
@@ -90,6 +90,10 @@
             <td>
               {#if schema[header].type === 'link'}
                 <LinkedRecord field={schema[header]} ids={row[header]} />
+              {:else if schema[header].type === 'attachment'}
+                {#each row[header] || [] as img}
+                  <img width="100" height="100" src={`file://${img}`} />
+                {/each}
               {:else}{getOr('', header, row)}{/if}
             </td>
           {/each}
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
index ed56618e3e..627d77450c 100644
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
-  import DatePicker from "components/common/DatePicker.svelte"
+  import { Input, Select, Label, DatePicker } from "@budibase/bbui"
+  import Dropzone from "components/common/Dropzone.svelte"
 
   export let meta
   export let value = meta.type === "boolean" ? false : ""
@@ -17,12 +17,14 @@
     if (meta.type === "datetime") return "date"
     if (meta.type === "number") return "number"
     if (meta.type === "boolean") return "checkbox"
+    if (meta.type === "attachment") return "file"
     if (isSelect) return "select"
 
     return "text"
   }
 
   const handleInput = event => {
+    console.log(event.target.value)
     if (event.target.type === "checkbox") {
       value = event.target.checked
       return
@@ -33,6 +35,12 @@
       return
     }
 
+    // if (event.target.type === "file") {
+    //   value = Array.from(event.target.files).map(file => file.path)
+    //   console.log(value)
+    //   return
+    // }
+
     value = event.target.value
   }
 </script>
@@ -45,7 +53,12 @@
     {/each}
   </Select>
 {:else if type === 'date'}
-  <DatePicker label={meta.name} bind:value />
+  <Label small forAttr={'datepicker-label'}>{meta.name}</Label>
+  <DatePicker bind:value />
+{:else if type === 'file'}
+  <Label small forAttr={'dropzone-label'}>{meta.name}</Label>
+  <Dropzone />
+  <!-- <input type="file" multiple on:change={handleInput} /> -->
 {:else}
   {#if type === 'checkbox'}
     <label>{meta.name}</label>
@@ -64,7 +77,6 @@
   label {
     font-weight: 500;
     font-size: var(--font-size-s);
-    float: left;
-    margin-right: 8px;
+    margin-bottom: 12px;
   }
 </style>
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 43a01786f4..502cdbd245 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -51,24 +51,15 @@ export const FIELDS = {
       },
     },
   },
-  // IMAGE: {
-  //   name: "File",
-  //   icon: "ri-image-line",
-  //   type: "file",
-  //   constraints: {
-  //     type: "string",
-  //     presence: { allowEmpty: true },
-  //   },
-  // },
-  // FILE: {
-  //   name: "Image",
-  //   icon: "ri-file-line",
-  //   type: "file",
-  //   constraints: {
-  //     type: "string",
-  //     presence: { allowEmpty: true },
-  //   },
-  // },
+  ATTACHMENT: {
+    name: "Attachment",
+    icon: "ri-file-line",
+    type: "attachment",
+    constraints: {
+      type: "array",
+      presence: { allowEmpty: true },
+    },
+  },
   // LINKED_FIELDS: {
   //   name: "Linked Fields",
   //   icon: "ri-link",
diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte
index bc13e797f9..ad4f05da20 100644
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@@ -48,12 +48,12 @@
       <Button secondary medium on:click={deployApp}>
         Deploy App
         {#if loading}
-          <Spinner ratio={'0.5'} />
+          <Spinner size="10" />
         {/if}
       </Button>
     {/if}
   </div>
-  <img src="/_builder/assets/deploy-rocket.jpg" />
+  <img src="/_builder/assets/deploy-rocket.jpg" alt="Rocket flying through sky"/>
 </section>
 
 <style>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index fe91590a7e..6b89f70866 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -695,6 +695,21 @@
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
 
+"@budibase/client@^0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
+  integrity sha512-crxnLgebsh6CR0aMleDahY/1vFPbveG6JuSS/EVZeoBmckzK8hwiUQYQhIlf68nZfzWsCE/M9TX7SJxsrKY3bQ==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -944,6 +959,11 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@nx-js/compiler-util@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
+  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
+
 "@polka/url@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
@@ -1370,6 +1390,11 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1424,6 +1449,13 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1498,6 +1530,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bcryptjs@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
+  integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=
+
 binary-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
@@ -2381,6 +2418,26 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2550,6 +2607,54 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2824,6 +2929,21 @@ file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
 
+filepond-plugin-image-exif-orientation@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/filepond-plugin-image-exif-orientation/-/filepond-plugin-image-exif-orientation-1.0.9.tgz#bf1220d99c117a69859f3297d0618e7469705019"
+  integrity sha512-Pyw7oNpMk5YwX0eYsa1wjNTJ2WxTQ27VUDviV0XrNbKPB7/iDSZ9r2zWSEeT9yS46OUGNE8lcdAARi5Z2v5TLA==
+
+filepond-plugin-image-preview@^4.6.4:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.4.tgz#19edade651559cf8c9fb97bcc8ce56af16ebae67"
+  integrity sha512-grlFJv1LH4E7IzsKTIFI52LuyLQa+lXMqmUnSm0cufDblRXHxdraRkjj/88bd9pyVJm206dBXQnlIVVyEaE5xg==
+
+filepond@^4.20.1:
+  version "4.20.1"
+  resolved "https://registry.yarnpkg.com/filepond/-/filepond-4.20.1.tgz#d0e2ce447dc785f8cc51abd207805b886090b2b7"
+  integrity sha512-qYwE/xSODJuAJH0E2BHeD8f3X66nxZ/aUQSaGhUTVXuAWe0wvIjxaRcMZUIsZm2f7truScxAe16l5ITzxi5TFw==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -2863,9 +2983,10 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@~2.0.1:
+foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
 
 forever-agent@~0.6.1:
   version "0.6.1"
@@ -3236,16 +3357,31 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3254,6 +3390,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
+is-callable@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
+  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3272,7 +3413,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
 
@@ -3337,10 +3478,25 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3397,6 +3553,18 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -3405,16 +3573,41 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   dependencies:
     has-symbols "^1.0.1"
 
+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3435,6 +3628,11 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4248,6 +4446,11 @@ ltgt@^2.1.2:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
 
+lunr@^2.3.5:
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
+  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
+
 magic-string@^0.22.5:
   version "0.22.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
@@ -4545,6 +4748,19 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5055,6 +5271,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5452,12 +5681,21 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
-shortid@^2.2.15:
+shortid@^2.2.15, shortid@^2.2.8:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
+  integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5684,7 +5922,7 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5707,7 +5945,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -5794,6 +6032,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-filepond@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/svelte-filepond/-/svelte-filepond-0.0.1.tgz#7c20379213dac746192499d3d1de649d6db51c4b"
+  integrity sha512-R5z/Gj/2VSdV70GxvW226ww4zrVyV2EFTXrsWIdn7sEB7uYWIJvvciUNQVTfYZfcAgGsa4gprGsuqWNG3auSKw==
+
 svelte-flatpickr@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/svelte-flatpickr/-/svelte-flatpickr-2.4.0.tgz#190871fc3305956c8c8fd3601cd036b8ac71ef49"
@@ -5822,6 +6065,11 @@ svelte@3.23.x:
   version "3.23.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.0.tgz#bbcd6887cf588c24a975b14467455abfff9acd3f"
 
+svelte@^3.9.2:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
+  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
+
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -6153,10 +6401,43 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/server/src/electron.js b/packages/server/src/electron.js
index 636ddc8b46..3215e52b05 100644
--- a/packages/server/src/electron.js
+++ b/packages/server/src/electron.js
@@ -38,7 +38,7 @@ async function startApp() {
     app.server = require("./app")
     win = new BrowserWindow({
       width: 1920,
-      height: 1080,
+      height: 1080
     })
     win.setTitle(APP_TITLE)
     win.loadURL(APP_URL)

From 86ae8d038a52a0931ad7e7ec4295a83f70e26111 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 15 Sep 2020 16:22:13 +0100
Subject: [PATCH 02/15] file attachments and processing working, basic design
 for dropzone

---
 packages/builder/src/builderStore/api.js      |   9 +-
 .../src/components/common/Dropzone.old.svelte |  39 ++
 .../src/components/common/Dropzone.svelte     | 137 +++--
 .../database/DataTable/ModelDataTable.svelte  |   2 +-
 .../modals/RecordFieldControl.svelte          |   3 +-
 packages/builder/yarn.lock                    | 269 +---------
 packages/server/package.json                  |   1 +
 .../server/src/api/controllers/deploy/aws.js  |  73 ++-
 .../api/controllers/static/imageProcessing.js |  14 +
 .../{static.js => static/index.js}            |  55 +-
 packages/server/src/api/routes/static.js      |   4 +
 packages/server/yarn.lock                     | 498 +++++++++++++++++-
 12 files changed, 770 insertions(+), 334 deletions(-)
 create mode 100644 packages/builder/src/components/common/Dropzone.old.svelte
 create mode 100644 packages/server/src/api/controllers/static/imageProcessing.js
 rename packages/server/src/api/controllers/{static.js => static/index.js} (62%)

diff --git a/packages/builder/src/builderStore/api.js b/packages/builder/src/builderStore/api.js
index 116222409f..46ae7457f1 100644
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@@ -1,7 +1,8 @@
-const apiCall = method => async (url, body) => {
-  const headers = {
-    "Content-Type": "application/json",
-  }
+const apiCall = method => async (
+  url, 
+  body, 
+  headers = { "Content-Type": "application/json" }
+) => {
   const response = await fetch(url, {
     method: method,
     body: body && JSON.stringify(body),
diff --git a/packages/builder/src/components/common/Dropzone.old.svelte b/packages/builder/src/components/common/Dropzone.old.svelte
new file mode 100644
index 0000000000..46bb81c7a7
--- /dev/null
+++ b/packages/builder/src/components/common/Dropzone.old.svelte
@@ -0,0 +1,39 @@
+<script>
+  import FilePond, { registerPlugin } from "svelte-filepond"
+  import "filepond/dist/filepond.min.css"
+  import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
+
+  // Import the Image EXIF Orientation and Image Preview plugins
+  // Note: These need to be installed separately
+  // `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
+  import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
+  import FilePondPluginImagePreview from "filepond-plugin-image-preview"
+
+  // Register the plugins
+  registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)
+
+  // a reference to the component, used to call FilePond methods
+  let pond
+
+  // pond.getFiles() will return the active files
+
+  // the name to use for the internal file input
+  let name = "filepond"
+
+  // handle filepond events
+  function handleInit() {
+    console.log("FilePond has initialised")
+  }
+
+  function handleAddFile(err, fileItem) {
+    console.log("A file has been added", fileItem)
+  }
+</script>
+
+<FilePond
+  bind:this={pond}
+  {name}
+  server="/api"
+  allowMultiple={true}
+  oninit={handleInit}
+  onaddfile={handleAddFile} />
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 46bb81c7a7..692bb5b0b5 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,39 +1,116 @@
 <script>
-  import FilePond, { registerPlugin } from "svelte-filepond"
-  import "filepond/dist/filepond.min.css"
-  import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
+  import { Heading, Body } from "@budibase/bbui"
+  import api from "builderStore/api"
+  import { fade } from "svelte/transition"
 
-  // Import the Image EXIF Orientation and Image Preview plugins
-  // Note: These need to be installed separately
-  // `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
-  import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
-  import FilePondPluginImagePreview from "filepond-plugin-image-preview"
+  export let files = []
 
-  // Register the plugins
-  registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)
+  let selectedImage = files[0]
 
-  // a reference to the component, used to call FilePond methods
-  let pond
-
-  // pond.getFiles() will return the active files
-
-  // the name to use for the internal file input
-  let name = "filepond"
-
-  // handle filepond events
-  function handleInit() {
-    console.log("FilePond has initialised")
+  function fetchPresignedUrl() {
+    console.log("Fetching the presigned URL")
   }
 
-  function handleAddFile(err, fileItem) {
-    console.log("A file has been added", fileItem)
+  // async function uploadFiles() {
+  //   let formData = new FormData()
+  //   const uploadMeta = await fetchPresignedUrl()
+  //   const { file, url } = await uploadMeta.json()
+
+  //   formData.append("acl", "public-read")
+  //   formData.append("Content-Type", file.type)
+  //   formData.append("file", file)
+
+  //   try {
+  //     await api.post(url, {
+  //       body: formData,
+  //       headers: {
+  //         "Content-Type": "multipart/form-data",
+  //       },
+  //     })
+  //   } catch (err) {
+  //     console.error(`Error uploading file: ${file}`, err)
+  //   }
+  // }
+
+  async function processFiles(evt) {
+    const filesToProcess = Array.from(evt.target.files).map(
+      ({ name, path, size }) => ({ name, path, size })
+    )
+
+    const response = await api.post(`/api/files/process`, {
+      files: filesToProcess,
+    })
+    const processedFiles = await response.json()
+    files = [...files, ...processedFiles]
   }
 </script>
 
-<FilePond
-  bind:this={pond}
-  {name}
-  server="/api"
-  allowMultiple={true}
-  oninit={handleInit}
-  onaddfile={handleAddFile} />
+<!-- TODO: Show the images that are already there, provide an upload button below them -->
+<div class="dropzone">
+  <ul>
+    <Heading small black>Processed Files</Heading>
+    {#if selectedImage}
+      <li in:fade>
+        <img src={selectedImage.clientUrl} />
+        <div class="file-info">
+          <i class="ri-file-line file-icon" />
+          <Body medium white>{selectedImage.name}</Body>
+          <Body medium white>{selectedImage.size / 1000}KB</Body>
+        </div>
+      </li>
+    {/if}
+  </ul>
+  <Heading small black>Upload</Heading>
+  <i class="ri-folder-upload-line" />
+  <input type="file" multiple on:change={processFiles} />
+</div>
+
+<style>
+  .dropzone {
+    padding: var(--spacing-l);
+    border: 2px dashed var(--blue);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 10px;
+  }
+
+  li {
+    position: relative;
+  }
+
+  img {
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  i {
+    font-size: 4em;
+  }
+
+  .file-icon {
+    font-size: 2.5em;
+    color: var(--white);
+  }
+
+  .file-info {
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 200px;
+    text-overflow: ellipsis;
+  }
+
+  ul {
+    padding: 0;
+    display: grid;
+    grid-gap: 5px;
+    list-style-type: none;
+  }
+</style>
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
index 36280498c8..038c2d7481 100644
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
@@ -92,7 +92,7 @@
                 <LinkedRecord field={schema[header]} ids={row[header]} />
               {:else if schema[header].type === 'attachment'}
                 {#each row[header] || [] as img}
-                  <img width="100" height="100" src={`file://${img}`} />
+                  <img width="100" height="100" src={img.clientUrl} />
                 {/each}
               {:else}{getOr('', header, row)}{/if}
             </td>
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
index 627d77450c..f69eb498a4 100644
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
@@ -57,8 +57,7 @@
   <DatePicker bind:value />
 {:else if type === 'file'}
   <Label small forAttr={'dropzone-label'}>{meta.name}</Label>
-  <Dropzone />
-  <!-- <input type="file" multiple on:change={handleInput} /> -->
+  <Dropzone bind:files={value} />
 {:else}
   {#if type === 'checkbox'}
     <label>{meta.name}</label>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 6b89f70866..4c5017690e 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -695,21 +695,6 @@
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
 
-"@budibase/client@^0.1.19":
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.19.tgz#3906781423ab4626118c981657ecf7a4578c547c"
-  integrity sha512-crxnLgebsh6CR0aMleDahY/1vFPbveG6JuSS/EVZeoBmckzK8hwiUQYQhIlf68nZfzWsCE/M9TX7SJxsrKY3bQ==
-  dependencies:
-    "@nx-js/compiler-util" "^2.0.0"
-    bcryptjs "^2.4.3"
-    deep-equal "^2.0.1"
-    lodash "^4.17.15"
-    lunr "^2.3.5"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-    shortid "^2.2.8"
-    svelte "^3.9.2"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -959,11 +944,6 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@nx-js/compiler-util@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
-  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==
-
 "@polka/url@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31"
@@ -1390,11 +1370,6 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1449,13 +1424,6 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
-available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1530,11 +1498,6 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-bcryptjs@^2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/bcryptjs/-/bcryptjs-2.4.3.tgz#9ab5627b93e60621ff7cdac5da9733027df1d0cb"
-  integrity sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=
-
 binary-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.0.0.tgz#23c0df14f6a88077f5f986c0d167ec03c3d5537c"
@@ -2418,26 +2381,6 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
-deep-equal@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
-  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
-  dependencies:
-    es-abstract "^1.17.5"
-    es-get-iterator "^1.1.0"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.0.5"
-    isarray "^2.0.5"
-    object-is "^1.1.2"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.2"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2607,54 +2550,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.4:
-  version "1.17.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
-  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-regex "^1.1.0"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-abstract@^1.18.0-next.0:
-  version "1.18.0-next.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
-  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.2.0"
-    is-negative-zero "^2.0.0"
-    is-regex "^1.1.1"
-    object-inspect "^1.8.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
-
-es-get-iterator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
-  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
-  dependencies:
-    es-abstract "^1.17.4"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2983,7 +2878,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3357,31 +3252,16 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
-is-bigint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
-  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
-  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3390,11 +3270,6 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
-is-callable@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
-  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
-
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3413,7 +3288,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
 
@@ -3478,25 +3353,10 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
-  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
-is-negative-zero@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
-  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
-
-is-number-object@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3553,18 +3413,6 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-regex@^1.1.0, is-regex@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
-  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
-  dependencies:
-    has-symbols "^1.0.1"
-
-is-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
-  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -3573,41 +3421,16 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
-is-string@^1.0.4, is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   dependencies:
     has-symbols "^1.0.1"
 
-is-typed-array@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
-  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
-  dependencies:
-    available-typed-arrays "^1.0.0"
-    es-abstract "^1.17.4"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3628,11 +3451,6 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4446,11 +4264,6 @@ ltgt@^2.1.2:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
 
-lunr@^2.3.5:
-  version "2.3.9"
-  resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
-  integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
-
 magic-string@^0.22.5:
   version "0.22.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
@@ -4748,19 +4561,6 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
-object-inspect@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
-  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
-
-object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
-  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5271,19 +5071,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
-regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5681,21 +5468,13 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
-shortid@^2.2.15, shortid@^2.2.8:
+shortid@^2.2.15:
   version "2.2.15"
   resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.15.tgz#2b902eaa93a69b11120373cd42a1f1fe4437c122"
   integrity sha512-5EaCy2mx2Jgc/Fdn9uuDuNIIfWBpzY4XIlhoqtXF6qsf+/+SGZ+FxDdX/ZsMZiWupIWNqAEmiNY4RC+LSmCeOw==
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
-  dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5922,7 +5701,7 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
+string.prototype.trimend@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5945,7 +5724,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
+string.prototype.trimstart@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -6065,11 +5844,6 @@ svelte@3.23.x:
   version "3.23.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.23.0.tgz#bbcd6887cf588c24a975b14467455abfff9acd3f"
 
-svelte@^3.9.2:
-  version "3.24.1"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.24.1.tgz#aca364937dd1df27fe131e2a4c234acb6061db4b"
-  integrity sha512-OX/IBVUJSFo1rnznXdwf9rv6LReJ3qQ0PwRjj76vfUWyTfbHbR9OXqJBnUrpjyis2dwYcbT2Zm1DFjOOF1ZbbQ==
-
 symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -6401,43 +6175,10 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
-  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
-  dependencies:
-    is-bigint "^1.0.0"
-    is-boolean-object "^1.0.0"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-symbol "^1.0.2"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which-typed-array@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
-  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    es-abstract "^1.17.5"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/server/package.json b/packages/server/package.json
index 5452a10208..27b55f48ef 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -69,6 +69,7 @@
     "pino-pretty": "^4.0.0",
     "pouchdb": "^7.2.1",
     "pouchdb-all-dbs": "^1.0.2",
+    "sharp": "^0.26.0",
     "squirrelly": "^7.5.0",
     "tar-fs": "^2.1.0",
     "uuid": "^3.3.2",
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 5355eeefd8..4e52c179b4 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -63,6 +63,42 @@ function walkDir(dirPath, callback) {
   }
 }
 
+/**
+ * Walk a directory and return an array of promises for uploading all the files
+ * inside that directory to s3.
+ * @param {Object} config
+ * path: path to read files from on disk  
+ * s3Key: the path in s3 to upload the directory files to
+ * s3: s3 client object
+ */
+function uploadFiles({
+  path,
+  s3Key,
+  s3,
+  metadata
+}) {
+  const uploads = []
+
+  walkDir(path, function prepareUploadsForS3(filePath) {
+    const fileExtension = [...filePath.split(".")].pop()
+    const fileBytes = fs.readFileSync(filePath)
+
+    const upload = s3
+      .upload({
+        Key: filePath.replace(path, s3Key),
+        Body: fileBytes,
+        ContentType: CONTENT_TYPE_MAP[fileExtension],
+        Metadata: metadata,
+      })
+      .promise()
+
+    uploads.push(upload)
+  })
+
+  return uploads
+}
+
+
 exports.uploadAppAssets = async function({
   appId,
   credentials,
@@ -86,30 +122,33 @@ exports.uploadAppAssets = async function({
 
   const appPages = fs.readdirSync(appAssetsPath)
 
-  const uploads = []
+  let uploads = []
 
   for (let page of appPages) {
-    walkDir(`${appAssetsPath}/${page}`, function prepareUploadsForS3(filePath) {
-      const fileExtension = [...filePath.split(".")].pop()
-      const fileBytes = fs.readFileSync(filePath)
+    // Upload HTML, CSS and JS for each page of the web app
+    const pageAssetUploads = uploadFiles({
+      path: `${appAssetsPath}/${page}`,
+      s3Key: `assets/${appId}`,
+      s3,
+      metadata: { accountId }
+    });
 
-      const upload = s3
-        .upload({
-          Key: filePath.replace(appAssetsPath, `assets/${appId}`),
-          Body: fileBytes,
-          ContentType: CONTENT_TYPE_MAP[fileExtension],
-          Metadata: {
-            accountId,
-          },
-        })
-        .promise()
-
-      uploads.push(upload)
-    })
+    uploads = [...uploads, ...pageAssetUploads];
   }
 
+  // Upload file attachments
+  const attachmentUploads = uploadFiles({
+    path: `${budibaseAppsDir()}/${appId}/attachments`,
+    s3Key: `assets/${appId}/attachments`,
+    s3,
+    metadata: { accountId }
+  })
+
+  uploads = [...uploads, ...attachmentUploads]
+
   try {
     await Promise.all(uploads)
+    // TODO: update dynamoDB with a synopsis of the app deployment for historical purposes
     await invalidateCDN(cfDistribution, appId)
   } catch (err) {
     console.error("Error uploading budibase app assets to s3", err)
diff --git a/packages/server/src/api/controllers/static/imageProcessing.js b/packages/server/src/api/controllers/static/imageProcessing.js
new file mode 100644
index 0000000000..923b4fff53
--- /dev/null
+++ b/packages/server/src/api/controllers/static/imageProcessing.js
@@ -0,0 +1,14 @@
+const fs = require("fs");
+const sharp = require("sharp");
+
+const SIZES = []
+
+const IMG_FORMATS = ["png", "jpeg", "jpg", "svg"]
+
+function processImage({ path, outputPath }) {
+  return sharp(path)
+  .resize(200)
+  .toFile(outputPath)
+}
+
+exports.processImage = processImage
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static/index.js
similarity index 62%
rename from packages/server/src/api/controllers/static.js
rename to packages/server/src/api/controllers/static/index.js
index a3f3cb2421..d9e030026a 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -3,20 +3,49 @@ const { resolve, join } = require("path")
 const {
   budibaseAppsDir,
   budibaseTempDir,
-} = require("../../utilities/budibaseDir")
-const setBuilderToken = require("../../utilities/builder/setBuilderToken")
-const { ANON_LEVEL_ID } = require("../../utilities/accessLevels")
+} = require("../../../utilities/budibaseDir")
+const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
+const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels")
 const jwt = require("jsonwebtoken")
 const fetch = require("node-fetch")
+const imageProcessing = require("./imageProcessing")
+const fs = require("fs")
 
 exports.serveBuilder = async function(ctx) {
-  let builderPath = resolve(__dirname, "../../../builder")
+  let builderPath = resolve(__dirname, "../../../../builder")
   if (ctx.file === "index.html") {
     setBuilderToken(ctx)
   }
   await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
+exports.processLocalFileUpload = async function(ctx) {
+  const { files } = ctx.request.body
+
+  const attachmentsPath = resolve(budibaseAppsDir(), ctx.user.appId, "attachments")
+
+  // create attachments dir if it doesnt exist
+  !fs.existsSync(attachmentsPath) && fs.mkdirSync(attachmentsPath, { recursive: true })
+
+
+  const filesToProcess = files.map(file => ({
+    ...file,
+    outputPath: join(attachmentsPath, file.name),
+    clientUrl: join("/attachments", file.name),
+    uploaded: false
+  }))
+
+  // TODO: read the file (into memory first, then we will stream it)
+  const imageProcessOperations = filesToProcess.map(file => imageProcessing.processImage(file))
+  
+  try {
+    const responses = await Promise.all(imageProcessOperations);
+    ctx.body = filesToProcess 
+  } catch (err) {
+    ctx.throw(500, err);
+  }
+}
+
 exports.serveApp = async function(ctx) {
   const mainOrAuth = ctx.isAuthenticated ? "main" : "unauthenticated"
 
@@ -62,6 +91,24 @@ exports.serveApp = async function(ctx) {
   await send(ctx, ctx.file || "index.html", { root: ctx.devPath || appPath })
 }
 
+exports.serveAttachment = async function(ctx) {
+  const appId = ctx.user.appId;
+
+  const attachmentsPath = resolve(budibaseAppsDir(), appId, "attachments")
+
+  // Serve from CloudFront
+  if (process.env.CLOUD) {
+    const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/attachments/${ctx.file}`
+
+    const response = await fetch(S3_URL)
+    const body = await response.text()
+    ctx.body = body
+    return
+  }
+
+  await send(ctx, ctx.file, { root: attachmentsPath })
+}
+
 exports.serveAppAsset = async function(ctx) {
   // default to homedir
   const mainOrAuth = ctx.isAuthenticated ? "main" : "unauthenticated"
diff --git a/packages/server/src/api/routes/static.js b/packages/server/src/api/routes/static.js
index 6fff1996fa..60df6b3d42 100644
--- a/packages/server/src/api/routes/static.js
+++ b/packages/server/src/api/routes/static.js
@@ -2,6 +2,8 @@ const Router = require("@koa/router")
 const controller = require("../controllers/static")
 const { budibaseTempDir } = require("../../utilities/budibaseDir")
 const env = require("../../environment")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/accessLevels")
 
 const router = Router()
 
@@ -21,8 +23,10 @@ if (env.NODE_ENV !== "production") {
 }
 
 router
+  .post("/api/files/process", authorized(BUILDER), controller.processLocalFileUpload)
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)
+  .get("/attachments/:file*", controller.serveAttachment)
   .get("/:appId/:path*", controller.serveApp)
 
 module.exports = router
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 77bbbecb62..5e04c7957b 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -172,6 +172,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.1.19":
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.21.tgz#db414445c132b373f6c25e39d62628eb60cd8ac3"
+  integrity sha512-/ju0vYbWh9MUjmxkGNlOL4S/VQd4p5mbz5rHu0yt55ak9t/yyzI6PzBBxlucBeRbXYd9OFynFjy1pvYt1v+z9Q==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -776,6 +785,19 @@ app-builder-lib@22.7.0:
     semver "^7.3.2"
     temp-file "^3.3.7"
 
+aproba@^1.0.3:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
+  integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
+
+are-we-there-yet@~1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+  integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
+  dependencies:
+    delegates "^1.0.0"
+    readable-stream "^2.0.6"
+
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -811,6 +833,11 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -869,6 +896,13 @@ atomic-sleep@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.706.0:
   version "2.706.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.706.0.tgz#09f65e9a91ecac5a635daf934082abae30eca953"
@@ -1303,6 +1337,11 @@ co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
 
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -1310,7 +1349,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   dependencies:
@@ -1326,10 +1365,26 @@ color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
 
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -1395,6 +1450,11 @@ configstore@^5.0.1:
     write-file-atomic "^3.0.0"
     xdg-basedir "^4.0.0"
 
+console-control-strings@^1.0.0, console-control-strings@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
+  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+
 content-disposition@~0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -1537,6 +1597,40 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
+decompress-response@^4.2.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
+  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
+  dependencies:
+    mimic-response "^2.0.0"
+
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -1624,6 +1718,11 @@ destroy@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
 
+detect-libc@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -1863,6 +1962,54 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2093,6 +2240,11 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expand-template@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
+  integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
+
 expect@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
@@ -2377,6 +2529,20 @@ functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
+gauge@~2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
+  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
+  dependencies:
+    aproba "^1.0.3"
+    console-control-strings "^1.0.0"
+    has-unicode "^2.0.0"
+    object-assign "^4.1.0"
+    signal-exit "^3.0.0"
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+    wide-align "^1.1.0"
+
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@@ -2414,6 +2580,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-from-package@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+  integrity sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=
+
 glob-parent@^5.0.0, glob-parent@~5.1.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
@@ -2531,6 +2702,11 @@ has-symbols@^1.0.0, has-symbols@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
 
+has-unicode@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
+
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -2753,16 +2929,36 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -2771,6 +2967,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
+is-callable@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
+  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -2793,7 +2994,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
 
@@ -2827,6 +3028,13 @@ is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  dependencies:
+    number-is-nan "^1.0.0"
+
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -2856,10 +3064,25 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
 
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -2890,10 +3113,27 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -2908,10 +3148,30 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -2932,6 +3192,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -3976,13 +4241,23 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
 
+mimic-response@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
+  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
+
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
 "minimatch@2 || 3", minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
 
@@ -4051,6 +4326,11 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+napi-build-utils@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
+  integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
+
 napi-macros@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.0.0.tgz#2b6bae421e7b96eb687aa6c77a7858640670001b"
@@ -4067,6 +4347,18 @@ nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
 
+node-abi@^2.7.0:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.19.1.tgz#6aa32561d0a5e2fdb6810d8c25641b657a8cea85"
+  integrity sha512-HbtmIuByq44yhAzK7b9j/FelKlHYISKQn0mtvcBrU5QBkhoCMp5bu8Hv5AI34DcKfOAcJBcOEMwLlwO62FFu9A==
+  dependencies:
+    semver "^5.4.1"
+
+node-addon-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.0.tgz#812446a1001a54f71663bed188314bba07e09247"
+  integrity sha512-sSHCgWfJ+Lui/u+0msF3oyCgvdkhxDbkCS6Q8uiJquzOimkJBvX6hl5aSSA7DR1XbMpdM8r7phjcF63sF4rkKg==
+
 node-fetch@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.4.1.tgz#b2e38f1117b8acbedbe0524f041fb3177188255d"
@@ -4112,6 +4404,11 @@ nodemon@^2.0.4:
     undefsafe "^2.0.2"
     update-notifier "^4.0.0"
 
+noop-logger@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
+  integrity sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=
+
 nopt@~1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@@ -4154,6 +4451,21 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
+npmlog@^4.0.1, npmlog@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
+  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
+  dependencies:
+    are-we-there-yet "~1.1.2"
+    console-control-strings "~1.1.0"
+    gauge "~2.7.3"
+    set-blocking "~2.0.0"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
 nwsapi@^2.0.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -4166,7 +4478,7 @@ object-assign@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
 
-object-assign@^4.0.1:
+object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -4182,6 +4494,19 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4584,6 +4909,27 @@ pouchdb@^7.2.1:
     uuid "3.3.3"
     vuvuzela "1.0.3"
 
+prebuild-install@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.5.tgz#e7e71e425298785ea9d22d4f958dbaccf8bb0e1b"
+  integrity sha512-YmMO7dph9CYKi5IR/BzjOJlRzpxGGVo1EsLSUZ0mt/Mq0HWZIHOKHHcHdT69yG54C9m6i45GpItwRHpk0Py7Uw==
+  dependencies:
+    detect-libc "^1.0.3"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp "^0.5.1"
+    napi-build-utils "^1.0.1"
+    node-abi "^2.7.0"
+    noop-logger "^0.1.1"
+    npmlog "^4.0.1"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^3.0.3"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+    which-pm-runs "^1.0.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -4694,7 +5040,7 @@ raw-body@^2.2.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.2.8:
+rc@^1.2.7, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   dependencies:
@@ -4775,7 +5121,7 @@ readable-stream@1.0.33:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.2.2, readable-stream@^2.3.5:
+readable-stream@^2.0.6, readable-stream@^2.2.2, readable-stream@^2.3.5:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   dependencies:
@@ -4828,6 +5174,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -5074,7 +5433,7 @@ server-destroy@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
 
-set-blocking@^2.0.0:
+set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
 
@@ -5095,6 +5454,21 @@ setprototypeof@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
 
+sharp@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.0.tgz#ff4c8d3200a7a1f76c69c53fd11879609d2ff062"
+  integrity sha512-MNldekb9ZnliJAD+qP6uBTf3Wd6HaDVhKYbxXG+SQDvit9fa+2X4wECJvMRF8FLdY4saojrz3BHsnt4OmJw7xg==
+  dependencies:
+    color "^3.1.2"
+    detect-libc "^1.0.3"
+    node-addon-api "^3.0.0"
+    npmlog "^4.1.2"
+    prebuild-install "^5.3.5"
+    semver "^7.3.2"
+    simple-get "^4.0.0"
+    tar-fs "^2.1.0"
+    tunnel-agent "^0.6.0"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -5123,10 +5497,48 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
 
+simple-concat@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+
+simple-get@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.0.tgz#b45be062435e50d159540b576202ceec40b9c6b3"
+  integrity sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==
+  dependencies:
+    decompress-response "^4.2.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
+simple-get@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675"
+  integrity sha512-ZalZGexYr3TA0SwySsr5HlgOOinS4Jsa8YB2GJ6lUNAazyAu4KG/VmzMTwAt2YVXzzVj8QmefmAonZIK2BSGcQ==
+  dependencies:
+    decompress-response "^6.0.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sisteransi@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -5323,6 +5735,23 @@ string-length@^2.0.0:
     astral-regex "^1.0.0"
     strip-ansi "^4.0.0"
 
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+"string-width@^1.0.2 || 2":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
 string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -5339,7 +5768,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5362,7 +5791,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -5385,7 +5814,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-strip-ansi@^3.0.0:
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
   dependencies:
@@ -5493,7 +5922,7 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tar-fs@^2.1.0:
+tar-fs@^2.0.0, tar-fs@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5"
   dependencies:
@@ -5912,16 +6341,61 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
+which-pm-runs@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb"
+  integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=
+
+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   dependencies:
     isexe "^2.0.0"
 
+wide-align@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
+  integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
+  dependencies:
+    string-width "^1.0.2 || 2"
+
 widest-line@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"

From b1dbc7cc621d8e7f31dd2a60dcc0d288a490273d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 16 Sep 2020 12:18:47 +0100
Subject: [PATCH 03/15] Dropzone styling

---
 .../src/components/common/Dropzone.svelte     | 180 +++++++++++++-----
 .../database/DataTable/ModelDataTable.svelte  |   5 +
 .../server/src/api/controllers/deploy/aws.js  |  74 ++++---
 .../src/api/controllers/deploy/index.js       |   1 +
 .../src/api/controllers/static/index.js       |  38 +++-
 5 files changed, 213 insertions(+), 85 deletions(-)

diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 692bb5b0b5..7ec394063c 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,36 +1,13 @@
 <script>
-  import { Heading, Body } from "@budibase/bbui"
+  import { Heading, Body, Button } from "@budibase/bbui"
   import api from "builderStore/api"
   import { fade } from "svelte/transition"
 
   export let files = []
 
-  let selectedImage = files[0]
+  let selectedImageIdx = 0
 
-  function fetchPresignedUrl() {
-    console.log("Fetching the presigned URL")
-  }
-
-  // async function uploadFiles() {
-  //   let formData = new FormData()
-  //   const uploadMeta = await fetchPresignedUrl()
-  //   const { file, url } = await uploadMeta.json()
-
-  //   formData.append("acl", "public-read")
-  //   formData.append("Content-Type", file.type)
-  //   formData.append("file", file)
-
-  //   try {
-  //     await api.post(url, {
-  //       body: formData,
-  //       headers: {
-  //         "Content-Type": "multipart/form-data",
-  //       },
-  //     })
-  //   } catch (err) {
-  //     console.error(`Error uploading file: ${file}`, err)
-  //   }
-  // }
+  $: selectedImage = files[selectedImageIdx]
 
   async function processFiles(evt) {
     const filesToProcess = Array.from(evt.target.files).map(
@@ -41,34 +18,54 @@
       files: filesToProcess,
     })
     const processedFiles = await response.json()
-    files = [...files, ...processedFiles]
+    files = [...processedFiles, ...files]
+  }
+
+  function navigateLeft() {
+    if (selectedImageIdx === 0) return
+    selectedImageIdx -= 1
+  }
+
+  function navigateRight() {
+    selectedImageIdx += 1
   }
 </script>
 
-<!-- TODO: Show the images that are already there, provide an upload button below them -->
 <div class="dropzone">
   <ul>
-    <Heading small black>Processed Files</Heading>
     {#if selectedImage}
-      <li in:fade>
+      <!-- if block necessary for svelte transitions to work -->
+      <li transition:fade>
+        <header>
+          <span>
+            <i class="ri-image-2-line file-icon" />
+            {selectedImage.extension}
+          </span>
+          <p>{selectedImage.size / 1000}KB</p>
+        </header>
+        {#if selectedImageIdx !== 0}
+          <div class="nav left" on:click={navigateLeft}>
+            <i class="ri-arrow-left-line" />
+          </div>
+        {/if}
         <img src={selectedImage.clientUrl} />
-        <div class="file-info">
-          <i class="ri-file-line file-icon" />
-          <Body medium white>{selectedImage.name}</Body>
-          <Body medium white>{selectedImage.size / 1000}KB</Body>
-        </div>
+        {#if selectedImageIdx !== files.length - 1}
+          <div class="nav right" on:click={navigateRight}>
+            <i class="ri-arrow-right-line" />
+          </div>
+        {/if}
       </li>
     {/if}
   </ul>
-  <Heading small black>Upload</Heading>
   <i class="ri-folder-upload-line" />
-  <input type="file" multiple on:change={processFiles} />
+  <input id="file-upload" type="file" multiple on:change={processFiles} />
+  <label for="file-upload">Upload</label>
 </div>
 
 <style>
   .dropzone {
     padding: var(--spacing-l);
-    border: 2px dashed var(--blue);
+    border: 2px dashed var(--grey-7);
     text-align: center;
     display: flex;
     align-items: center;
@@ -76,35 +73,84 @@
     border-radius: 10px;
   }
 
+  input[type="file"] {
+    display: none;
+  }
+
+  label {
+    font-family: var(--font-sans);
+    cursor: pointer;
+    font-weight: 600;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--border-radius-s);
+    color: var(--white);
+    padding: var(--spacing-s) var(--spacing-l);
+    transition: all 0.2s ease 0s;
+    display: inline-flex;
+    text-rendering: optimizeLegibility;
+    min-width: auto;
+    outline: none;
+    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
+    -webkit-box-align: center;
+    user-select: none;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin-top: 10px;
+    width: 100%;
+    border: solid 1.5px var(--ink);
+    background-color: var(--ink);
+  }
+
+  div.nav {
+    position: absolute;
+    background: black;
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    bottom: 5px;
+    border-radius: 10px;
+    transition: 0.2s transform;
+  }
+
+  .nav:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+  }
+
+  .left {
+    left: 5px;
+  }
+
+  .right {
+    right: 5px;
+  }
+
   li {
     position: relative;
+    height: 300px;
+    background: var(--grey-7);
+    display: flex;
+    justify-content: center;
+    border-radius: 10px;
   }
 
   img {
     border-radius: 10px;
     width: 100%;
-    height: 100%;
     box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
+    object-fit: contain;
   }
 
   i {
-    font-size: 4em;
+    font-size: 3em;
   }
 
   .file-icon {
-    font-size: 2.5em;
     color: var(--white);
-  }
-
-  .file-info {
-    position: absolute;
-    top: 7px;
-    left: 7px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 200px;
-    text-overflow: ellipsis;
+    font-size: 2em;
+    margin-right: 5px;
   }
 
   ul {
@@ -112,5 +158,35 @@
     display: grid;
     grid-gap: 5px;
     list-style-type: none;
+    width: 100%;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: absolute;
+    background: linear-gradient(
+      180deg,
+      rgba(12, 12, 12, 1),
+      rgba(60, 60, 60, 0)
+    );
+    width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    height: 60px;
+  }
+
+  header span {
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    margin-left: var(--spacing-m);
+  }
+
+  header p {
+    color: var(--grey-5);
+    margin-right: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
index 038c2d7481..9726b053fa 100644
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
@@ -112,6 +112,11 @@
   section {
     margin-bottom: 20px;
   }
+
+  img {
+    object-fit: contain;
+  }
+
   .title {
     font-size: 24px;
     font-weight: 600;
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 4e52c179b4..9d994b3091 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -2,6 +2,7 @@ const fs = require("fs")
 const AWS = require("aws-sdk")
 const fetch = require("node-fetch")
 const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
+const PouchDB = require("../../../db")
 
 async function invalidateCDN(cfDistribution, appId) {
   const cf = new AWS.CloudFront({})
@@ -62,7 +63,6 @@ function walkDir(dirPath, callback) {
     }
   }
 }
-
 /**
  * Walk a directory and return an array of promises for uploading all the files
  * inside that directory to s3.
@@ -79,19 +79,8 @@ function uploadFiles({
 }) {
   const uploads = []
 
-  walkDir(path, function prepareUploadsForS3(filePath) {
-    const fileExtension = [...filePath.split(".")].pop()
-    const fileBytes = fs.readFileSync(filePath)
-
-    const upload = s3
-      .upload({
-        Key: filePath.replace(path, s3Key),
-        Body: fileBytes,
-        ContentType: CONTENT_TYPE_MAP[fileExtension],
-        Metadata: metadata,
-      })
-      .promise()
-
+  walkDir(path, function(filePath) {
+    const upload = prepareUploadForS3(filePath, metadata)
     uploads.push(upload)
   })
 
@@ -99,8 +88,24 @@ function uploadFiles({
 }
 
 
+function prepareUploadForS3({ filePath, s3Key, metadata }) {
+  const fileExtension = [...filePath.split(".")].pop()
+  const fileBytes = fs.readFileSync(filePath)
+  return s3
+    .upload({
+      Key: s3Key,
+      Body: fileBytes,
+      ContentType: CONTENT_TYPE_MAP[fileExtension],
+      Metadata: metadata,
+    })
+    .promise()
+}
+
+
+
 exports.uploadAppAssets = async function({
   appId,
+  instanceId,
   credentials,
   bucket,
   cfDistribution,
@@ -126,25 +131,40 @@ exports.uploadAppAssets = async function({
 
   for (let page of appPages) {
     // Upload HTML, CSS and JS for each page of the web app
-    const pageAssetUploads = uploadFiles({
-      path: `${appAssetsPath}/${page}`,
-      s3Key: `assets/${appId}`,
-      s3,
-      metadata: { accountId }
-    });
+    walkDir(path, function(filePath) {
+      const appAssetUpload = prepareUploadForS3({
+        filePath,
+        s3Key: filePath.replace(path, `assets/${appId}`),
+        s3,
+        metadata: { accountId }
+      })
+      uploads.push(appAssetUpload)
+    })
 
     uploads = [...uploads, ...pageAssetUploads];
   }
 
   // Upload file attachments
-  const attachmentUploads = uploadFiles({
-    path: `${budibaseAppsDir()}/${appId}/attachments`,
-    s3Key: `assets/${appId}/attachments`,
-    s3,
-    metadata: { accountId }
-  })
+  const db = new PouchDB(instanceId)
+  const fileUploads = await db.get("_local/fileuploads")
+  if (fileUploads) {
+    fileUploads.awaitingUpload.forEach((file, idx) => {
 
-  uploads = [...uploads, ...attachmentUploads]
+      const attachmentUpload = prepareUploadForS3({
+        filePath: file.path,
+        s3Key: `assets/${appId}/${file.name}`,
+        s3,
+        metadata: { accountId }
+      })
+
+      uploads.push(attachmentUpload)
+
+      // move the pending upload to the uploaded array
+      fileUploads.awaitingUpload.splice(idx, 1);
+      fileUploads.uploaded.push(awaitingUpload);
+    })
+    db.put(fileUploads);
+  }
 
   try {
     await Promise.all(uploads)
diff --git a/packages/server/src/api/controllers/deploy/index.js b/packages/server/src/api/controllers/deploy/index.js
index 8e35d45ef2..34579b64c7 100644
--- a/packages/server/src/api/controllers/deploy/index.js
+++ b/packages/server/src/api/controllers/deploy/index.js
@@ -42,6 +42,7 @@ exports.deployApp = async function(ctx) {
     await uploadAppAssets({
       clientId,
       appId: ctx.user.appId,
+      instanceId: ctx.user.instanceId,
       ...credentials,
     })
 
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index d9e030026a..f93e345bba 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -4,12 +4,14 @@ const {
   budibaseAppsDir,
   budibaseTempDir,
 } = require("../../../utilities/budibaseDir")
+const CouchDB = require("../../../db")
 const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
 const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels")
 const jwt = require("jsonwebtoken")
 const fetch = require("node-fetch")
 const imageProcessing = require("./imageProcessing")
 const fs = require("fs")
+const uuid = require("uuid")
 
 exports.serveBuilder = async function(ctx) {
   let builderPath = resolve(__dirname, "../../../../builder")
@@ -27,19 +29,43 @@ exports.processLocalFileUpload = async function(ctx) {
   // create attachments dir if it doesnt exist
   !fs.existsSync(attachmentsPath) && fs.mkdirSync(attachmentsPath, { recursive: true })
 
+  const filesToProcess = files.map(file => {
+    const fileExtension = [...file.path.split(".")].pop()
+    // filenames converted to UUIDs so they are unique
+    const fileName = `${uuid.v4()}.${fileExtension}`
 
-  const filesToProcess = files.map(file => ({
-    ...file,
-    outputPath: join(attachmentsPath, file.name),
-    clientUrl: join("/attachments", file.name),
-    uploaded: false
-  }))
+    return {
+      ...file,
+      name: fileName,
+      extension: fileExtension,
+      outputPath: join(attachmentsPath, fileName),
+      clientUrl: join("/attachments", fileName)
+    }
+  })
 
   // TODO: read the file (into memory first, then we will stream it)
   const imageProcessOperations = filesToProcess.map(file => imageProcessing.processImage(file))
   
   try {
+    // TODO: get file sizes of images after resize
     const responses = await Promise.all(imageProcessOperations);
+
+    let fileUploads
+    // local document used to track which files need to be uploaded
+    // db.get throws an error if the document doesn't exist
+    // need to use a promise to default
+    const db = new CouchDB(ctx.user.instanceId);
+    await db.get("_local/fileuploads")
+      .then(data => fileUploads = data)
+      .catch(() => fileUploads = {
+        _id: "_local/fileuploads",
+        awaitingUpload: [],
+        uploaded: []
+      })
+
+    fileUploads.awaitingUpload = [...filesToProcess, ...fileUploads.awaitingUpload]
+    await db.put(fileUploads)
+
     ctx.body = filesToProcess 
   } catch (err) {
     ctx.throw(500, err);

From bd3a604c7afc64adcd9bb66f9eec8a30c9264ed2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 16 Sep 2020 13:29:18 +0100
Subject: [PATCH 04/15] more design updates on attachment picker

---
 .../src/components/common/Dropzone.svelte     | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 7ec394063c..500a875d88 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -6,13 +6,16 @@
   export let files = []
 
   let selectedImageIdx = 0
+  let fileDragged = false
 
   $: selectedImage = files[selectedImageIdx]
 
-  async function processFiles(evt) {
-    const filesToProcess = Array.from(evt.target.files).map(
-      ({ name, path, size }) => ({ name, path, size })
-    )
+  async function processFiles(fileList) {
+    const filesToProcess = Array.from(fileList).map(({ name, path, size }) => ({
+      name,
+      path,
+      size,
+    }))
 
     const response = await api.post(`/api/files/process`, {
       files: filesToProcess,
@@ -29,12 +32,37 @@
   function navigateRight() {
     selectedImageIdx += 1
   }
+
+  function handleFile(evt) {
+    processFiles(evt.target.files)
+  }
+
+  function handleDragOver(evt) {
+    evt.preventDefault()
+    fileDragged = true
+  }
+
+  function handleDragLeave(evt) {
+    evt.preventDefault()
+    fileDragged = false
+  }
+
+  function handleDrop(evt) {
+    evt.preventDefault()
+    processFiles(evt.dataTransfer.files)
+    fileDragged = false
+  }
 </script>
 
-<div class="dropzone">
+<div
+  class="dropzone"
+  on:dragover={handleDragOver}
+  on:dragleave={handleDragLeave}
+  on:dragenter={handleDragOver}
+  on:drop={handleDrop}
+  class:fileDragged>
   <ul>
     {#if selectedImage}
-      <!-- if block necessary for svelte transitions to work -->
       <li transition:fade>
         <header>
           <span>
@@ -58,7 +86,7 @@
     {/if}
   </ul>
   <i class="ri-folder-upload-line" />
-  <input id="file-upload" type="file" multiple on:change={processFiles} />
+  <input id="file-upload" type="file" multiple on:change={handleFile} />
   <label for="file-upload">Upload</label>
 </div>
 
@@ -71,6 +99,13 @@
     align-items: center;
     flex-direction: column;
     border-radius: 10px;
+    transition: all 0.2s;
+  }
+
+  .fileDragged {
+    border: 2px dashed var(--grey-7);
+    transform: scale(1.02);
+    background: var(--blue-light);
   }
 
   input[type="file"] {

From 494e04f19fb991b808633a74c8cc44fe9cdd7910 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 17 Sep 2020 12:45:28 +0100
Subject: [PATCH 05/15] allow deletion of images

---
 packages/builder/package.json                 |   3 -
 .../src/components/common/Dropzone.old.svelte |  39 ---
 .../src/components/common/Dropzone.svelte     |  83 +++++-
 .../database/DataTable/AttachmentList.svelte  |  64 +++++
 .../database/DataTable/ModelDataTable.svelte  |   9 +-
 .../database/DataTable/Table.svelte           |   8 +-
 .../builder/src/constants/backend/index.js    |   6 +
 packages/builder/yarn.lock                    | 256 ++++++++++++++++--
 .../server/src/api/controllers/deploy/aws.js  |  34 +--
 .../api/controllers/static/fileProcessor.js   |  24 ++
 .../api/controllers/static/imageProcessing.js |  14 -
 .../src/api/controllers/static/index.js       |  10 +-
 12 files changed, 415 insertions(+), 135 deletions(-)
 delete mode 100644 packages/builder/src/components/common/Dropzone.old.svelte
 create mode 100644 packages/builder/src/components/database/DataTable/AttachmentList.svelte
 create mode 100644 packages/server/src/api/controllers/static/fileProcessor.js
 delete mode 100644 packages/server/src/api/controllers/static/imageProcessing.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 04dab3bf5e..ad660d1f0e 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -73,9 +73,6 @@
     "deepmerge": "^4.2.2",
     "fast-sort": "^2.2.0",
     "feather-icons": "^4.21.0",
-    "filepond": "^4.20.1",
-    "filepond-plugin-image-exif-orientation": "^1.0.9",
-    "filepond-plugin-image-preview": "^4.6.4",
     "lodash": "^4.17.13",
     "mustache": "^4.0.1",
     "posthog-js": "1.3.1",
diff --git a/packages/builder/src/components/common/Dropzone.old.svelte b/packages/builder/src/components/common/Dropzone.old.svelte
deleted file mode 100644
index 46bb81c7a7..0000000000
--- a/packages/builder/src/components/common/Dropzone.old.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script>
-  import FilePond, { registerPlugin } from "svelte-filepond"
-  import "filepond/dist/filepond.min.css"
-  import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
-
-  // Import the Image EXIF Orientation and Image Preview plugins
-  // Note: These need to be installed separately
-  // `npm i filepond-plugin-image-preview filepond-plugin-image-exif-orientation --save`
-  import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation"
-  import FilePondPluginImagePreview from "filepond-plugin-image-preview"
-
-  // Register the plugins
-  registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview)
-
-  // a reference to the component, used to call FilePond methods
-  let pond
-
-  // pond.getFiles() will return the active files
-
-  // the name to use for the internal file input
-  let name = "filepond"
-
-  // handle filepond events
-  function handleInit() {
-    console.log("FilePond has initialised")
-  }
-
-  function handleAddFile(err, fileItem) {
-    console.log("A file has been added", fileItem)
-  }
-</script>
-
-<FilePond
-  bind:this={pond}
-  {name}
-  server="/api"
-  allowMultiple={true}
-  oninit={handleInit}
-  onaddfile={handleAddFile} />
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 500a875d88..2b78e3efe0 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,5 +1,6 @@
 <script>
   import { Heading, Body, Button } from "@budibase/bbui"
+  import { FILE_TYPES } from "constants/backend"
   import api from "builderStore/api"
   import { fade } from "svelte/transition"
 
@@ -10,6 +11,15 @@
 
   $: selectedImage = files[selectedImageIdx]
 
+  function determineFileIcon(extension) {
+    const ext = extension.toLowerCase()
+
+    if (FILE_TYPES.IMAGE.includes(ext)) return "ri-image-2-line"
+    if (FILE_TYPES.CODE.includes(ext)) return "ri-terminal-box-line"
+
+    return "ri-file-line"
+  }
+
   async function processFiles(fileList) {
     const filesToProcess = Array.from(fileList).map(({ name, path, size }) => ({
       name,
@@ -22,10 +32,15 @@
     })
     const processedFiles = await response.json()
     files = [...processedFiles, ...files]
+    selectedImageIdx = 0
+  }
+
+  function removeFile() {
+    files.splice(selectedImageIdx, 1)
+    files = files
   }
 
   function navigateLeft() {
-    if (selectedImageIdx === 0) return
     selectedImageIdx -= 1
   }
 
@@ -65,12 +80,16 @@
     {#if selectedImage}
       <li transition:fade>
         <header>
-          <span>
-            <i class="ri-image-2-line file-icon" />
-            {selectedImage.extension}
-          </span>
+          <div>
+            <i
+              class={`file-icon ${determineFileIcon(selectedImage.extension)}`} />
+            <span class="filename">{selectedImage.name}</span>
+          </div>
           <p>{selectedImage.size / 1000}KB</p>
         </header>
+        <div class="delete-button" on:click={removeFile}>
+          <i class="ri-close-line" />
+        </div>
         {#if selectedImageIdx !== 0}
           <div class="nav left" on:click={navigateLeft}>
             <i class="ri-arrow-left-line" />
@@ -99,12 +118,12 @@
     align-items: center;
     flex-direction: column;
     border-radius: 10px;
-    transition: all 0.2s;
+    transition: all 0.3s;
   }
 
   .fileDragged {
     border: 2px dashed var(--grey-7);
-    transform: scale(1.02);
+    transform: scale(1.03);
     background: var(--blue-light);
   }
 
@@ -144,7 +163,7 @@
     color: var(--white);
     display: flex;
     align-items: center;
-    bottom: 5px;
+    bottom: var(--spacing-s);
     border-radius: 10px;
     transition: 0.2s transform;
   }
@@ -155,11 +174,11 @@
   }
 
   .left {
-    left: 5px;
+    left: var(--spacing-s);
   }
 
   .right {
-    right: 5px;
+    right: var(--spacing-s);
   }
 
   li {
@@ -174,7 +193,7 @@
   img {
     border-radius: 10px;
     width: 100%;
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
     object-fit: contain;
   }
 
@@ -185,13 +204,13 @@
   .file-icon {
     color: var(--white);
     font-size: 2em;
-    margin-right: 5px;
+    margin-right: var(--spacing-s);
   }
 
   ul {
     padding: 0;
     display: grid;
-    grid-gap: 5px;
+    grid-gap: var(--spacing-s);
     list-style-type: none;
     width: 100%;
   }
@@ -212,16 +231,50 @@
     height: 60px;
   }
 
-  header span {
+  header > div {
     color: var(--white);
     display: flex;
     align-items: center;
     font-size: 15px;
     margin-left: var(--spacing-m);
+    width: 60%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
-  header p {
+  .filename {
+    overflow: hidden;
+    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;
+    opacity: 0;
+    transition: all 0.3s;
+    color: var(--white);
+  }
+
+  .delete-button i {
+    font-size: 2em;
+  }
+
+  .delete-button:hover {
+    opacity: 1;
+    cursor: pointer;
+    background: linear-gradient(
+      to top right,
+      rgba(60, 60, 60, 0),
+      rgba(255, 0, 0, 0.2)
+    );
+  }
 </style>
diff --git a/packages/builder/src/components/database/DataTable/AttachmentList.svelte b/packages/builder/src/components/database/DataTable/AttachmentList.svelte
new file mode 100644
index 0000000000..fedcaa73be
--- /dev/null
+++ b/packages/builder/src/components/database/DataTable/AttachmentList.svelte
@@ -0,0 +1,64 @@
+<script>
+  import { FILE_TYPES } from "constants/backend"
+
+  export let files
+  export let height = "70"
+  export let width = "70"
+</script>
+
+<div class="file-list">
+{#each files as file}
+  <div class="file">
+    {#if FILE_TYPES.IMAGE.includes(file.extension)}
+      <img {width} {height} src={file.clientUrl} />
+    {:else}
+      <i class="ri-file-line" />
+      <span class="extension">.{file.extension}</span>
+      <span>{file.name}</span>
+    {/if}
+  </div>
+{/each}
+</div>
+
+<style>
+  .file-list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: var(--spacing-m);
+    grid-template-columns: repeat(10, 1fr);
+  }
+  
+  img {
+    object-fit: contain;
+  }
+
+  i {
+    font-size: 36px;
+    margin-bottom: var(--spacing-m);
+  }
+
+  .file {
+    position: relative;
+    height: 75px;
+    width: 75px;
+    border: 2px dashed var(--grey-7);
+    padding: var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .extension {
+    position: absolute;
+    top: var(--spacing-s);
+    left: var(--spacing-s);
+    font-weight: 500;
+  }
+
+  span {
+    width: 75px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
index 9726b053fa..22883cc208 100644
--- a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
+++ b/packages/builder/src/components/database/DataTable/ModelDataTable.svelte
@@ -6,6 +6,7 @@
   import { Button, Icon } from "@budibase/bbui"
   import ActionButton from "components/common/ActionButton.svelte"
   import LinkedRecord from "./LinkedRecord.svelte"
+  import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
   import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
   import RowPopover from "./popovers/Row.svelte"
@@ -91,9 +92,7 @@
               {#if schema[header].type === 'link'}
                 <LinkedRecord field={schema[header]} ids={row[header]} />
               {:else if schema[header].type === 'attachment'}
-                {#each row[header] || [] as img}
-                  <img width="100" height="100" src={img.clientUrl} />
-                {/each}
+                <AttachmentList files={row[header] || []} />
               {:else}{getOr('', header, row)}{/if}
             </td>
           {/each}
@@ -113,10 +112,6 @@
     margin-bottom: 20px;
   }
 
-  img {
-    object-fit: contain;
-  }
-
   .title {
     font-size: 24px;
     font-weight: 600;
diff --git a/packages/builder/src/components/database/DataTable/Table.svelte b/packages/builder/src/components/database/DataTable/Table.svelte
index 47be4eab37..15f7d4f803 100644
--- a/packages/builder/src/components/database/DataTable/Table.svelte
+++ b/packages/builder/src/components/database/DataTable/Table.svelte
@@ -6,7 +6,7 @@
   import api from "builderStore/api"
   import { Button, Icon } from "@budibase/bbui"
   import ActionButton from "components/common/ActionButton.svelte"
-  import LinkedRecord from "./LinkedRecord.svelte"
+  import AttachmentList from "./AttachmentList.svelte"
   import TablePagination from "./TablePagination.svelte"
   import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
   import RowPopover from "./popovers/Row.svelte"
@@ -59,7 +59,11 @@
       {#each paginatedData as row}
         <tr>
           {#each columns as header}
-            <td>{getOr('', header, row)}</td>
+            <td>
+              {#if schema[header].type === 'attachment'}
+                <AttachmentList files={row[header] || []} />
+              {:else}{getOr('', header, row)}{/if}
+            </td>
           {/each}
         </tr>
       {/each}
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 502cdbd245..088215e24b 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -70,3 +70,9 @@ export const FIELDS = {
   //   },
   // },
 }
+
+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"]
+}
\ No newline at end of file
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 4c5017690e..a1e5d288b0 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -695,6 +695,15 @@
     sirv-cli "^0.4.6"
     svelte-flatpickr "^2.4.0"
 
+"@budibase/client@^0.1.19":
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.1.21.tgz#db414445c132b373f6c25e39d62628eb60cd8ac3"
+  integrity sha512-/ju0vYbWh9MUjmxkGNlOL4S/VQd4p5mbz5rHu0yt55ak9t/yyzI6PzBBxlucBeRbXYd9OFynFjy1pvYt1v+z9Q==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1370,6 +1379,11 @@ array-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1424,6 +1438,13 @@ atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
 
+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2381,6 +2402,26 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -2550,6 +2591,54 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.17.4:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -2824,21 +2913,6 @@ file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
 
-filepond-plugin-image-exif-orientation@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/filepond-plugin-image-exif-orientation/-/filepond-plugin-image-exif-orientation-1.0.9.tgz#bf1220d99c117a69859f3297d0618e7469705019"
-  integrity sha512-Pyw7oNpMk5YwX0eYsa1wjNTJ2WxTQ27VUDviV0XrNbKPB7/iDSZ9r2zWSEeT9yS46OUGNE8lcdAARi5Z2v5TLA==
-
-filepond-plugin-image-preview@^4.6.4:
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/filepond-plugin-image-preview/-/filepond-plugin-image-preview-4.6.4.tgz#19edade651559cf8c9fb97bcc8ce56af16ebae67"
-  integrity sha512-grlFJv1LH4E7IzsKTIFI52LuyLQa+lXMqmUnSm0cufDblRXHxdraRkjj/88bd9pyVJm206dBXQnlIVVyEaE5xg==
-
-filepond@^4.20.1:
-  version "4.20.1"
-  resolved "https://registry.yarnpkg.com/filepond/-/filepond-4.20.1.tgz#d0e2ce447dc785f8cc51abd207805b886090b2b7"
-  integrity sha512-qYwE/xSODJuAJH0E2BHeD8f3X66nxZ/aUQSaGhUTVXuAWe0wvIjxaRcMZUIsZm2f7truScxAe16l5ITzxi5TFw==
-
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -2878,7 +2952,7 @@ for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-foreach@~2.0.1:
+foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3252,16 +3326,31 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3270,6 +3359,11 @@ is-callable@^1.1.4, is-callable@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
 
+is-callable@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
+  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -3288,7 +3382,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
 
@@ -3353,10 +3447,25 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
 
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3413,6 +3522,18 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
+
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -3421,16 +3542,41 @@ is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   dependencies:
     has-symbols "^1.0.1"
 
+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -3451,6 +3597,11 @@ isarray@1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -4561,6 +4712,19 @@ object-inspect@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
 
+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5071,6 +5235,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpu-core@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
@@ -5475,6 +5652,14 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -5701,7 +5886,7 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
+string.prototype.trimend@^1.0.0, string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
   dependencies:
@@ -5724,7 +5909,7 @@ string.prototype.trimright@^2.1.1:
     es-abstract "^1.17.5"
     string.prototype.trimend "^1.0.0"
 
-string.prototype.trimstart@^1.0.0:
+string.prototype.trimstart@^1.0.0, string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
   dependencies:
@@ -6175,10 +6360,43 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.0.0"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 9d994b3091..c46b55b299 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -63,32 +63,8 @@ function walkDir(dirPath, callback) {
     }
   }
 }
-/**
- * Walk a directory and return an array of promises for uploading all the files
- * inside that directory to s3.
- * @param {Object} config
- * path: path to read files from on disk  
- * s3Key: the path in s3 to upload the directory files to
- * s3: s3 client object
- */
-function uploadFiles({
-  path,
-  s3Key,
-  s3,
-  metadata
-}) {
-  const uploads = []
 
-  walkDir(path, function(filePath) {
-    const upload = prepareUploadForS3(filePath, metadata)
-    uploads.push(upload)
-  })
-
-  return uploads
-}
-
-
-function prepareUploadForS3({ filePath, s3Key, metadata }) {
+function prepareUploadForS3({ filePath, s3Key, metadata, s3 }) {
   const fileExtension = [...filePath.split(".")].pop()
   const fileBytes = fs.readFileSync(filePath)
   return s3
@@ -101,8 +77,6 @@ function prepareUploadForS3({ filePath, s3Key, metadata }) {
     .promise()
 }
 
-
-
 exports.uploadAppAssets = async function({
   appId,
   instanceId,
@@ -131,17 +105,15 @@ exports.uploadAppAssets = async function({
 
   for (let page of appPages) {
     // Upload HTML, CSS and JS for each page of the web app
-    walkDir(path, function(filePath) {
+    walkDir(`${appAssetsPath}/${page}`, function(filePath) {
       const appAssetUpload = prepareUploadForS3({
         filePath,
-        s3Key: filePath.replace(path, `assets/${appId}`),
+        s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
         s3,
         metadata: { accountId }
       })
       uploads.push(appAssetUpload)
     })
-
-    uploads = [...uploads, ...pageAssetUploads];
   }
 
   // Upload file attachments
diff --git a/packages/server/src/api/controllers/static/fileProcessor.js b/packages/server/src/api/controllers/static/fileProcessor.js
new file mode 100644
index 0000000000..42957ab57c
--- /dev/null
+++ b/packages/server/src/api/controllers/static/fileProcessor.js
@@ -0,0 +1,24 @@
+const fs = require("fs");
+const sharp = require("sharp");
+const fsPromises = fs.promises;
+
+const FORMATS = {
+  IMAGES: ["png", "jpg", "jpeg", "gif", "svg", "tiff", "raw"],
+}
+
+function processImage({ path, outputPath }) {
+    return sharp(path)
+    .resize(300)
+    .toFile(outputPath)
+}
+
+function process(file) {
+  if (FORMATS.IMAGES.includes(file.extension.toLowerCase())) {
+    return processImage(file);
+  }
+
+  // No processing required
+  return fsPromises.copyFile(file.path, file.outputPath) 
+}
+
+exports.process = process
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/static/imageProcessing.js b/packages/server/src/api/controllers/static/imageProcessing.js
deleted file mode 100644
index 923b4fff53..0000000000
--- a/packages/server/src/api/controllers/static/imageProcessing.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const fs = require("fs");
-const sharp = require("sharp");
-
-const SIZES = []
-
-const IMG_FORMATS = ["png", "jpeg", "jpg", "svg"]
-
-function processImage({ path, outputPath }) {
-  return sharp(path)
-  .resize(200)
-  .toFile(outputPath)
-}
-
-exports.processImage = processImage
\ No newline at end of file
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index f93e345bba..95a509c866 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -9,7 +9,7 @@ const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
 const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels")
 const jwt = require("jsonwebtoken")
 const fetch = require("node-fetch")
-const imageProcessing = require("./imageProcessing")
+const fileProcessor = require("./fileProcessor")
 const fs = require("fs")
 const uuid = require("uuid")
 
@@ -36,19 +36,19 @@ exports.processLocalFileUpload = async function(ctx) {
 
     return {
       ...file,
-      name: fileName,
       extension: fileExtension,
       outputPath: join(attachmentsPath, fileName),
-      clientUrl: join("/attachments", fileName)
+      clientUrl: join("/attachments", fileName),
+      // productionUrl: `https://cdn.app.budi.live/assets/${appId}/attachments/${fileName}`
     }
   })
 
   // TODO: read the file (into memory first, then we will stream it)
-  const imageProcessOperations = filesToProcess.map(file => imageProcessing.processImage(file))
+  const fileProcessOperations = filesToProcess.map(file => fileProcessor.process(file))
   
   try {
     // TODO: get file sizes of images after resize
-    const responses = await Promise.all(imageProcessOperations);
+    const responses = await Promise.all(fileProcessOperations);
 
     let fileUploads
     // local document used to track which files need to be uploaded

From 9032738ae878c8e77b2a3c9ba1a9636d262aea1c Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 17 Sep 2020 15:08:28 +0100
Subject: [PATCH 06/15] delete local file upload when file deleted

---
 .../src/components/common/Dropzone.svelte     |  5 ++--
 .../server/src/api/controllers/deploy/aws.js  | 25 ++++++++++---------
 .../src/api/controllers/static/index.js       | 21 +++++++++++++---
 packages/server/src/api/routes/static.js      |  3 ++-
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 2b78e3efe0..b3c9338270 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -27,7 +27,7 @@
       size,
     }))
 
-    const response = await api.post(`/api/files/process`, {
+    const response = await api.post(`/api/attachments/process`, {
       files: filesToProcess,
     })
     const processedFiles = await response.json()
@@ -35,7 +35,8 @@
     selectedImageIdx = 0
   }
 
-  function removeFile() {
+  async function removeFile() {
+    const response = await api.delete(`/api/attachments/${selectedImage.fileName}`)
     files.splice(selectedImageIdx, 1)
     files = files
   }
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index c46b55b299..ad6f5d8ff3 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -120,21 +120,22 @@ exports.uploadAppAssets = async function({
   const db = new PouchDB(instanceId)
   const fileUploads = await db.get("_local/fileuploads")
   if (fileUploads) {
-    fileUploads.awaitingUpload.forEach((file, idx) => {
+    for (let file of fileUploads.uploads) {
+      if (file.uploaded) continue
 
-      const attachmentUpload = prepareUploadForS3({
-        filePath: file.path,
-        s3Key: `assets/${appId}/${file.name}`,
-        s3,
-        metadata: { accountId }
-      })
+        const attachmentUpload = prepareUploadForS3({
+          filePath: file.path,
+          s3Key: `assets/${appId}/attachments/${file.name}`,
+          s3,
+          metadata: { accountId }
+        })
 
-      uploads.push(attachmentUpload)
+        uploads.push(attachmentUpload)
+
+        // mark file as uploaded
+        file.uploaded = true
+    }
 
-      // move the pending upload to the uploaded array
-      fileUploads.awaitingUpload.splice(idx, 1);
-      fileUploads.uploaded.push(awaitingUpload);
-    })
     db.put(fileUploads);
   }
 
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index 95a509c866..6808de4762 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -21,6 +21,21 @@ exports.serveBuilder = async function(ctx) {
   await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
+exports.deleteLocalFileUpload = async function(ctx) {
+  try {
+    const db = new CouchDB(ctx.user.instanceId);
+    let fileUploads = await db.get("_local/fileuploads")
+    fileUploads.uploads = fileUploads.uploads.filter(upload => upload.fileName !== ctx.fileName)
+    // TODO: possibly remove the file as well
+    await db.put(fileUploads);
+    ctx.body = {
+      message: `${ctx.fileName} deleted.`
+    }
+  } catch (err) {
+    ctx.throw(500, err)
+  }
+}
+
 exports.processLocalFileUpload = async function(ctx) {
   const { files } = ctx.request.body
 
@@ -36,6 +51,7 @@ exports.processLocalFileUpload = async function(ctx) {
 
     return {
       ...file,
+      fileName,
       extension: fileExtension,
       outputPath: join(attachmentsPath, fileName),
       clientUrl: join("/attachments", fileName),
@@ -59,11 +75,10 @@ exports.processLocalFileUpload = async function(ctx) {
       .then(data => fileUploads = data)
       .catch(() => fileUploads = {
         _id: "_local/fileuploads",
-        awaitingUpload: [],
-        uploaded: []
+        uploads: []
       })
 
-    fileUploads.awaitingUpload = [...filesToProcess, ...fileUploads.awaitingUpload]
+    fileUploads.uploads = [...filesToProcess, ...fileUploads.uploads]
     await db.put(fileUploads)
 
     ctx.body = filesToProcess 
diff --git a/packages/server/src/api/routes/static.js b/packages/server/src/api/routes/static.js
index 60df6b3d42..50d45493c6 100644
--- a/packages/server/src/api/routes/static.js
+++ b/packages/server/src/api/routes/static.js
@@ -23,7 +23,8 @@ if (env.NODE_ENV !== "production") {
 }
 
 router
-  .post("/api/files/process", authorized(BUILDER), controller.processLocalFileUpload)
+  .post("/api/attachments/process", authorized(BUILDER), controller.processLocalFileUpload)
+  .delete("/api/attachments/:fileName*", authorized(BUILDER), controller.deleteLocalFileUpload)
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)
   .get("/attachments/:file*", controller.serveAttachment)

From bb2058a010cd2978d69c482cbb9a837a952acbf2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 17 Sep 2020 16:36:39 +0100
Subject: [PATCH 07/15] lint

---
 packages/builder/package.json                 |  1 -
 packages/builder/src/builderStore/api.js      |  4 +-
 .../src/components/common/Dropzone.svelte     |  5 +-
 .../src/components/common/Spinner.svelte      |  2 +-
 .../database/DataTable/AttachmentList.svelte  | 24 +++---
 .../DataTable/modals/CreateEditRecord.svelte  |  2 +-
 .../modals/RecordFieldControl.svelte          |  8 +-
 .../builder/src/constants/backend/index.js    |  4 +-
 .../pages/[application]/deploy/index.svelte   |  4 +-
 .../server/src/api/controllers/deploy/aws.js  | 22 +++---
 .../{static/index.js => static.js}            | 75 +++++++++++--------
 packages/server/src/api/routes/static.js      | 12 ++-
 packages/server/src/electron.js               |  2 +-
 .../static => utilities}/fileProcessor.js     | 14 ++--
 14 files changed, 97 insertions(+), 82 deletions(-)
 rename packages/server/src/api/controllers/{static/index.js => static.js} (72%)
 rename packages/server/src/{api/controllers/static => utilities}/fileProcessor.js (56%)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index ad660d1f0e..ea555007a9 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -77,7 +77,6 @@
     "mustache": "^4.0.1",
     "posthog-js": "1.3.1",
     "shortid": "^2.2.15",
-    "svelte-filepond": "^0.0.1",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",
     "svelte-simple-modal": "^0.4.2",
diff --git a/packages/builder/src/builderStore/api.js b/packages/builder/src/builderStore/api.js
index 46ae7457f1..a33a695028 100644
--- a/packages/builder/src/builderStore/api.js
+++ b/packages/builder/src/builderStore/api.js
@@ -1,6 +1,6 @@
 const apiCall = method => async (
-  url, 
-  body, 
+  url,
+  body,
   headers = { "Content-Type": "application/json" }
 ) => {
   const response = await fetch(url, {
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index b3c9338270..58c4bbd678 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -36,9 +36,12 @@
   }
 
   async function removeFile() {
-    const response = await api.delete(`/api/attachments/${selectedImage.fileName}`)
+    const response = await api.delete(
+      `/api/attachments/${selectedImage.fileName}`
+    )
     files.splice(selectedImageIdx, 1)
     files = files
+    selectedImageIdx = 0
   }
 
   function navigateLeft() {
diff --git a/packages/builder/src/components/common/Spinner.svelte b/packages/builder/src/components/common/Spinner.svelte
index 01199e72ec..c719724fd8 100644
--- a/packages/builder/src/components/common/Spinner.svelte
+++ b/packages/builder/src/components/common/Spinner.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Circle } from "svelte-loading-spinners"
-  
+
   export let size = "60"
 </script>
 
diff --git a/packages/builder/src/components/database/DataTable/AttachmentList.svelte b/packages/builder/src/components/database/DataTable/AttachmentList.svelte
index fedcaa73be..04fdbaf4b5 100644
--- a/packages/builder/src/components/database/DataTable/AttachmentList.svelte
+++ b/packages/builder/src/components/database/DataTable/AttachmentList.svelte
@@ -7,17 +7,17 @@
 </script>
 
 <div class="file-list">
-{#each files as file}
-  <div class="file">
-    {#if FILE_TYPES.IMAGE.includes(file.extension)}
-      <img {width} {height} src={file.clientUrl} />
-    {:else}
-      <i class="ri-file-line" />
-      <span class="extension">.{file.extension}</span>
-      <span>{file.name}</span>
-    {/if}
-  </div>
-{/each}
+  {#each files as file}
+    <div class="file">
+      {#if FILE_TYPES.IMAGE.includes(file.extension)}
+        <img {width} {height} src={file.clientUrl} />
+      {:else}
+        <i class="ri-file-line" />
+        <span class="extension">.{file.extension}</span>
+        <span>{file.name}</span>
+      {/if}
+    </div>
+  {/each}
 </div>
 
 <style>
@@ -27,7 +27,7 @@
     grid-gap: var(--spacing-m);
     grid-template-columns: repeat(10, 1fr);
   }
-  
+
   img {
     object-fit: contain;
   }
diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
index 32df16ed7f..ab2ce324eb 100644
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
@@ -37,7 +37,7 @@
     backendUiStore.update(state => {
       state.selectedView = state.selectedView
       onClosed()
-      notifier.success("Record created successfully.")
+      notifier.success("Record saved successfully.")
       return state
     })
   }
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
index f69eb498a4..f2ac98fce0 100644
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
@@ -4,6 +4,7 @@
 
   export let meta
   export let value = meta.type === "boolean" ? false : ""
+  export let saveRecord
 
   let isSelect =
     meta.type === "string" &&
@@ -24,7 +25,6 @@
   }
 
   const handleInput = event => {
-    console.log(event.target.value)
     if (event.target.type === "checkbox") {
       value = event.target.checked
       return
@@ -35,12 +35,6 @@
       return
     }
 
-    // if (event.target.type === "file") {
-    //   value = Array.from(event.target.files).map(file => file.path)
-    //   console.log(value)
-    //   return
-    // }
-
     value = event.target.value
   }
 </script>
diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js
index 088215e24b..45de862a98 100644
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@@ -74,5 +74,5 @@ export const FIELDS = {
 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"]
-}
\ No newline at end of file
+  DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
+}
diff --git a/packages/builder/src/pages/[application]/deploy/index.svelte b/packages/builder/src/pages/[application]/deploy/index.svelte
index ad4f05da20..209ad4726b 100644
--- a/packages/builder/src/pages/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/[application]/deploy/index.svelte
@@ -53,7 +53,9 @@
       </Button>
     {/if}
   </div>
-  <img src="/_builder/assets/deploy-rocket.jpg" alt="Rocket flying through sky"/>
+  <img
+    src="/_builder/assets/deploy-rocket.jpg"
+    alt="Rocket flying through sky" />
 </section>
 
 <style>
diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index ad6f5d8ff3..40bada4dca 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -110,7 +110,7 @@ exports.uploadAppAssets = async function({
         filePath,
         s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
         s3,
-        metadata: { accountId }
+        metadata: { accountId },
       })
       uploads.push(appAssetUpload)
     })
@@ -123,20 +123,20 @@ exports.uploadAppAssets = async function({
     for (let file of fileUploads.uploads) {
       if (file.uploaded) continue
 
-        const attachmentUpload = prepareUploadForS3({
-          filePath: file.path,
-          s3Key: `assets/${appId}/attachments/${file.name}`,
-          s3,
-          metadata: { accountId }
-        })
+      const attachmentUpload = prepareUploadForS3({
+        filePath: file.path,
+        s3Key: `assets/${appId}/attachments/${file.name}`,
+        s3,
+        metadata: { accountId },
+      })
 
-        uploads.push(attachmentUpload)
+      uploads.push(attachmentUpload)
 
-        // mark file as uploaded
-        file.uploaded = true
+      // mark file as uploaded
+      file.uploaded = true
     }
 
-    db.put(fileUploads);
+    db.put(fileUploads)
   }
 
   try {
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static.js
similarity index 72%
rename from packages/server/src/api/controllers/static/index.js
rename to packages/server/src/api/controllers/static.js
index 6808de4762..45f091ad52 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static.js
@@ -1,20 +1,21 @@
 const send = require("koa-send")
 const { resolve, join } = require("path")
-const {
-  budibaseAppsDir,
-  budibaseTempDir,
-} = require("../../../utilities/budibaseDir")
-const CouchDB = require("../../../db")
-const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
-const { ANON_LEVEL_ID } = require("../../../utilities/accessLevels")
 const jwt = require("jsonwebtoken")
 const fetch = require("node-fetch")
-const fileProcessor = require("./fileProcessor")
 const fs = require("fs")
 const uuid = require("uuid")
 
+const {
+  budibaseAppsDir,
+  budibaseTempDir,
+} = require("../../utilities/budibaseDir")
+const CouchDB = require("../../db")
+const setBuilderToken = require("../../utilities/builder/setBuilderToken")
+const { ANON_LEVEL_ID } = require("../../utilities/accessLevels")
+const fileProcessor = require("../../utilities/fileProcessor")
+
 exports.serveBuilder = async function(ctx) {
-  let builderPath = resolve(__dirname, "../../../../builder")
+  let builderPath = resolve(__dirname, "../../../builder")
   if (ctx.file === "index.html") {
     setBuilderToken(ctx)
   }
@@ -23,13 +24,14 @@ exports.serveBuilder = async function(ctx) {
 
 exports.deleteLocalFileUpload = async function(ctx) {
   try {
-    const db = new CouchDB(ctx.user.instanceId);
+    const db = new CouchDB(ctx.user.instanceId)
     let fileUploads = await db.get("_local/fileuploads")
-    fileUploads.uploads = fileUploads.uploads.filter(upload => upload.fileName !== ctx.fileName)
-    // TODO: possibly remove the file as well
-    await db.put(fileUploads);
+    fileUploads.uploads = fileUploads.uploads.filter(
+      upload => upload.fileName !== ctx.params.fileName
+    )
+    await db.put(fileUploads)
     ctx.body = {
-      message: `${ctx.fileName} deleted.`
+      message: `${ctx.fileName} deleted.`,
     }
   } catch (err) {
     ctx.throw(500, err)
@@ -39,10 +41,15 @@ exports.deleteLocalFileUpload = async function(ctx) {
 exports.processLocalFileUpload = async function(ctx) {
   const { files } = ctx.request.body
 
-  const attachmentsPath = resolve(budibaseAppsDir(), ctx.user.appId, "attachments")
+  const attachmentsPath = resolve(
+    budibaseAppsDir(),
+    ctx.user.appId,
+    "attachments"
+  )
 
   // create attachments dir if it doesnt exist
-  !fs.existsSync(attachmentsPath) && fs.mkdirSync(attachmentsPath, { recursive: true })
+  !fs.existsSync(attachmentsPath) &&
+    fs.mkdirSync(attachmentsPath, { recursive: true })
 
   const filesToProcess = files.map(file => {
     const fileExtension = [...file.path.split(".")].pop()
@@ -55,35 +62,37 @@ exports.processLocalFileUpload = async function(ctx) {
       extension: fileExtension,
       outputPath: join(attachmentsPath, fileName),
       clientUrl: join("/attachments", fileName),
-      // productionUrl: `https://cdn.app.budi.live/assets/${appId}/attachments/${fileName}`
     }
   })
 
-  // TODO: read the file (into memory first, then we will stream it)
-  const fileProcessOperations = filesToProcess.map(file => fileProcessor.process(file))
-  
+  const fileProcessOperations = filesToProcess.map(file =>
+    fileProcessor.process(file)
+  )
+
   try {
     // TODO: get file sizes of images after resize
-    const responses = await Promise.all(fileProcessOperations);
+    const responses = await Promise.all(fileProcessOperations)
 
-    let fileUploads
+    let pendingFileUploads
     // local document used to track which files need to be uploaded
     // db.get throws an error if the document doesn't exist
     // need to use a promise to default
-    const db = new CouchDB(ctx.user.instanceId);
-    await db.get("_local/fileuploads")
-      .then(data => fileUploads = data)
-      .catch(() => fileUploads = {
-        _id: "_local/fileuploads",
-        uploads: []
+    const db = new CouchDB(ctx.user.instanceId)
+    await db
+      .get("_local/fileuploads")
+      .then(data => {
+        pendingFileUploads = data
+      })
+      .catch(() => {
+        pendingFileUploads = { _id: "_local/fileuploads", uploads: [] }
       })
 
-    fileUploads.uploads = [...filesToProcess, ...fileUploads.uploads]
+    fileUploads.uploads = [...filesToProcess, ...pendingFileUploads.uploads]
     await db.put(fileUploads)
 
-    ctx.body = filesToProcess 
+    ctx.body = filesToProcess
   } catch (err) {
-    ctx.throw(500, err);
+    ctx.throw(500, err)
   }
 }
 
@@ -133,13 +142,13 @@ exports.serveApp = async function(ctx) {
 }
 
 exports.serveAttachment = async function(ctx) {
-  const appId = ctx.user.appId;
+  const appId = ctx.user.appId
 
   const attachmentsPath = resolve(budibaseAppsDir(), appId, "attachments")
 
   // Serve from CloudFront
   if (process.env.CLOUD) {
-    const S3_URL = `https://${appId}.app.budi.live/assets/${appId}/attachments/${ctx.file}`
+    const S3_URL = `https://cdn.app.budi.live/assets/${appId}/attachments/${ctx.file}`
 
     const response = await fetch(S3_URL)
     const body = await response.text()
diff --git a/packages/server/src/api/routes/static.js b/packages/server/src/api/routes/static.js
index 50d45493c6..32e74e112d 100644
--- a/packages/server/src/api/routes/static.js
+++ b/packages/server/src/api/routes/static.js
@@ -23,8 +23,16 @@ if (env.NODE_ENV !== "production") {
 }
 
 router
-  .post("/api/attachments/process", authorized(BUILDER), controller.processLocalFileUpload)
-  .delete("/api/attachments/:fileName*", authorized(BUILDER), controller.deleteLocalFileUpload)
+  .post(
+    "/api/attachments/process",
+    authorized(BUILDER),
+    controller.processLocalFileUpload
+  )
+  .delete(
+    "/api/attachments/:fileName",
+    authorized(BUILDER),
+    controller.deleteLocalFileUpload
+  )
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)
   .get("/attachments/:file*", controller.serveAttachment)
diff --git a/packages/server/src/electron.js b/packages/server/src/electron.js
index 3215e52b05..636ddc8b46 100644
--- a/packages/server/src/electron.js
+++ b/packages/server/src/electron.js
@@ -38,7 +38,7 @@ async function startApp() {
     app.server = require("./app")
     win = new BrowserWindow({
       width: 1920,
-      height: 1080
+      height: 1080,
     })
     win.setTitle(APP_TITLE)
     win.loadURL(APP_URL)
diff --git a/packages/server/src/api/controllers/static/fileProcessor.js b/packages/server/src/utilities/fileProcessor.js
similarity index 56%
rename from packages/server/src/api/controllers/static/fileProcessor.js
rename to packages/server/src/utilities/fileProcessor.js
index 42957ab57c..151e6a6e17 100644
--- a/packages/server/src/api/controllers/static/fileProcessor.js
+++ b/packages/server/src/utilities/fileProcessor.js
@@ -1,24 +1,24 @@
-const fs = require("fs");
-const sharp = require("sharp");
-const fsPromises = fs.promises;
+const fs = require("fs")
+const sharp = require("sharp")
+const fsPromises = fs.promises
 
 const FORMATS = {
   IMAGES: ["png", "jpg", "jpeg", "gif", "svg", "tiff", "raw"],
 }
 
 function processImage({ path, outputPath }) {
-    return sharp(path)
+  return sharp(path)
     .resize(300)
     .toFile(outputPath)
 }
 
 function process(file) {
   if (FORMATS.IMAGES.includes(file.extension.toLowerCase())) {
-    return processImage(file);
+    return processImage(file)
   }
 
   // No processing required
-  return fsPromises.copyFile(file.path, file.outputPath) 
+  return fsPromises.copyFile(file.path, file.outputPath)
 }
 
-exports.process = process
\ No newline at end of file
+exports.process = process

From 5150288e8552f693bbd3bd7cb905312dc44227c8 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 17 Sep 2020 16:38:33 +0100
Subject: [PATCH 08/15] more lint

---
 packages/server/src/api/controllers/static.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 45f091ad52..6f40a01c66 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -71,7 +71,7 @@ exports.processLocalFileUpload = async function(ctx) {
 
   try {
     // TODO: get file sizes of images after resize
-    const responses = await Promise.all(fileProcessOperations)
+    await Promise.all(fileProcessOperations)
 
     let pendingFileUploads
     // local document used to track which files need to be uploaded
@@ -87,8 +87,8 @@ exports.processLocalFileUpload = async function(ctx) {
         pendingFileUploads = { _id: "_local/fileuploads", uploads: [] }
       })
 
-    fileUploads.uploads = [...filesToProcess, ...pendingFileUploads.uploads]
-    await db.put(fileUploads)
+    pendingFileUploads.uploads = [...filesToProcess, ...pendingFileUploads.uploads]
+    await db.put(pendingFileUploads)
 
     ctx.body = filesToProcess
   } catch (err) {

From 642662c8bc9308dd531a7a51af3217a8ef7488a0 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 17 Sep 2020 22:02:30 +0100
Subject: [PATCH 09/15] fix transition dropdown bug

---
 packages/builder/src/builderStore/store/backend.js    |  5 +++++
 .../builder/src/components/common/Dropzone.svelte     |  4 ++--
 .../database/DataTable/modals/CreateEditRecord.svelte | 11 ++++-------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index fec21a467e..3835f44d64 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -28,6 +28,11 @@ export const getBackendUiStore = () => {
       },
     },
     records: {
+      save: () =>
+        store.update(state => {
+          state.selectedView = state.selectedView
+          return state
+        }),
       delete: () =>
         store.update(state => {
           state.selectedView = state.selectedView
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 58c4bbd678..a36a40c6d7 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -2,7 +2,6 @@
   import { Heading, Body, Button } from "@budibase/bbui"
   import { FILE_TYPES } from "constants/backend"
   import api from "builderStore/api"
-  import { fade } from "svelte/transition"
 
   export let files = []
 
@@ -80,9 +79,10 @@
   on:dragenter={handleDragOver}
   on:drop={handleDrop}
   class:fileDragged>
+
   <ul>
     {#if selectedImage}
-      <li transition:fade>
+      <li>
         <header>
           <div>
             <i
diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
index ab2ce324eb..8edecd913c 100644
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, tick } from "svelte"
   import { store, backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { compose, map, get, flatten } from "lodash/fp"
@@ -34,12 +34,9 @@
       return
     }
 
-    backendUiStore.update(state => {
-      state.selectedView = state.selectedView
-      onClosed()
-      notifier.success("Record saved successfully.")
-      return state
-    })
+    onClosed()
+    notifier.success("Record saved successfully.")
+    backendUiStore.actions.records.save(recordResponse)
   }
 </script>
 

From 14283a7b967e8d965b79736357242d1c2da232c0 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 18 Sep 2020 11:01:39 +0100
Subject: [PATCH 10/15] return processed file sizes

---
 .../src/components/common/Dropzone.svelte      |  6 +++++-
 packages/server/src/api/controllers/static.js  |  7 +++----
 packages/server/src/utilities/fileProcessor.js | 18 ++++++++++++------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index a36a40c6d7..5eedd2d7fa 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -89,7 +89,11 @@
               class={`file-icon ${determineFileIcon(selectedImage.extension)}`} />
             <span class="filename">{selectedImage.name}</span>
           </div>
-          <p>{selectedImage.size / 1000}KB</p>
+          <p>
+            {#if selectedImage.size <= 1000000}
+              {selectedImage.size / 1000}KB
+            {:else}{selectedImage.size / 1000000}MB{/if}
+          </p>
         </header>
         <div class="delete-button" on:click={removeFile}>
           <i class="ri-close-line" />
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 672d71aab9..0720948731 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -70,8 +70,7 @@ exports.processLocalFileUpload = async function(ctx) {
   )
 
   try {
-    // TODO: get file sizes of images after resize
-    await Promise.all(fileProcessOperations)
+    const processedFiles = await Promise.all(fileProcessOperations)
 
     let pendingFileUploads
     // local document used to track which files need to be uploaded
@@ -88,12 +87,12 @@ exports.processLocalFileUpload = async function(ctx) {
       })
 
     pendingFileUploads.uploads = [
-      ...filesToProcess,
+      ...processedFiles,
       ...pendingFileUploads.uploads,
     ]
     await db.put(pendingFileUploads)
 
-    ctx.body = filesToProcess
+    ctx.body = processedFiles
   } catch (err) {
     ctx.throw(500, err)
   }
diff --git a/packages/server/src/utilities/fileProcessor.js b/packages/server/src/utilities/fileProcessor.js
index 151e6a6e17..3e580e9e37 100644
--- a/packages/server/src/utilities/fileProcessor.js
+++ b/packages/server/src/utilities/fileProcessor.js
@@ -6,19 +6,25 @@ const FORMATS = {
   IMAGES: ["png", "jpg", "jpeg", "gif", "svg", "tiff", "raw"],
 }
 
-function processImage({ path, outputPath }) {
-  return sharp(path)
+async function processImage(file) {
+  const imgMeta = await sharp(file.path)
     .resize(300)
-    .toFile(outputPath)
+    .toFile(file.outputPath)
+
+  return {
+    ...file,
+    ...imgMeta,
+  }
 }
 
-function process(file) {
+async function process(file) {
   if (FORMATS.IMAGES.includes(file.extension.toLowerCase())) {
-    return processImage(file)
+    return await processImage(file)
   }
 
   // No processing required
-  return fsPromises.copyFile(file.path, file.outputPath)
+  await fsPromises.copyFile(file.path, file.outputPath)
+  return file
 }
 
 exports.process = process

From 28fd0e4831e18e0ee391e356fe5617c290c2d98c Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 18 Sep 2020 11:04:09 +0100
Subject: [PATCH 11/15] remove magic numbers

---
 packages/builder/src/components/common/Dropzone.svelte | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 5eedd2d7fa..9ce8ed83b6 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -3,6 +3,9 @@
   import { FILE_TYPES } from "constants/backend"
   import api from "builderStore/api"
 
+  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
+
   export let files = []
 
   let selectedImageIdx = 0
@@ -90,9 +93,9 @@
             <span class="filename">{selectedImage.name}</span>
           </div>
           <p>
-            {#if selectedImage.size <= 1000000}
-              {selectedImage.size / 1000}KB
-            {:else}{selectedImage.size / 1000000}MB{/if}
+            {#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}>

From 319fcabaa520c6f57878570bc8b466ce8b8cac06 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 18 Sep 2020 12:41:39 +0100
Subject: [PATCH 12/15] removing delete functionality - not necessary

---
 .../src/builderStore/buildStateOrigins.js     | 28 ----------------
 .../src/components/common/Dropzone.svelte     |  6 +---
 .../database/DataTable/AttachmentList.svelte  |  4 +--
 .../modals/RecordFieldControl.svelte          |  4 +--
 .../DataTable/popovers/EditRow.svelte         | 14 +++++---
 .../builder/tests/buildStateOrigins.spec.js   | 32 -------------------
 packages/server/src/api/controllers/static.js | 18 +----------
 packages/server/src/api/routes/static.js      |  5 ---
 8 files changed, 16 insertions(+), 95 deletions(-)
 delete mode 100644 packages/builder/src/builderStore/buildStateOrigins.js
 delete mode 100644 packages/builder/tests/buildStateOrigins.spec.js

diff --git a/packages/builder/src/builderStore/buildStateOrigins.js b/packages/builder/src/builderStore/buildStateOrigins.js
deleted file mode 100644
index d368b3656e..0000000000
--- a/packages/builder/src/builderStore/buildStateOrigins.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * buildStateOrigins
- *
- * Builds an object that details all the bound state in the application, and what updates it.
- *
- * @param screenDefinition - the screen definition metadata.
- * @returns {Object} an object with the client state values and how they are managed.
- */
-export const buildStateOrigins = screenDefinition => {
-  const origins = {}
-
-  function traverse(propValue) {
-    for (let key in propValue) {
-      if (!Array.isArray(propValue[key])) continue
-
-      if (key === "_children") propValue[key].forEach(traverse)
-
-      for (let element of propValue[key]) {
-        if (element["##eventHandlerType"] === "Set State")
-          origins[element.parameters.path] = element
-      }
-    }
-  }
-
-  traverse(screenDefinition.props)
-
-  return origins
-}
diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index 9ce8ed83b6..e98dd5f835 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -38,9 +38,6 @@
   }
 
   async function removeFile() {
-    const response = await api.delete(
-      `/api/attachments/${selectedImage.fileName}`
-    )
     files.splice(selectedImageIdx, 1)
     files = files
     selectedImageIdx = 0
@@ -82,7 +79,6 @@
   on:dragenter={handleDragOver}
   on:drop={handleDrop}
   class:fileDragged>
-
   <ul>
     {#if selectedImage}
       <li>
@@ -106,7 +102,7 @@
             <i class="ri-arrow-left-line" />
           </div>
         {/if}
-        <img src={selectedImage.clientUrl} />
+        <img src={selectedImage.url} />
         {#if selectedImageIdx !== files.length - 1}
           <div class="nav right" on:click={navigateRight}>
             <i class="ri-arrow-right-line" />
diff --git a/packages/builder/src/components/database/DataTable/AttachmentList.svelte b/packages/builder/src/components/database/DataTable/AttachmentList.svelte
index 04fdbaf4b5..f9301823f6 100644
--- a/packages/builder/src/components/database/DataTable/AttachmentList.svelte
+++ b/packages/builder/src/components/database/DataTable/AttachmentList.svelte
@@ -9,8 +9,8 @@
 <div class="file-list">
   {#each files as file}
     <div class="file">
-      {#if FILE_TYPES.IMAGE.includes(file.extension)}
-        <img {width} {height} src={file.clientUrl} />
+      {#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
+        <img {width} {height} src={file.url} />
       {:else}
         <i class="ri-file-line" />
         <span class="extension">.{file.extension}</span>
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
index f2ac98fce0..86e3386133 100644
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
@@ -4,7 +4,7 @@
 
   export let meta
   export let value = meta.type === "boolean" ? false : ""
-  export let saveRecord
+  export let originalValue
 
   let isSelect =
     meta.type === "string" &&
@@ -51,7 +51,7 @@
   <DatePicker bind:value />
 {:else if type === 'file'}
   <Label small forAttr={'dropzone-label'}>{meta.name}</Label>
-  <Dropzone bind:files={value} />
+  <Dropzone bind:files={value} savedFiles={originalValue} />
 {:else}
   {#if type === 'checkbox'}
     <label>{meta.name}</label>
diff --git a/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte b/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte
index 4a88d200d9..a5a04c79c8 100644
--- a/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte
+++ b/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte
@@ -1,7 +1,14 @@
 <script>
   import { getContext } from "svelte"
   import { backendUiStore } from "builderStore"
-  import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
+  import {
+    DropdownMenu,
+    Button,
+    Icon,
+    Input,
+    Select,
+    Heading,
+  } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
   import DeleteRecordModal from "../modals/DeleteRecord.svelte"
@@ -48,11 +55,11 @@
     <ul>
       <li data-cy="edit-row" on:click={showEditor}>
         <Icon name="edit" />
-        Edit
+        <span>Edit</span>
       </li>
       <li data-cy="delete-row" on:click={deleteRow}>
         <Icon name="delete" />
-        Delete
+        <span>Delete</span>
       </li>
     </ul>
   {/if}
@@ -79,7 +86,6 @@
   li {
     display: flex;
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
     color: var(--ink);
     padding: var(--spacing-s) var(--spacing-m);
     margin: auto 0px;
diff --git a/packages/builder/tests/buildStateOrigins.spec.js b/packages/builder/tests/buildStateOrigins.spec.js
deleted file mode 100644
index 29d8907873..0000000000
--- a/packages/builder/tests/buildStateOrigins.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { buildStateOrigins } from "../src/builderStore/buildStateOrigins"
-
-it("builds the correct stateOrigins object from a screen definition with handlers", () => {
-  expect(
-    buildStateOrigins({
-      name: "screen1",
-      description: "",
-      props: {
-        _component: "@budibase/standard-components/container",
-        className: "",
-        type: "div",
-        onClick: [
-          {
-            "##eventHandlerType": "Set State",
-            parameters: {
-              path: "testKey",
-              value: "value",
-            },
-          },
-        ],
-      },
-    })
-  ).toEqual({
-    testKey: {
-      "##eventHandlerType": "Set State",
-      parameters: {
-        path: "testKey",
-        value: "value",
-      },
-    },
-  })
-})
diff --git a/packages/server/src/api/controllers/static.js b/packages/server/src/api/controllers/static.js
index 0720948731..fd4afb42e7 100644
--- a/packages/server/src/api/controllers/static.js
+++ b/packages/server/src/api/controllers/static.js
@@ -22,22 +22,6 @@ exports.serveBuilder = async function(ctx) {
   await send(ctx, ctx.file, { root: ctx.devPath || builderPath })
 }
 
-exports.deleteLocalFileUpload = async function(ctx) {
-  try {
-    const db = new CouchDB(ctx.user.instanceId)
-    let fileUploads = await db.get("_local/fileuploads")
-    fileUploads.uploads = fileUploads.uploads.filter(
-      upload => upload.fileName !== ctx.params.fileName
-    )
-    await db.put(fileUploads)
-    ctx.body = {
-      message: `${ctx.fileName} deleted.`,
-    }
-  } catch (err) {
-    ctx.throw(500, err)
-  }
-}
-
 exports.processLocalFileUpload = async function(ctx) {
   const { files } = ctx.request.body
 
@@ -61,7 +45,7 @@ exports.processLocalFileUpload = async function(ctx) {
       fileName,
       extension: fileExtension,
       outputPath: join(attachmentsPath, fileName),
-      clientUrl: join("/attachments", fileName),
+      url: join("/attachments", fileName),
     }
   })
 
diff --git a/packages/server/src/api/routes/static.js b/packages/server/src/api/routes/static.js
index 32e74e112d..0ce6a62668 100644
--- a/packages/server/src/api/routes/static.js
+++ b/packages/server/src/api/routes/static.js
@@ -28,11 +28,6 @@ router
     authorized(BUILDER),
     controller.processLocalFileUpload
   )
-  .delete(
-    "/api/attachments/:fileName",
-    authorized(BUILDER),
-    controller.deleteLocalFileUpload
-  )
   .get("/componentlibrary", controller.serveComponentLibrary)
   .get("/assets/:file*", controller.serveAppAsset)
   .get("/attachments/:file*", controller.serveAttachment)

From 881627ff7b75075a09a97536313496f2ec85799d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 18 Sep 2020 12:43:45 +0100
Subject: [PATCH 13/15] tidy up

---
 .../database/DataTable/modals/RecordFieldControl.svelte         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
index 86e3386133..991a5fea63 100644
--- a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
+++ b/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
@@ -51,7 +51,7 @@
   <DatePicker bind:value />
 {:else if type === 'file'}
   <Label small forAttr={'dropzone-label'}>{meta.name}</Label>
-  <Dropzone bind:files={value} savedFiles={originalValue} />
+  <Dropzone bind:files={value} />
 {:else}
   {#if type === 'checkbox'}
     <label>{meta.name}</label>

From 8ce3d4124be05bd013a8de53f1ff27eacb787c5e Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 18 Sep 2020 15:08:36 +0100
Subject: [PATCH 14/15] file size limits

---
 .../builder/src/components/common/Dropzone.svelte  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/Dropzone.svelte b/packages/builder/src/components/common/Dropzone.svelte
index e98dd5f835..a356ff811f 100644
--- a/packages/builder/src/components/common/Dropzone.svelte
+++ b/packages/builder/src/components/common/Dropzone.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { notifier } from "builderStore/store/notifications"
   import { Heading, Body, Button } from "@budibase/bbui"
   import { FILE_TYPES } from "constants/backend"
   import api from "builderStore/api"
@@ -7,6 +8,7 @@
   const BYTES_IN_MB = 1000000
 
   export let files = []
+  export let fileSizeLimit = BYTES_IN_MB * 20
 
   let selectedImageIdx = 0
   let fileDragged = false
@@ -23,7 +25,17 @@
   }
 
   async function processFiles(fileList) {
-    const filesToProcess = Array.from(fileList).map(({ name, path, size }) => ({
+    const fileArray = Array.from(fileList)
+
+    if (fileArray.some(file => file.size >= fileSizeLimit)) {
+      notifier.danger(
+        `Files cannot exceed ${fileSizeLimit /
+          BYTES_IN_MB}MB. Please try again with smaller files.`
+      )
+      return
+    }
+
+    const filesToProcess = fileArray.map(({ name, path, size }) => ({
       name,
       path,
       size,

From b0aedd38ed23ba5d47dcc8c2cce74d525b0d46c1 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 18 Sep 2020 16:19:41 +0100
Subject: [PATCH 15/15] lowercase file extension

---
 packages/server/src/api/controllers/deploy/aws.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/deploy/aws.js b/packages/server/src/api/controllers/deploy/aws.js
index 40bada4dca..91f28793da 100644
--- a/packages/server/src/api/controllers/deploy/aws.js
+++ b/packages/server/src/api/controllers/deploy/aws.js
@@ -71,7 +71,7 @@ function prepareUploadForS3({ filePath, s3Key, metadata, s3 }) {
     .upload({
       Key: s3Key,
       Body: fileBytes,
-      ContentType: CONTENT_TYPE_MAP[fileExtension],
+      ContentType: CONTENT_TYPE_MAP[fileExtension.toLowerCase()],
       Metadata: metadata,
     })
     .promise()