Select table on config

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DownloadFile.svelte

@@ -3,14 +3,11 @@
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { FieldType } from "@budibase/types"
+  import { tables, viewsV2 } from "stores/builder"
 
   export let parameters
   export let bindings = []
 
-  $: fileBindings = bindings?.filter(
-    b => b.fieldSchema?.type === FieldType.ATTACHMENT
-  )
-
   const fileOptions = [
     {
       label: "Attachment",
@@ -22,6 +19,26 @@
     },
   ]
 
+  $: tableOptions = $tables.list.map(table => ({
+    label: table.name,
+    resourceId: table._id,
+    schema: table.schema,
+  }))
+  $: viewOptions = $viewsV2.list.map(view => ({
+    label: view.name,
+    resourceId: view.id,
+    schema: view.schema,
+  }))
+  $: options = [...(tableOptions || []), ...(viewOptions || [])]
+
+  $: selectedTable =
+    parameters.tableId && options.find(t => t.resourceId === parameters.tableId)
+  $: attachmentColumns =
+    selectedTable &&
+    Object.values(selectedTable.schema).filter(
+      c => c.type === FieldType.ATTACHMENT
+    )
+
   onMount(() => {
     if (!parameters.type) {
       parameters.type = "attachment"
@@ -37,13 +54,30 @@
     options={fileOptions}
   />
   {#if parameters.type === "attachment"}
-    <Label small>Attachment</Label>
+    <Label>Table</Label>
+    <Select
+      placeholder={null}
+      bind:value={parameters.tableId}
+      {options}
+      getOptionLabel={table => table.label}
+      getOptionValue={table => table.resourceId}
+    />
+    <Label small>Column</Label>
+    <Select
+      disabled={!attachmentColumns?.length}
+      placeholder={parameters.tableId && !attachmentColumns?.length
+        ? "This table has no attachment columns"
+        : undefined}
+      bind:value={parameters.attachmentColumn}
+      options={attachmentColumns?.map(c => c.name)}
+    />
+
+    <Label small>Row ID</Label>
     <DrawerBindableInput
-      title="Attachment"
+      {bindings}
-      bindings={fileBindings}
+      title="Row ID"
-      allowHelpers={false}
+      value={parameters.rowId}
-      value={parameters.attachment}
+      on:change={value => (parameters.rowId = value.detail)}
-      on:change={value => (parameters.attachment = value.detail)}
     />
   {:else}
     <Label small>URL</Label>
@@ -70,7 +104,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
-    max-width: 400px;
+    max-width: 800px;
     margin: 0 auto;
   }
 </style>

packages/client/src/utils/buttonActions.js

@@ -1,5 +1,6 @@
 import { get } from "svelte/store"
 import download from "downloadjs"
+import { downloadStream } from "@budibase/frontend-core"
 import {
   routeStore,
   builderStore,
@@ -400,15 +401,18 @@ const closeSidePanelHandler = () => {
   sidePanelStore.actions.close()
 }
 
-const downloadFileHandler = async (action, _context) => {
+const downloadFileHandler = async action => {
   try {
-    let { url, fileName, type, attachment } = action.parameters
+    const { type } = action.parameters
     if (type === "attachment") {
-      const attachmentObject = JSON.parse(attachment)
+      const { tableId, rowId, attachmentColumn } = action.parameters
-      url = attachmentObject.url
+      const res = await API.downloadAttachment(tableId, rowId, attachmentColumn)
-      fileName = attachmentObject.name
+      await downloadStream(res)
+      return
     }
 
+    const { url, fileName } = action.parameters
+
     const response = await fetch(url)
 
     if (!response.ok) {