@sierra-95/svelte-scaffold 1.0.8 → 1.0.10

package/dist/Hooks/preview.d.ts

@@ -1,3 +1,5 @@
+import type { FileInputStoreMediaItem } from '../index.js';
 export declare function getPreviewUrlForMedia(file: File): string;
-export declare function toggleSelectForMedia(id: string, url: string, urlsOnly: boolean): void;
+export declare function toggleSelectForMedia(item: FileInputStoreMediaItem, urlsOnly: boolean): void;
 export declare function removeFileForMedia(index: number, e: Event): void;
+export declare const DOCUMENT_MIME_TYPES: Set<string>;

package/dist/Hooks/preview.js

@@ -2,16 +2,16 @@ import { fileInputStore } from '../index.js';
 export function getPreviewUrlForMedia(file) {
     return URL.createObjectURL(file);
 }
-export function toggleSelectForMedia(id, url, urlsOnly) {
+export function toggleSelectForMedia(item, urlsOnly) {
     if (!urlsOnly)
         return;
     fileInputStore.update(state => {
-        const index = state.submissions.findIndex(item => item.id === id);
+        const index = state.submissions.findIndex(sub => sub.id === item.id);
         return {
             ...state,
             submissions: index === -1
-                ? [...state.submissions, { id, url }] // select
-                : state.submissions.filter(item => item.id !== id) // deselect
+                ? [...state.submissions, item] // select full media
+                : state.submissions.filter(sub => sub.id !== item.id) // deselect
         };
     });
 }
@@ -22,3 +22,10 @@ export function removeFileForMedia(index, e) {
         selectedFiles: state.selectedFiles.filter((_, i) => i !== index)
     }));
 }
+export const DOCUMENT_MIME_TYPES = new Set([
+    'application/pdf',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.ms-excel',
+    'text/plain'
+]);

