Allow dropzone to preview images before being uploaded
This commit is contained in:
parent
e76f68cee3
commit
6a92e7304b
1 changed files with 35 additions and 12 deletions
|
@ -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>
|
||||||
|
{#if selectedImage.size}
|
||||||
<div class="filesize">
|
<div class="filesize">
|
||||||
{#if selectedImage.size <= BYTES_IN_MB}
|
{#if selectedImage.size <= BYTES_IN_MB}
|
||||||
{`${selectedImage.size / BYTES_IN_KB} KB`}
|
{`${selectedImage.size / BYTES_IN_KB} KB`}
|
||||||
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
|
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
|
||||||
</div>
|
</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>
|
||||||
|
{#if file.size}
|
||||||
<div class="filesize">
|
<div class="filesize">
|
||||||
{#if file.size <= BYTES_IN_MB}
|
{#if file.size <= BYTES_IN_MB}
|
||||||
{`${file.size / BYTES_IN_KB} KB`}
|
{`${file.size / BYTES_IN_KB} KB`}
|
||||||
{:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
|
{:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
|
||||||
</div>
|
</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" />
|
||||||
|
|
Loading…
Reference in a new issue