composables refactor and blob optimization

src/App.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="load-scene">
         <label > Open
-        <input type="file" multiple @change="load">
+        <input type="file" multiple @input="load">
         </label>
     </div>
 
@@ -30,8 +30,11 @@
 <script setup>
 
 import SceneEntry from './components/SceneEntry.vue'
+import {utils} from './composables/utils.js'
 import {ref} from 'vue'
 
+const {base64ToBlob} = utils()
+
 const scenes = ref([])
 const title = ref('')
 const add = () => {
@@ -44,23 +47,29 @@ const add = () => {
 
 const load = (e) => {
     let files = e.target.files
-    Promise.all(files.forEach(async (file) =>{
+    files.forEach((file) =>{
        const reader = new FileReader()
        reader.readAsText(file)
-       reader.onloadend = (e) => {
-        if (e.target.readyState == FileReader.DONE) {
+       reader.onloadend = async (ev) => {
+        if (ev.target.readyState == FileReader.DONE) {
            try {
             let scene = JSON.parse(reader.result)
-            // convert base64 to blob to avoid DOM lag during drag and drop
-            // bc base64 bloat the html document so much!
+            
+            await Promise.all(scene.series.map(async (shot) =>{
+                let file = await base64ToBlob(shot.img, 'snapshot')
+                let filePath = (window.URL || window.webkitURL).createObjectURL(file)
+                shot.img = filePath
+                shot.file = file
+            }))
+
             scenes.value.push(scene)
-           } catch (e) {
-            console.log(e)
+
+           } catch (err) {
+            console.log(err)
            }
         }
        }
     })
-    )
 }
 
 </script>

src/components/FileLoader.vue

@@ -15,6 +15,9 @@
 <script setup>
 
     import {ref, computed} from 'vue'
+    import {utils} from '../composables/utils.js'
+    
+    const {base64ToBlob} = utils()
     const emit = defineEmits(['upload', 'file'])
 
     const dropFile = ref([])
@@ -87,7 +90,7 @@
                 thumb.value.src = canvas.toDataURL('image/jpeg')
                 loading.value = false
                 video.removeEventListener('canplay', snapshot)
-                let file = await dataUrlToFile(thumb.value.src, 'snapshot')
+                let file = await base64ToBlob(thumb.value.src, 'snapshot')
                 resolve(file)
             }
 
@@ -95,13 +98,6 @@
         })
     }
 
-    const dataUrlToFile = async (dataUrl, fileName) => {
-        // Transform Base64 img to blob file, 
-        // in order not to have super long src urls for snapshot in the DOM
-        const res = await fetch(dataUrl);
-        const blob = await res.blob();
-        return new File([blob], fileName, { type: 'image/jpeg' });
-    }
 
 </script>
 

src/components/SceneEntry.vue

@@ -48,8 +48,14 @@ import draggable from 'vuedraggable'
 import AddShot from '../components/AddShot.vue'
 import ShotEntry from '../components/ShotEntry.vue'
 
+import {utils} from '../composables/utils.js'
+
+
+
 import {ref, computed} from 'vue'
 
+const {blobToBase64, download} = utils()
+
 const props = defineProps({
     title: String,
     series: Array
@@ -95,21 +101,6 @@ const serialize = async () => {
 }
 
 
-const blobToBase64 = (blob) => {
-    return new Promise((resolve, _) => {
-        const reader = new FileReader()
-        reader.onloadend = () => resolve(reader.result);
-        reader.readAsDataURL(blob)
-    })
-}
-
-function download(content, fileName, contentType) {
-    var a = document.createElement("a");
-    var file = new Blob([content], {type: contentType});
-    a.href = URL.createObjectURL(file);
-    a.download = fileName;
-    a.click();
-}
 
 </script>
 

src/composables/utils.js

@@ -0,0 +1,27 @@
+export function utils() {
+
+    const base64ToBlob = async (dataUrl, fileName) => {
+        const res = await fetch(dataUrl);
+        const blob = await res.blob();
+        return new File([blob], fileName, { type: 'image/jpeg' });
+    }
+
+    const blobToBase64 = (blob) => {
+        return new Promise((resolve, _) => {
+            const reader = new FileReader()
+            reader.onloadend = () => resolve(reader.result);
+            reader.readAsDataURL(blob)
+        })
+    }
+
+
+    const download = (content, fileName, contentType) => {
+        var a = document.createElement("a");
+        var file = new Blob([content], {type: contentType});
+        a.href = URL.createObjectURL(file);
+        a.download = fileName;
+        a.click();
+    }
+
+    return {base64ToBlob, blobToBase64, download}
+}