From 6a92e7304b1aa4ea9992ab000e523cdaaa6e004e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 18 May 2021 18:47:39 +0100
Subject: [PATCH] Allow dropzone to preview images before being uploaded

---
 packages/bbui/src/Form/Core/Dropzone.svelte | 47 +++++++++++++++------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 5b5c72b809..3315c923f8 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -37,9 +37,28 @@
   const fieldId = id || generateID()
   let selectedImageIdx = 0
   let fileDragged = false
+  let selectedUrl
   $: selectedImage = value?.[selectedImageIdx] ?? null
   $: 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) {
     if (
@@ -102,11 +121,13 @@
       <div class="gallery">
         <div class="title">
           <div class="filename">{selectedImage.name}</div>
-          <div class="filesize">
-            {#if selectedImage.size <= BYTES_IN_MB}
-              {`${selectedImage.size / BYTES_IN_KB} KB`}
-            {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
-          </div>
+          {#if selectedImage.size}
+            <div class="filesize">
+              {#if selectedImage.size <= BYTES_IN_MB}
+                {`${selectedImage.size / BYTES_IN_KB} KB`}
+              {:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
+            </div>
+          {/if}
           {#if !disabled}
             <div class="delete-button" on:click={removeFile}>
               <Icon name="Close" />
@@ -114,7 +135,7 @@
           {/if}
         </div>
         {#if isImage}
-          <img alt="preview" src={selectedImage.url} />
+          <img alt="preview" src={selectedUrl} />
         {:else}
           <div class="placeholder">
             <div class="extension">{selectedImage.extension}</div>
@@ -142,11 +163,13 @@
         <div class="gallery">
           <div class="title">
             <div class="filename">{file.name}</div>
-            <div class="filesize">
-              {#if file.size <= BYTES_IN_MB}
-                {`${file.size / BYTES_IN_KB} KB`}
-              {:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
-            </div>
+            {#if file.size}
+              <div class="filesize">
+                {#if file.size <= BYTES_IN_MB}
+                  {`${file.size / BYTES_IN_KB} KB`}
+                {:else}{`${file.size / BYTES_IN_MB} MB`}{/if}
+              </div>
+            {/if}
             {#if !disabled}
               <div class="delete-button" on:click={removeFile}>
                 <Icon name="Close" />