Merge pull request #2679 from appwrite/fix-SER-468-file-upload-for-push-notifications

src/lib/components/filePicker.svelte

@@ -33,6 +33,7 @@
     import { IconInfo, IconPlus, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
     import { showCreateBucket } from '$routes/(console)/project-[region]-[project]/storage/+page.svelte';
     import { preferences } from '$lib/stores/preferences';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
@@ -110,7 +111,10 @@
             }
             selectFile(file);
         } catch (e) {
-            console.error(e);
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
         } finally {
             uploading = false;
         }
@@ -351,7 +355,9 @@
                     <Layout.Stack gap="l">
                         <Typography.Title size="s" color="--fgcolor-neutral-primary"
                             >{localFileBucketTitle}</Typography.Title>
-                        <Upload.Dropzone bind:files={localFile} extensions={[allowedExtension]}>
+                        <Upload.Dropzone
+                            bind:files={localFile}
+                            extensions={allowedExtension === '*' ? undefined : [allowedExtension]}>
                             <Layout.Stack alignItems="center" gap="s">
                                 <Layout.Stack alignItems="center" gap="s">
                                     <Layout.Stack
@@ -370,7 +376,9 @@
                                                 <Icon icon={IconInfo} size="s" />
                                             </Layout.Stack>
                                             <svelte:fragment slot="tooltip"
-                                                >{allowedExtension} files are allowed</svelte:fragment>
+                                                >{allowedExtension === '*'
+                                                    ? `${mimeTypeQuery} files are allowed`
+                                                    : `${allowedExtension} files are allowed`}</svelte:fragment>
                                         </Tooltip>
                                     </Layout.Stack>
                                     <Typography.Caption variant="400"

src/lib/elements/forms/inputFilePicker.svelte

@@ -12,6 +12,8 @@
     export let optionalText: string = null;
     export let tooltip: string = null;
     export let isPopoverDefined = true;
+    export let mimeTypeQuery: string = 'image/';
+    export let allowedExtension: string = '*';
 
     let show = false;
 
@@ -93,5 +95,12 @@
 </div>
 
 {#if show}
-    <FilePicker selectedFile={value?.$id} selectedBucket={value?.bucketId} bind:show {onSelect} />
+    <FilePicker
+        selectedFile={value?.$id}
+        selectedBucket={value?.bucketId}
+        bind:show
+        {onSelect}
+        showLocalFileBucket
+        {mimeTypeQuery}
+        {allowedExtension} />
 {/if}