package/dist/components/Core/Form/Input/FileInput/fileInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onDestroy } from 'svelte';
-    import {fileInputStore, Button, setToastMessage} from '../../../../../index.js'
+    import {fileInputStore, Button, setToastMessage, DOCUMENT_MIME_TYPES} from '../../../../../index.js'
     import Preview from './preview.svelte';
 
     const {
@@ -11,74 +11,97 @@
 
     let fileInput: HTMLInputElement;
 
-    const typeMap: Record<'image' | 'audio' | 'video' | 'pdf', string[]> = {
+    const typeMap: Record<'image' | 'audio' | 'video' | 'documents' | 'others', string[]> = {
         image: ['image/'],
         audio: ['audio/'],
         video: ['video/'],
-        pdf: ['application/pdf']
+        documents: Array.from(DOCUMENT_MIME_TYPES),
+        others: []
     };
 
-
     //Validate and add files
     function isAllowedType(file: File): boolean {
-        return $fileInputStore.uploadType.some(type =>
-            typeMap[type].some(prefix => file.type.startsWith(prefix))
-        );
+        return $fileInputStore.uploadType.some(type => {
+            if (type === 'others') return true;
+            const prefixes = typeMap[type];
+            return prefixes.some(prefix => file.type.startsWith(prefix));
+        });
     }
 
-    function validateAndAddFile(file: File) {
-        if (!isAllowedType(file)) {
-            setToastMessage('error', `"${file.name}" is not an allowed file type`);
-            return;
-        }
+    function allowedTypes(){
+        const allowedTypes = $fileInputStore.uploadType
+            .filter(t => t !== 'others') 
+            .map(t => {
+                if (t === 'documents') return 'Documents (PDF, Word, Excel, TXT)';
+                return t.charAt(0).toUpperCase() + t.slice(1);
+            })
+            .join(', ');
+        return allowedTypes;
+    }
 
-        if (file.size > $fileInputStore.sizeConstraint) {
-            setToastMessage('error', `"${file.name}" exceeds the allowed file size`);
-            return;
+    function processFiles(files: FileList | File[]) {
+        const validFiles: File[] = [];
+
+        for (const file of files) {
+            if (!isAllowedType(file)) {
+                setToastMessage(
+                    'error',
+                    `"${file.name}" is not an allowed file type. Allowed types: ${allowedTypes()}`
+                );
+                continue; // skip invalid
+            }
+
+            if (file.size > $fileInputStore.sizeConstraint) {
+                setToastMessage(
+                    'error',
+                    `"${file.name}" exceeds the allowed file size`
+                );
+                continue; // skip oversized
+            }
+            validFiles.push(file); 
         }
 
-        fileInputStore.update(state => ({
-            ...state,
-            selectedFiles: [...state.selectedFiles, file]
-        }));
+        if (validFiles.length > 0) {
+            fileInputStore.update(state => ({
+                ...state,
+                selectedFiles: [...state.selectedFiles, ...validFiles]
+            }));
+        }
+        clearInput();
     }
 
 
+
     //Handle file selection via input
     function handleFileChange(event: Event) {
         const files = (event.target as HTMLInputElement).files;
         if (!files || files.length === 0) return;
-
-        for (const file of files) {
-            validateAndAddFile(file);
-        }
+        processFiles(files);
     }
 
     //Handle drag and drop
     function handleDrop(event: DragEvent) {
         event.preventDefault();
         if (!event.dataTransfer?.files.length) return;
-
-        for (const file of event.dataTransfer.files) {
-            validateAndAddFile(file);
-        }
-
+        processFiles(event.dataTransfer.files);
     }
 
     function handleDragOver(event: DragEvent) {
         event.preventDefault();
     }
 
+    function clearInput() {
+        if (fileInput) {
+            fileInput.value = '';
+        }
+    }
     //Delete selected files
     function handleClear() {
         fileInputStore.update(state => ({
             ...state,
             selectedFiles: []
         }));
-        if (fileInput) {
-            fileInput.value = '';
-        }
-
+        clearInput();
     }
 
     onDestroy(() => {
@@ -92,7 +115,12 @@
         bind:this={fileInput}
         type="file"
         accept={$fileInputStore.uploadType
-            .map(t => (t === 'pdf' ? 'application/pdf' : `${t}/*`))
+            .map(t => {
+                if (t === 'documents') return Array.from(DOCUMENT_MIME_TYPES).join(',');
+                if (t === 'others') return '';
+                return `${t}/*`;
+            })
+            .filter(Boolean)
             .join(',')
         }
         hidden

package/dist/components/Core/Form/Input/FileInput/preview.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
-    import {fileInputStore, PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo} from '../../../../../index.js';
+    import {fileInputStore, PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, PreviewGenericFile, DOCUMENT_MIME_TYPES} from '../../../../../index.js';
 
+    function getMediaCategory(file: File):
+        'Audio' | 'Documents' | 'Images' | 'Videos' | 'Others' {
 
-    $: media = {
-        Audio:  $fileInputStore.selectedFiles.filter(file =>
-            file.type.startsWith('audio/')
-        ),
-        Documents: $fileInputStore.selectedFiles.filter(
-            file => file.type === 'application/pdf'
-        ),
-        Images: $fileInputStore.selectedFiles.filter(file =>
-            file.type.startsWith('image/')
-        ),
-        Videos: $fileInputStore.selectedFiles.filter(file =>
-            file.type.startsWith('video/')
-        )
-    };
+        if (file.type.startsWith('audio/')) return 'Audio';
+        if (file.type.startsWith('image/')) return 'Images';
+        if (file.type.startsWith('video/')) return 'Videos';
+        if (DOCUMENT_MIME_TYPES.has(file.type)) return 'Documents';
+
+        return 'Others';
+    }
+
+    $: media = $fileInputStore.selectedFiles.reduce(
+        (acc, file) => {
+            acc[getMediaCategory(file)].push(file);
+            return acc;
+        },
+        {
+            Audio: [] as File[],
+            Documents: [] as File[],
+            Images: [] as File[],
+            Videos: [] as File[],
+            Others: [] as File[],
+        }
+    );
 </script>
 
 <div style="max-height: 300px; overflow-y: auto; padding: 0.5rem;">
@@ -35,4 +44,8 @@
         <h3 style="margin: 1rem 0rem;">Videos</h3>
         <PreviewVideo buttonTimes urlsOnly={false} {media}/>
     {/if}
+    {#if media.Others.length > 0}
+        <h3 style="margin: 1rem 0rem;">Other Files</h3>
+        <PreviewGenericFile buttonTimes urlsOnly={false} {media}/>
+    {/if}
 </div>

package/dist/components/Core/Menus/DropdownContainer/dropdown.svelte

@@ -49,10 +49,10 @@
     };
     if (browser) {
         onMount(() => {
-            document.addEventListener('click', handleDocumentClick);
+            document.addEventListener('pointerdown', handleDocumentClick, true);
         });
         onDestroy(() => {
-            document.removeEventListener('click', handleDocumentClick);
+            document.removeEventListener('pointerdown', handleDocumentClick, true);
         });
     }
 </script>

package/dist/components/Core/others/Previews/Audio/audio.svelte

@@ -42,7 +42,7 @@
 {:else} 
     <div style="display: flex; flex-wrap:wrap; gap: 1rem">
         {#each media.Audio as item (item.id || uuid())}
-            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer;">
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px;display: flex; gap: 0.5rem; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); border-radius: 0.3rem; cursor: pointer;">
                 <button aria-label="Play or pause audio" on:click|stopPropagation={() => togglePlay(item.id)}>
                     <i class="fa {audioPlaying[item.id] ? 'fa-pause' : 'fa-play'}" aria-hidden="true"></i>
                 </button>

package/dist/components/Core/others/Previews/Document/documents.svelte

@@ -3,13 +3,25 @@
     export let media;
     export let buttonTimes = false;
     export let urlsOnly = true;
+    const iconBaseUrl = 'https://files.michaelmachohi.com/svelte-scaffold/icons/';
+    const mimeTypeToIcon: Record<string, string> = {
+        'application/pdf': 'pdf.icon.png',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'word.icon.png',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'excel.icon.png',
+        'application/vnd.ms-excel': 'excel.icon.png',
+        'text/plain': 'txt.icon.png'
+    };
+    const getIconUrl = (mimeType: string) => {
+        return iconBaseUrl + (mimeTypeToIcon[mimeType] || 'generic.icon.png');
+    };
 </script>
 {#if media.Documents.length === 0}
     <p>No documents available.</p>
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Documents as item}
-            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 200px; padding: 0.5rem; box-shadow: var(--box-shadow-secondary); cursor: pointer;">
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 70px; cursor: pointer;">
+                <img src={getIconUrl(item.type || item.mime_type)} alt="Document Icon" style="height: 70px;"/>
                 {#if buttonTimes}
                     <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
                         $fileInputStore.selectedFiles.indexOf(item), e
@@ -18,7 +30,7 @@
                 {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
                     <ButtonSelect />
                 {/if}
-                <h3 class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+                <h3 class="sierra-text-wrap">{item.original_name || item.name}</h3>
             </div>
         {/each}
     </div>

package/dist/components/Core/others/Previews/GenericFile/genericFile.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import {ButtonTimes,ButtonSelect, fileInputStore, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
+    export let media;
+    export let buttonTimes = false;
+    export let urlsOnly = true;
+</script>
+{#if media.Others.length === 0}
+    <p>No other files available.</p>
+{:else}
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+        {#each media.Others as item}
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position: relative; width: 70px; cursor: pointer;">
+                <img src="https://files.michaelmachohi.com/svelte-scaffold/icons/generic.icon.png" alt="Generic File Icon" style="height: 70px;"/>
+                {#if buttonTimes}
+                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                        $fileInputStore.selectedFiles.indexOf(item), e
+                    )}/>
+                {/if}
+                {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
+                    <ButtonSelect />
+                {/if}
+                <h3 class="sierra-text-wrap">{item.original_name || item.name}</h3>
+            </div>
+        {/each}
+    </div>
+{/if}

package/dist/components/Core/others/Previews/GenericFile/genericFile.svelte.d.ts

@@ -0,0 +1,22 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const GenericFile: $$__sveltets_2_IsomorphicComponent<{
+    media: any;
+    buttonTimes?: boolean;
+    urlsOnly?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GenericFile = InstanceType<typeof GenericFile>;
+export default GenericFile;

package/dist/components/Core/others/Previews/Image/image.svelte

@@ -10,7 +10,7 @@
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Images as item}
-            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem;cursor: pointer;">
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem;cursor: pointer;">
                 <img src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} alt={item} style="width: 100%; height: 100px; object-fit: cover;border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;" />
                 <h3 style="margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
                 {#if buttonTimes}

package/dist/components/Core/others/Previews/Video/video.svelte

@@ -10,7 +10,7 @@
 {:else}
     <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Videos as item}
-            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer;">    
+            <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer;">    
                 <video on:click|stopPropagation src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} controls style="width: 100%; height: 100px; object-fit: cover; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;">
                     <track kind="captions" />
                 </video>

package/dist/components/Modules/Editor/Nodes/Images/images.svelte

@@ -20,7 +20,7 @@
 		fileInputStore.update(store => ({ 
 			...store, 
 			uploadType: ['image'],
-			disabledMenuItem: ['Music', 'Videos', 'Documents'],
+			disabledMenuItem: ['Music', 'Videos', 'Documents', 'Others'],
 			r2_key: $editorStore.r2_key,
 			serverGetUrl: $editorStore.serverGetUrl,
 			serverUploadUrl: $editorStore.serverUploadUrl,

package/dist/components/Modules/FilePicker/cloudStore.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { fileInputStore, User, isLoggedIn, setToastMessage, buttonRipple } from '../../../index.js';
+    import { fileInputStore, User, setToastMessage, buttonRipple, isMobile } from '../../../index.js';
     import Previews from './previews.svelte';
 
     export let processing: boolean;
-    const tabs: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'; icon: string }[] = [
+    const tabs: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'| 'Others'; icon: string }[] = [
         { name: 'Documents', icon: 'fa fa-file-o' },
         { name: 'Music', icon: 'fa fa-music' },
         { name: 'Pictures', icon: 'fa fa-file-image-o' },
-        { name: 'Videos', icon: 'fa fa-film' }
+        { name: 'Videos', icon: 'fa fa-film' },
+        { name: 'Others', icon: 'fa fa-folder-o' }
     ];
 
     $: if ($fileInputStore.disabledMenuItem?.includes($fileInputStore.activeMenu)) {
@@ -25,6 +26,7 @@
         Documents: MediaItem[];
         Images: MediaItem[];
         Videos: MediaItem[];
+        Others: MediaItem[];
     };
 
     let media: MediaResponse | null = null;
@@ -39,7 +41,6 @@
         try {
             processing = true;
             const params = new URLSearchParams({
-                isLoggedIn: String($isLoggedIn),
                 userId: $User.userId
             });
 
@@ -75,7 +76,7 @@
     }
 </style>
 <main id="sierra-cloud-store" style="display: flex; gap: 1rem; height: 100%; min-height: 300px;">
-    <nav style="display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
+    <nav style="display: flex; flex-direction: column; gap: {$isMobile ? '1rem' : '0.5rem'}; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
         {#each tabs as tab}
             <button 
                 use:buttonRipple
@@ -85,11 +86,14 @@
                         activeMenu: tab.name
                     }))
                 } 
-                style="width:100%; padding: 0.1rem 0.5rem; {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex;align-items: center; gap: 0.5rem;'}"
+                style="
+                    width:100%; padding: 0.1rem 0.5rem; 
+                    {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex;align-items: center; gap: 0.5rem;'}
+                "
                 class={`sierra-text-ellipsis ${$fileInputStore.activeMenu === tab.name ? 'icon-active' : ''}`}
             >
                 <i class={tab.icon} style="font-size: 10px; color: var(--icon-theme);"></i>
-                {tab.name}
+                {$isMobile ? '' : tab.name}
             </button>
         {/each}
     </nav>

package/dist/components/Modules/FilePicker/controls.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-    import {fileInputStore, LinearProgress, setToastMessage, modalStore, resetFileInputStore} from "../../../index.js";
+    import {fileInputStore, LinearProgress, setToastMessage, modalStore, resetFileInputStore, DropdownContainer, MenuItem, buttonRipple} from "../../../index.js";
     import { get } from 'svelte/store';
-    export let processing:boolean;
+    import FileProperties from "./file_properties.svelte";
+    
+    let {
+        processing,
+    } = $props();
 
     const menuItems = [
         {
@@ -21,7 +25,38 @@
             uploadModalOpen: false
         }));
     }
+
+    const iconSize = '15px';
+    let showProperties = $state(false);
+    let openActionsMenu = $state(false);
+    let disableActions = $state(true);
+    $effect(() => {
+        if($fileInputStore.submissions.length > 0 && $fileInputStore.activeTab === 'cloud'){
+            disableActions = false;
+        } else {
+            disableActions = true;
+        }
+    });
+
+    function handleDownload() {
+        const store = get(fileInputStore);
+        if (!store.submissions || store.submissions.length === 0) return;
+
+        store.submissions.forEach(item => {
+            downloadFile(item.url, item.id);
+        });
+    }
+    function downloadFile(url: string, filename?: string) {
+        const a = document.createElement('a');
+        a.href = url;
+        if (filename) a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+
     function handleDelete() {
+        openActionsMenu = false;
         modalStore.update(store => ({
             ...store,
             open: true,
@@ -60,9 +95,9 @@
                 return;
             }
 
-            data.forEach((item: { id: string; status: string; code: number }) => {
+            data.forEach((item: { id: string; code: number }) => {
                 if (item.code === 404) {
-                    setToastMessage('error', `Failed to delete file with ID: ${item.id} - ${item.status}`);
+                    setToastMessage('error', `Failed to delete file with ID: ${item.id}`);
                 }
             });
             processing = false;
@@ -99,24 +134,34 @@
         color: var(--background);
     }
 </style>
+
 <main id="file-picker-controls" style="display: flex; justify-content: space-between; gap:1rem;">
     <div class="file-picker-controls">
         <div style="display: flex; align-items: last baseline; gap:1rem;">
             {#each menuItems as item, index (item.id)}
                 <button
                     class={$fileInputStore.activeTab === item.id ? 'active' : ''}
-                    on:click={() => {fileInputStore.update(store => ({ ...store, activeTab: item.id }))}}
+                    onclick={() => {fileInputStore.update(store => ({ ...store, activeTab: item.id }))}}
                 ><span>{item.label}</span>
                 </button>
             {/each}
-        </div> 
-        <div style="display: flex; gap: 2rem; align-items: last baseline;">
-            {#if $fileInputStore.submissions.length > 0 && $fileInputStore.activeTab === 'cloud'}
-                <button hidden={!$fileInputStore.manage} title="Delete" on:click={handleDelete} style="color: var(--error-bg);" aria-label="Delete submissions"><i class="fa fa-trash-o"></i></button>
-                <button hidden={$fileInputStore.manage} title="Select" on:click={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
-            {/if}
-            <button title="Cancel" on:click={resetFileInputStore} aria-label="Cancel"><i class="fa fa-times-circle"></i></button>
+        </div>
+        <div style="display: flex; gap: 1rem; align-items: last baseline;">
+            <button hidden={$fileInputStore.manage || disableActions} title="Select" onclick={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
+            {#snippet TriggerMenu()}
+                <button disabled={disableActions} use:buttonRipple class="w-10" aria-label="Ellipsis" onclick={() => (openActionsMenu = !openActionsMenu)}>
+                    <i class="fa fa-bars"></i>
+                </button>
+            {/snippet} 
+            <DropdownContainer bind:open={openActionsMenu} dropdownTrigger={TriggerMenu}>
+                <MenuItem onclick={() => { showProperties = true; openActionsMenu = false; }} icon="fa-info-circle" iconBg="var(--text)" iconSize={iconSize}>Properties</MenuItem>
+                <MenuItem onclick={handleDownload} icon="fa-download" iconBg="var(--text)" iconSize={iconSize}>Download</MenuItem>
+                <MenuItem onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize={iconSize}>Delete</MenuItem>
+            </DropdownContainer>
+            <button title="Cancel" onclick={resetFileInputStore} aria-label="Cancel"><i class="fa fa-times-circle"></i></button>
         </div>
     </div>
 </main>
-{#if processing}<LinearProgress />{/if}
+{#if processing}<LinearProgress />{/if}
+
+<FileProperties bind:showProperties />

package/dist/components/Modules/FilePicker/controls.svelte.d.ts

@@ -1,20 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Controls: $$__sveltets_2_IsomorphicComponent<{
-    processing: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Controls = InstanceType<typeof Controls>;
+declare const Controls: import("svelte").Component<{
+    processing: any;
+}, {}, "">;
+type Controls = ReturnType<typeof Controls>;
 export default Controls;

package/dist/components/Modules/FilePicker/filePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {Backdrop,Wrapper,fileInputStore, FileInput, isLoggedIn, User, setToastMessage} from '../../../index.js'
+    import {Backdrop,Wrapper,fileInputStore, FileInput, User, setToastMessage} from '../../../index.js'
     import CloudStore from './cloudStore.svelte';
     import Controls from './controls.svelte';
 
@@ -14,7 +14,6 @@
 
             $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
             formData.append('r2_key', $fileInputStore.r2_key);
-            formData.append('is_loggedin', $isLoggedIn.toString());
             formData.append('userid', $User.userId);
 
             const res = await fetch($fileInputStore.serverUploadUrl, {
@@ -29,9 +28,9 @@
                 return;
             }
 
-            data.forEach((item: { code: number; original_name: string }) => {
+            data.forEach((item: { original_name: string; code: number; }) => {
                 if (item.code === 500) {
-                    setToastMessage('error', `Failed to upload file: ${item.original_name} (code: ${item.code})`);
+                    setToastMessage('error', `Failed to upload file: ${item.original_name}`);
                 }
             });
 

package/dist/components/Modules/FilePicker/file_properties.svelte

@@ -0,0 +1,33 @@
+<script>
+    import {Wrapper, Backdrop, fileInputStore} from "../../../index.js";
+    let {
+        showProperties = $bindable(),
+    } = $props();
+
+</script>
+<style>
+    #file-picker-file-properties h3, span{
+        font-size: 14px;
+    }
+    #file-picker-file-properties span{
+        color: var(--text-secondary);
+    }
+</style>
+<Backdrop bind:open={showProperties}>
+    <Wrapper>
+        <div style="display: flex; justify-content: space-between">
+            <h3>Properties</h3>
+            <button title="Cancel" onclick={() => showProperties = false} aria-label="Cancel"><i class="fa fa-times-circle"></i></button>
+        </div>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; max-height: 70vh; overflow-y: auto;">
+            {#each $fileInputStore.submissions as item (item.id)}
+                <div id="file-picker-file-properties">
+                    <h3>Name: <span>{item.original_name || 'Unnamed file'}</span></h3>
+                    <h3>Type: <span>{item?.mime_type}</span></h3>                    
+                    <h3>Size: <span>{item?.size_bytes}</span> bytes</h3>
+                    <h3>Created: <span>{item?.created_at ? new Date(item.created_at).toLocaleString() : ''}</span></h3>  
+                </div>
+            {/each}
+        </div>
+    </Wrapper>
+</Backdrop>

package/dist/components/Modules/FilePicker/file_properties.svelte.d.ts

@@ -0,0 +1,11 @@
+export default FileProperties;
+type FileProperties = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const FileProperties: import("svelte").Component<{
+    showProperties?: any;
+}, {}, "showProperties">;
+type $$ComponentProps = {
+    showProperties?: any;
+};

package/dist/components/Modules/FilePicker/previews.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, fileInputStore} from '../../../index.js';
+    import {PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, fileInputStore, PreviewGenericFile} from '../../../index.js';
     
     export let media;
 </script>
@@ -14,6 +14,10 @@
             <PreviewImage {media} />
         {:else if $fileInputStore.activeMenu === 'Videos'}
             <PreviewVideo {media} />
+        {:else if $fileInputStore.activeMenu === 'Others'}
+            <PreviewGenericFile {media} />
         {/if}
+    {:else}
+        <p>No media available.</p>
     {/if}
 </div>

package/dist/components/Modules/Layout/main.svelte

@@ -1,7 +1,7 @@
 <script>
 	import './main.css';
     import { onMount } from 'svelte';
-	import {LinearProgress, isLoading, isMobile, Modal, Toast, theme,FilePicker, User, isLoggedIn} from '../../../index.js'
+	import {LinearProgress, isLoading, isMobile, Modal, Toast, theme,FilePicker} from '../../../index.js'
 	import Header from './Header/header.svelte';
 	import Menu from './Menu/menu.svelte';
 	import Background from './background.svelte';
@@ -50,18 +50,6 @@
 				localStorage.setItem('theme', 'dark');
 				document.body.setAttribute('data-theme', 'dark');
 			}
-
-			const anonId = localStorage.getItem('anonymous_id');
-			if(!$isLoggedIn){
-				if (!anonId) {
-					const newId = crypto.randomUUID();
-					localStorage.setItem('anonymous_id', newId);
-					User.update(user => ({ ...user, userId: newId }));
-				}else if(anonId) {
-					User.update(user => ({ ...user, userId: anonId }) );
-					//console.log("Updated User store with user id:", $User);
-				}
-			}
 		}
 	});
 

package/dist/global.css

@@ -173,6 +173,11 @@ button{
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.sierra-text-wrap {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
 
 .sierra-translate {
     display: inline-block;      

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as PreviewAudio } from './components/Core/others/Previews/Audio
 export { default as PreviewImage } from './components/Core/others/Previews/Image/image.svelte';
 export { default as PreviewVideo } from './components/Core/others/Previews/Video/video.svelte';
 export { default as PreviewDocument } from './components/Core/others/Previews/Document/documents.svelte';
+export { default as PreviewGenericFile } from './components/Core/others/Previews/GenericFile/genericFile.svelte';
 export { default as Modal } from './components/Core/Alerts/Modal/modal.svelte';
 export { default as Backdrop } from './components/Core/Alerts/Backdrop/backdrop.svelte';
 export { default as Wrapper } from './components/Core/Alerts/Wrapper/wrapper.svelte';
@@ -37,7 +38,8 @@ export { User, resetUserStore } from './stores/core/user.js';
 export { modalStore, resetModalStore } from './stores/core/modal.js';
 export { editorStore, resetEditorStore } from './stores/modules/editor.js';
 export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
+export type { FileInputStoreMediaItem } from './stores/modules/fileInput.js';
 export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
-export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia } from './Hooks/preview.js';
+export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';
 export { buttonRipple } from './Hooks/button.js';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as PreviewAudio } from './components/Core/others/Previews/Audio
 export { default as PreviewImage } from './components/Core/others/Previews/Image/image.svelte';
 export { default as PreviewVideo } from './components/Core/others/Previews/Video/video.svelte';
 export { default as PreviewDocument } from './components/Core/others/Previews/Document/documents.svelte';
+export { default as PreviewGenericFile } from './components/Core/others/Previews/GenericFile/genericFile.svelte';
 //Alerts
 export { default as Modal } from './components/Core/Alerts/Modal/modal.svelte';
 export { default as Backdrop } from './components/Core/Alerts/Backdrop/backdrop.svelte';
@@ -51,6 +52,6 @@ export { editorStore, resetEditorStore } from './stores/modules/editor.js';
 export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
 export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
 //#######################HOOKS/UTILS########################
-export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia } from './Hooks/preview.js';
+export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES } from './Hooks/preview.js';
 export { validateLayoutMenuSections } from './Hooks/layout_menu.js';
 export { buttonRipple } from './Hooks/button.js';

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

@@ -1,16 +1,23 @@
+export type FileInputStoreMediaItem = {
+    id: string;
+    user_id?: string;
+    r2_key: string;
+    url: string;
+    created_at?: string;
+    original_name?: string;
+    mime_type?: string;
+    size_bytes?: number;
+};
 export type FileInputState = {
     uploadModalOpen: boolean;
     selectedFiles: File[];
     sizeConstraint: number;
-    uploadType: Array<'image' | 'audio' | 'video' | 'pdf'>;
+    uploadType: Array<'image' | 'audio' | 'video' | 'documents' | 'others'>;
     activeTab: 'cloud' | 'upload';
-    activeMenu: 'Documents' | 'Music' | 'Pictures' | 'Videos';
-    disabledMenuItem: Array<'Music' | 'Documents' | 'Pictures' | 'Videos'> | null;
+    activeMenu: 'Documents' | 'Music' | 'Pictures' | 'Videos' | 'Others';
+    disabledMenuItem: Array<'Music' | 'Documents' | 'Pictures' | 'Videos' | 'Others'> | null;
     manage: boolean;
-    submissions: {
-        id: string;
-        url: string;
-    }[];
+    submissions: FileInputStoreMediaItem[];
     submissionComplete: boolean;
     r2_key: string;
     serverGetUrl: string;

package/dist/stores/modules/fileInput.js

@@ -3,10 +3,10 @@ const defaultFileInputState = {
     uploadModalOpen: false,
     selectedFiles: [],
     sizeConstraint: 10 * 1024 * 1024,
-    uploadType: ['image', 'audio', 'video', 'pdf'],
+    uploadType: ['image', 'audio', 'video', 'documents', 'others'],
     // FilePicker
     activeTab: 'cloud',
-    activeMenu: 'Pictures',
+    activeMenu: 'Documents',
     disabledMenuItem: null,
     manage: false,
     submissions: [],

package/package.json

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