@sierra-95/svelte-scaffold 1.2.5 → 1.2.7

package/dist/Modules/FilePicker/Actions/delete.svelte

@@ -21,9 +21,9 @@
 
     async function deleteSubmissions() {
         const store = get(fileInputStore);
-        const idsToDelete = store.submissions.map(item => item.id);
+        const itemsToDelete = store.submissions;
         
-        if (!idsToDelete || idsToDelete.length === 0) return;
+        if (!itemsToDelete || itemsToDelete.length === 0) return;
         if (!$fileInputConfig.serverDeleteUrl) return;
 
         try {
@@ -33,7 +33,7 @@
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify(idsToDelete)
+                body: JSON.stringify(itemsToDelete)
             });
 
             const data = await response.json();

package/dist/Modules/FilePicker/Actions/download.svelte

@@ -1,61 +1,111 @@
 <script lang="ts">
     import { get } from "svelte/store";
     import {MenuItem, fileInputStore, fileInputConfig, addToast} from "../../../index.js";
-
+    import type {FileInputStoreMediaItem} from '../../../index.js';
     let {
         openActionsMenu = $bindable(),
     } = $props();
 
+    let AuthorizedMediaItems = $state([]);
+
+    async function download(item: FileInputStoreMediaItem) {
+        try {
+            const res = await fetch($fileInputConfig.serverDownloadUrl + `?r2_key=${item.r2_key}`, {
+                method: 'GET'
+            });
+
+            if (!res.ok) {
+                addToast({
+                    status: 'error',
+                    message: await res.text() || 'Download failed'
+                });
+                return;
+            }
+
+            const blob = await res.blob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = item.original_name || 'download';
+
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+
+            URL.revokeObjectURL(url);
+
+        } catch (err) {
+            addToast({
+                status: 'error',
+                message: `Downloading ${item.original_name} failed: ${err}`
+            });
+        }
+    }
+
     async function handleDownload() {
-        openActionsMenu = false;
-        const store = get(fileInputStore);
-        if (!store.submissions?.length) {
+        if (!AuthorizedMediaItems.length) {
             addToast({
                 status: 'error',
-                message: 'An error occurred while processing your request.'
+                message: 'No files to download'
             });
             return;
-        };
+        }
         try {
             $fileInputStore.processing = true;
-            for (const item of store.submissions) {
-                if (!item.id) continue;
-                await download(item.id);
+            for (const item of AuthorizedMediaItems) {
+                await download(item);
             }
         } finally {
             $fileInputStore.processing = false;
-            fileInputStore.update(store => {
-                store.submissions = [];
-                return store;
-            });
         }
     }
 
-    async function download(id: string) {
+    async function fetchAuthorizedItems() {
+        openActionsMenu = false;
+        const store = get(fileInputStore);
+        if (!store.submissions?.length) {
+            addToast({
+                status: 'error',
+                message: 'An error occurred while processing your request.'
+            });
+            return;
+        }
         try {
-            const downloadURL = $fileInputConfig.serverDownloadUrl + `?id=${id}`;
-            const res = await fetch(downloadURL, {
-                method: 'GET',
+            $fileInputStore.processing = true;
+            const ids = store.submissions
+                .map(item => item.id)
+                .filter(Boolean);
+
+            const res = await fetch($fileInputConfig.serverDownloadUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(ids)
             });
 
             if (!res.ok) {
+                const message = await res.text();
                 addToast({
                     status: 'error',
-                    message: await res.json() || 'Download failed'
+                    message: message || 'Download failed'
                 });
                 return;
             }
-            const data = await res.json();
-            const url = data.url;
-            const a = document.createElement('a');
-            a.href = url;
-            a.click();
-            a.remove();            
+            AuthorizedMediaItems = await res.json();
+            await handleDownload();
+
         } catch (err) {
             addToast({
                 status: 'error',
                 message: `Download failed: ${err}`
             });
+        } finally {
+            $fileInputStore.processing = false;
+            fileInputStore.update(store => {
+                store.submissions = [];
+                return store;
+            });
         }
     }
 </script>
@@ -64,5 +114,5 @@
     icon="fa fa-download" 
     iconGap="10px" 
     iconSize="15px"
-    onclick={handleDownload}>Download
+    onclick={fetchAuthorizedItems}>Download
 </MenuItem>

package/dist/Modules/FilePicker/Upload/upload.svelte

@@ -3,12 +3,20 @@
     
     async function handleUpload() {
         if( $fileInputStore.selectedFiles.length === 0 || !$fileInputConfig.serverUploadUrl) return;
-
+        if( !$fileInputConfig.user_id) {
+            addToast({
+                status: 'error',
+                message: 'User ID is required for upload',
+                persistent: true
+            });
+            return;
+        }
         try {
             $fileInputStore.processing = true;
             const formData = new FormData();
 
             $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
+            formData.append('user_id', $fileInputConfig.user_id);
 
             const res = await fetch($fileInputConfig.serverUploadUrl, {
                 method: 'POST',
@@ -35,6 +43,10 @@
                 status: 'success',
                 message: 'Files uploaded successfully!'
             });
+            
+            if($fileInputStore.onUpload){
+                $fileInputStore.onUpload();
+            }
         } catch (err) {
             addToast({
                 status: 'error',
@@ -45,11 +57,39 @@
             $fileInputStore.processing = false;
         }
     }
+
+    async function handleStorageStatus(){
+        if (($fileInputConfig.usedBytes == null || $fileInputConfig.maxBytes == null)) {
+            addToast({
+                status: 'warning',
+                message: 'Unable to calculate storage usage. Please configure your cloud storage settings.',
+                persistent: true,
+            });
+            return;
+        }
+        const selectedSize = $fileInputStore.selectedFiles.reduce(
+            (acc, file) => acc + file.size,
+            0
+        );
+        //console.log('Selected files total size:', selectedSize);
+        const projectedUsage = $fileInputConfig.usedBytes + selectedSize;
+        const usageRatio = projectedUsage / $fileInputConfig.maxBytes;
+
+        if (usageRatio >= 0.95) {
+            addToast({
+                status: 'error',
+                message: `Upload blocked: storage limit almost reached (${Math.round(usageRatio * 100)}%). Please delete some files or free up space.`,
+                persistent: true
+            });
+            return;
+        }
+        handleUpload();
+    }
 </script>
 
 
 <FileInput 
     minHeight="400px" 
     bind:processing={$fileInputStore.processing} 
-    onclick={handleUpload} 
+    onclick={handleStorageStatus} 
 />

package/dist/stores/modules/fileInput.d.ts

@@ -13,6 +13,7 @@ export type FileInputState = {
     selectedFiles: File[];
     sizeConstraint: number;
     uploadType: Array<'image' | 'audio' | 'video' | 'documents' | 'others'>;
+    onUpload?: () => void;
     activeTab: 'Cloud' | 'Upload';
     activeMenu: 'Documents' | 'Music' | 'Pictures' | 'Videos' | 'Others';
     disabledMenuItem: Array<'Music' | 'Documents' | 'Pictures' | 'Videos' | 'Others'> | null;
@@ -29,6 +30,7 @@ export type FileInputConfig = {
     serverDownloadUrl: string;
     usedBytes: number;
     maxBytes: number;
+    user_id?: string;
 };
 export declare const fileInputConfig: import("svelte/store").Writable<FileInputConfig>;
 export declare const fileInputStore: import("svelte/store").Writable<FileInputState>;

package/dist/stores/modules/fileInput.js

@@ -4,6 +4,7 @@ const defaultFileInputState = {
     selectedFiles: [],
     sizeConstraint: 10 * 1024 * 1024,
     uploadType: ['image', 'audio', 'video', 'documents', 'others'],
+    onUpload: () => { },
     // FilePicker
     activeTab: 'Cloud',
     activeMenu: 'Documents',
@@ -20,7 +21,8 @@ const defaultFileInputConfig = {
     serverDeleteUrl: '',
     serverDownloadUrl: '',
     usedBytes: 0,
-    maxBytes: 104857600
+    maxBytes: 104857600,
+    user_id: '',
 };
 export const fileInputConfig = writable({
     ...defaultFileInputConfig

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.2.5",
+	"version": "1.2.7",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",