work in progress upload ui

app/controllers/api/storage.php

@@ -2,7 +2,7 @@
 
 use Appwrite\Auth\Auth;
 use Appwrite\ClamAV\Network;
-use Appwrite\Database\Validator\CustomId;
+use Appwrite\Utopia\Database\Validator\CustomId;
 use Appwrite\OpenSSL\OpenSSL;
 use Appwrite\Utopia\Response;
 use Utopia\App;

app/views/console/comps/header.phtml

@@ -58,7 +58,7 @@
                                 <i class="icon-sun-inv force-light"></i>
                                 <i class="icon-moon-inv force-dark"></i>
                             </button>
-                        </div>    
+                        </div>
                     </span>
                 </li>
             </ul>
@@ -222,3 +222,34 @@
         </footer>
     </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>
+    <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>
+        </template>
+    </template>
+</div>
+<script>
+    document.addEventListener('alpine:init', () => {
+            Alpine.store('uploader', {
+                files: [],
+                addFile(file) {
+                    this.files.push(file);
+                    console.log(this.files);
+                },
+                async uploadFile(event) {
+                    event.preventDefault();
+                    /* console.dir(event.target); */
+                    const formData = new FormData(event.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);
+                }
+
+            });
+        })
+</script>

app/views/console/comps/upload-modal.phtml

@@ -0,0 +1,6 @@
+<div x-data id="upload-modal">
+      <template x-for="$store.uploader.files as file">
+        <p x-text="file"></p>
+    </template>
+    <button @click="$store.uploader.addFile('file-x')">add</button>
+</div>

app/views/console/storage/bucket.phtml

@@ -261,16 +261,9 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                             data-analytics-event="submit"
                             data-analytics-category="console"
                             data-analytics-label="Create Storage File"
-                            data-service="storage.createFile"
-                            data-event="submit"
-                            data-scope="sdk"
-                            data-loading="Uploading File..."
-                            data-success="alert,trigger,reset"
-                            data-success-param-alert-text="File uploaded successfully"
-                            data-success-param-trigger-events="storage.createFile"
-                            data-failure="alert"
-                            data-failure-param-alert-text="Failed to upload file"
-                            data-failure-param-alert-classname="error">
+                            x-data
+                            @submit="$store.uploader.uploadFile"
+                            >
                             <input type="hidden" name="bucketId" id="files-bucketId" data-ls-bind="{{router.params.id}}">
 
                             <label for="fileId">File ID</label>

docker-compose.yml

@@ -73,6 +73,7 @@ services:
       - ./app:/usr/src/code/app
       # - ./vendor:/usr/src/code/vendor
       - ./docs:/usr/src/code/docs
+      - ./public:/usr/src/code/public
       - ./src:/usr/src/code/src
       # - ./debug:/tmp
       - ./dev:/usr/local/dev

gulpfile.js

@@ -33,6 +33,7 @@ const configApp = {
         'public/scripts/routes.js',
         'public/scripts/filters.js',
         'public/scripts/app.js',
+        // 'public/scripts/upload-modal.js',
 
         'public/scripts/views/service.js',
 

public/scripts/upload-modal.js

@@ -0,0 +1,17 @@
+//get sdk instance from litespeed
+
+// (function (window) {
+//     window.onload = function () {
+//         console.log(document);
+//         document.addEventListener('alpine:init', () => {
+//             Alpine.store('uploader', {
+//                 files: [],
+//                 addFile: (file) => {
+//                     files.push(file);
+//                     console.log(files);
+//                 },
+
+//             });
+//         })
+//     }
+// })(window);