Implement download by url
This commit is contained in:
parent
df05cf2345
commit
12f9b47954
2 changed files with 80 additions and 20 deletions
|
@ -1,7 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { Label } from "@budibase/bbui"
|
import { Select, Label } from "@budibase/bbui"
|
||||||
import { FieldType } from "@budibase/types"
|
import { onMount } from "svelte"
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.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 parameters
|
||||||
export let bindings = []
|
export let bindings = []
|
||||||
|
@ -9,17 +11,72 @@
|
||||||
$: fileBindings = bindings?.filter(
|
$: fileBindings = bindings?.filter(
|
||||||
b => b.fieldSchema?.type === FieldType.ATTACHMENT
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<Label small>File</Label>
|
<Label small>File</Label>
|
||||||
<DrawerBindableInput
|
<Select
|
||||||
title="State value"
|
placeholder={null}
|
||||||
bindings={fileBindings}
|
bind:value={parameters.type}
|
||||||
value={parameters.value}
|
options={fileOptions}
|
||||||
allowHelpers={false}
|
on:change={() => {
|
||||||
on:change={e => (parameters.value = e.detail)}
|
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>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -29,6 +86,7 @@
|
||||||
row-gap: var(--spacing-s);
|
row-gap: var(--spacing-s);
|
||||||
grid-template-columns: 60px 1fr;
|
grid-template-columns: 60px 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
max-width: 400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -400,21 +400,23 @@ const closeSidePanelHandler = () => {
|
||||||
sidePanelStore.actions.close()
|
sidePanelStore.actions.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
const downloadFileHandler = (action, context) => {
|
const downloadFileHandler = async (action, context) => {
|
||||||
download(action.parameters.value, `file.jpg`)
|
const { url, file_name } = action.parameters.value
|
||||||
// const x = processStringSync(action.parameters.value, context)
|
|
||||||
// console.warn(x)
|
|
||||||
|
|
||||||
// // Built total context for this action
|
const response = await fetch(url)
|
||||||
// const totalContext = {
|
|
||||||
// ...context,
|
|
||||||
// state: get(stateStore),
|
|
||||||
// actions: buttonContext,
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 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 = {
|
const handlerMap = {
|
||||||
|
|
Loading…
Reference in a new issue