From 65db932232bd2deec56d9ccc523c8d4942d63699 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Fri, 11 Feb 2022 02:04:58 +0000
Subject: [PATCH] more progress on upload ui

---
 app/views/console/comps/header.phtml   | 30 ++++++++++++++++++--------
 app/views/console/storage/bucket.phtml |  2 +-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/app/views/console/comps/header.phtml b/app/views/console/comps/header.phtml
index 72fee14e6..af1d9666a 100644
--- a/app/views/console/comps/header.phtml
+++ b/app/views/console/comps/header.phtml
@@ -223,8 +223,7 @@
     </form>
 </div>
 <div
- id="upload-modal" style="position: absolute; right:0; top: 20; background: white;z-index: 9999;">
-    <button x-data @click="$store.uploader.addFile('file-x')">add</button>
+ id="upload-modal" style="position: absolute; right:0; bottom: 20; 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"></p>
@@ -235,19 +234,32 @@
     document.addEventListener('alpine:init', () => {
             Alpine.store('uploader', {
                 files: [],
-                addFile(file) {
+                addFile(file){
                     this.files.push(file);
                     console.log(this.files);
                 },
-                async uploadFile(event) {
-                    event.preventDefault();
+                async uploadFile(target) {
                     /* console.dir(event.target); */
-                    const formData = new FormData(event.target);
+                    const formData = new FormData(target);
                     console.dir(formData.get('file'));
                     const sdk = window.ls.container.get('sdk');
-                    console.log(formData.get('read'));
-                    const file = await sdk.storage.createFile(formData.get('bucketId'), formData.get('fileId'), formData.get('file'), formData.get('read') ?? [], formData.get('write') ?? []);
-                    console(file);
+                    console.log(JSON.parse(formData.get('read')));
+                    let read = formData.get('read');
+                    if(read) {
+                        read = JSON.parse(read);
+                    }
+
+                    let write = formData.get('write');
+                    if(write) {
+                        write = JSON.parse(wirte);
+                    }
+                    const file = await sdk.storage.createFile(
+                        formData.get('bucketId'),
+                        formData.get('fileId'),
+                        formData.get('file'),
+                        read,
+                        write);
+                    this.files.push(file.name);
                 }
 
             });
diff --git a/app/views/console/storage/bucket.phtml b/app/views/console/storage/bucket.phtml
index c4592a7bf..2b23e0443 100644
--- a/app/views/console/storage/bucket.phtml
+++ b/app/views/console/storage/bucket.phtml
@@ -262,7 +262,7 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                             data-analytics-category="console"
                             data-analytics-label="Create Storage File"
                             x-data
-                            @submit="$store.uploader.uploadFile"
+                            @submit.prevent="$store.uploader.uploadFile($event.target)"
                             >
                             <input type="hidden" name="bucketId" id="files-bucketId" data-ls-bind="{{router.params.id}}">