From 78656441683d477bc252ebfe873d3e9024b0eb42 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Fri, 11 Feb 2022 03:19:30 +0000
Subject: [PATCH] more fixes and update

---
 app/views/console/comps/header.phtml | 50 ++++++++++++++++++----------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/app/views/console/comps/header.phtml b/app/views/console/comps/header.phtml
index 95a02d0d8..9f2232adf 100644
--- a/app/views/console/comps/header.phtml
+++ b/app/views/console/comps/header.phtml
@@ -225,8 +225,11 @@
 <div
  id="upload-modal" style="position: absolute; right:0; bottom: 0; background: white;z-index: 9999;">
     <template x-data x-if="$store.uploader.files.length > 0">
-        <template x-data x-for="file in $store.uploader.files">
-            <p x-text="file.name"></p>
+        <template x-data x-for="file in $store.uploader.files" :key="file.id">
+            <p>
+                <span x-text="file.progress"></span>
+                <span x-text="file.name"></span>
+            </p>
         </template>
     </template>
 </div>
@@ -234,44 +237,55 @@
     document.addEventListener('alpine:init', () => {
             Alpine.store('uploader', {
                 files: [],
-                addFile(file){
+                addFile(file) {
                     this.files.push(file);
-                    console.log(this.files);
+                },
+                updateFile(id, file) {
+                    const files = this.files.map((oldFile) => file.id == oldFile.id ? file : oldFile);
+                    this.files = [
+                        ...files
+                    ]
                 },
                 async uploadFile(target) {
                     const formData = new FormData(target);
                     const sdk = window.ls.container.get('sdk');
                     const file = formData.get('file');
-                    this.files.push({
+                    const fileId = formData.get('fileId');
+                    const id = fileId === 'unique()' ? new Date().getTime().toString() : fileId;
+                    let read = formData.get('read');
+                    if(read) {
+                        read = JSON.parse(read);
+                    }
+                    let write = formData.get('write');
+                    if(write) {
+                        write = JSON.parse(wirte);
+                    }
+
+                    this.addFile({
                         name: file.name,
                         progress: 0,
                         completed: false,
                         failed: false,
                     });
-                    let read = formData.get('read');
-                    if(read) {
-                        read = JSON.parse(read);
-                    }
-
-                    let write = formData.get('write');
-                    if(write) {
-                        write = JSON.parse(wirte);
-                    }
+                    
                     const response = await sdk.storage.createFile(
                         formData.get('bucketId'),
-                        formData.get('fileId'),
-                        formData.get('file'),
+                        fileId,
+                        file,
                         read,
                         write,
                         (progress) => {
-                            this.files.push({
+                            console.log("progress", progress);
+                            this.updateFile(id, {
+                                id: id,
                                 name: file.name,
                                 progress: progress,
                                 completed: false,
                                 failed: false
                             });
                         });
-                    this.files.push({
+                    this.updateFile(id,{
+                        id: response.$id,
                         name: response.name,
                         progress: 100,
                         completed: true,