Implement download by url

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

@@ -1,7 +1,9 @@
 <script>
-  import { Label } from "@budibase/bbui"
-  import { FieldType } from "@budibase/types"
+  import { Select, Label } from "@budibase/bbui"
+  import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  import { FieldType } from "@budibase/types"
+  import { processStringSync } from "@budibase/string-templates"
 
   export let parameters
   export let bindings = []
@@ -9,17 +11,72 @@
   $: fileBindings = bindings?.filter(
     b => b.fieldSchema?.type === FieldType.ATTACHMENT
   )
+
+  let selectedAttachment
+
+  const fileOptions = [
+    {
+      label: "Attachment",
+      value: "attachment",
+    },
+    {
+      label: "Url",
+      value: "url",
+    },
+  ]
+
+  const onAttachmentSelect = e => {
+    const fileData = processStringSync(e.detail, bindings)
+    parameters.value ??= {}
+    parameters.value.file_name = e.detail.name
+    parameters.value.url = e.detail.url
+    console.log({ parameters, bindings, fileData })
+  }
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "attachment"
+    }
+  })
 </script>
 
 <div class="root">
   <Label small>File</Label>
-  <DrawerBindableInput
-    title="State value"
-    bindings={fileBindings}
-    value={parameters.value}
-    allowHelpers={false}
-    on:change={e => (parameters.value = e.detail)}
+  <Select
+    placeholder={null}
+    bind:value={parameters.type}
+    options={fileOptions}
+    on:change={() => {
+      delete parameters.value
+    }}
   />
+  {#if parameters.type === "attachment"}
+    <Label small>Attachment</Label>
+    <DrawerBindableInput
+      title="Attachment"
+      bindings={fileBindings}
+      allowHelpers={false}
+      bind:value={selectedAttachment}
+      on:change={onAttachmentSelect}
+    />
+  {:else}
+    <Label small>URL</Label>
+    <DrawerBindableInput
+      title="URL"
+      {bindings}
+      value={parameters.value?.url}
+      on:change={e =>
+        (parameters.value = { ...parameters.value, url: e.detail })}
+    />
+    <Label small>File name</Label>
+    <DrawerBindableInput
+      title="File name"
+      {bindings}
+      value={parameters.value?.file_name}
+      on:change={e =>
+        (parameters.value = { ...parameters.value, file_name: e.detail })}
+    />
+  {/if}
 </div>
 
 <style>
@@ -29,6 +86,7 @@
     row-gap: var(--spacing-s);
     grid-template-columns: 60px 1fr;
     align-items: center;
+    max-width: 400px;
     margin: 0 auto;
   }
 </style>

packages/client/src/utils/buttonActions.js

@@ -400,21 +400,23 @@ const closeSidePanelHandler = () => {
   sidePanelStore.actions.close()
 }
 
-const downloadFileHandler = (action, context) => {
-  download(action.parameters.value, `file.jpg`)
-  // const x = processStringSync(action.parameters.value, context)
-  // console.warn(x)
+const downloadFileHandler = async (action, context) => {
+  const { url, file_name } = action.parameters.value
 
-  // // Built total context for this action
-  // const totalContext = {
-  //   ...context,
-  //   state: get(stateStore),
-  //   actions: buttonContext,
-  // }
+  const response = await fetch(url)
 
-  // action = enrichDataBindings(action, totalContext)
+  if (!response.ok) {
+    throw "TODO"
+  }
 
-  // console.error(action)
+  const objectUrl = URL.createObjectURL(await response.blob())
+
+  const link = document.createElement("a")
+  link.href = objectUrl
+  link.download = file_name
+  link.click()
+
+  URL.revokeObjectURL(objectUrl)
 }
 
 const handlerMap = {