allow deletion of images

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",

packages/builder/src/components/common/Dropzone.old.svelte

@@ -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} />

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>
+          <div>
-            <i class="ri-image-2-line file-icon" />
+            <i
-            {selectedImage.extension}
+              class={`file-icon ${determineFileIcon(selectedImage.extension)}`} />
-          </span>
+            <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>

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>

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}
+                <AttachmentList files={row[header] || []} />
-                  <img width="100" height="100" src={img.clientUrl} />
-                {/each}
               {: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;

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}

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"]
+}

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"

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) {
+function prepareUploadForS3({ filePath, s3Key, metadata, s3 }) {
-    const upload = prepareUploadForS3(filePath, metadata)
-    uploads.push(upload)
-  })
-
-  return uploads
-}
-
-
-function prepareUploadForS3({ filePath, s3Key, metadata }) {
   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

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

packages/server/src/api/controllers/static/imageProcessing.js

@@ -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

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