CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-15 11:15:59 +12:00
Code Issues Projects Releases Wiki Activity

Allow dropzone to preview images before being uploaded

Browse source
This commit is contained in:
Andrew Kingston 2021-05-18 18:47:39 +01:00
parent e76f68cee3
commit 6a92e7304b
1 changed files with 35 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/bbui/src/Form/Core/Dropzone.svelte
View file

@ -37,9 +37,28 @@
const fieldId = id || generateID() const fieldId = id || generateID()
let selectedImageIdx = 0 let selectedImageIdx = 0
let fileDragged = false let fileDragged = false
let selectedUrl
$: selectedImage = value?.[selectedImageIdx] ?? null $: selectedImage = value?.[selectedImageIdx] ?? null
$: fileCount = value?.length ?? 0 $: fileCount = value?.length ?? 0
$: isImage = imageExtensions.includes(selectedImage?.extension?.toLowerCase()) $: isImage =
imageExtensions.includes(selectedImage?.extension?.toLowerCase()) ||
selectedImage?.type?.startsWith("image")
$: {
if (selectedImage?.url) {
selectedUrl = selectedImage?.url
} else if (selectedImage) {
try {
let reader = new FileReader()
reader.readAsDataURL(selectedImage)
reader.onload = e => {
selectedUrl = e.target.result
}
} catch (error) {
selectedUrl = null
}
}
}
async function processFileList(fileList) { async function processFileList(fileList) {
if ( if (
@ -102,11 +121,13 @@
<div class="gallery"> <div class="gallery">
<div class="title"> <div class="title">
<div class="filename">{selectedImage.name}</div> <div class="filename">{selectedImage.name}</div>
<div class="filesize"> {#if selectedImage.size}
{#if selectedImage.size <= BYTES_IN_MB} <div class="filesize">
{`${selectedImage.size / BYTES_IN_KB} KB`} {#if selectedImage.size <= BYTES_IN_MB}
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if} {`${selectedImage.size / BYTES_IN_KB} KB`}
</div> {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
</div>
{/if}
{#if !disabled} {#if !disabled}
<div class="delete-button" on:click={removeFile}> <div class="delete-button" on:click={removeFile}>
<Icon name="Close" /> <Icon name="Close" />
@ -114,7 +135,7 @@
{/if} {/if}
</div> </div>
{#if isImage} {#if isImage}
<img alt="preview" src={selectedImage.url} /> <img alt="preview" src={selectedUrl} />
{:else} {:else}
<div class="placeholder"> <div class="placeholder">
<div class="extension">{selectedImage.extension}</div> <div class="extension">{selectedImage.extension}</div>
@ -142,11 +163,13 @@
<div class="gallery"> <div class="gallery">
<div class="title"> <div class="title">
<div class="filename">{file.name}</div> <div class="filename">{file.name}</div>
<div class="filesize"> {#if file.size}
{#if file.size <= BYTES_IN_MB} <div class="filesize">
{`${file.size / BYTES_IN_KB} KB`} {#if file.size <= BYTES_IN_MB}
{:else}{`${file.size / BYTES_IN_MB} MB`}{/if} {`${file.size / BYTES_IN_KB} KB`}
</div> {:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
</div>
{/if}
{#if !disabled} {#if !disabled}
<div class="delete-button" on:click={removeFile}> <div class="delete-button" on:click={removeFile}>
<Icon name="Close" /> <Icon name="Close" />