Merge pull request #1869 from appwrite/feat-show-invalid-upload-error

feat: display error on invalid upload

package.json

@@ -27,7 +27,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5aca249",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@67c988c",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

pnpm-lock.yaml

@@ -27,8 +27,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5aca249
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5aca249(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@67c988c
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@67c988c(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -263,8 +263,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5aca24915ff47f6af3f1664a10ebdceab8d105f4':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5aca24915ff47f6af3f1664a10ebdceab8d105f4}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@67c988c04de3464a9c39630fd798e2316d157fea':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@67c988c04de3464a9c39630fd798e2316d157fea}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -278,8 +278,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5aca249':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5aca249}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@67c988c':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@67c988c}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3621,7 +3621,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5aca24915ff47f6af3f1664a10ebdceab8d105f4(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@67c988c04de3464a9c39630fd798e2316d157fea(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3634,9 +3634,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5aca249(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@67c988c(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5aca24915ff47f6af3f1664a10ebdceab8d105f4(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@67c988c04de3464a9c39630fd798e2316d157fea(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)

src/lib/helpers/files.ts

@@ -92,6 +92,11 @@ export function removeFile(file: File, files: FileList) {
     return dataTransfer.files;
 }
 
+export enum InvalidFileType {
+    SIZE = 'invalid_size',
+    EXTENSION = 'invalid_extension'
+}
+
 export const defaultIgnore = `
 ### Node ###
 # Logs

src/routes/(console)/organization-[organization]/domains/domain-[domain]/importRecordModal.svelte

@@ -5,7 +5,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
     import { page } from '$app/state';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -36,6 +36,17 @@
         }
     }
 
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+        if (reason === InvalidFileType.EXTENSION) {
+            error = 'Only .txt files allowed';
+        } else if (reason === InvalidFileType.SIZE) {
+            error = 'File size exceeds 5MB';
+        } else {
+            error = 'Invalid file';
+        }
+    }
+
     $: filesList = files?.length
         ? Array.from(files).map((f) => {
               return {
@@ -61,7 +72,12 @@
             <Typography.Text color="--fgcolor-neutral-primary">
                 Upload a .txt file with your DNS records
             </Typography.Text>
-            <Upload.Dropzone bind:files extensions={['txt']}>
+            <Upload.Dropzone
+                bind:files
+                extensions={['txt']}
+                maxSize={5000000}
+                required
+                on:invalid={handleInvalid}>
                 <Layout.Stack alignItems="center" gap="s">
                     <Layout.Stack alignItems="center" gap="s">
                         <Layout.Stack
@@ -80,7 +96,7 @@
                                     >Only .txt files allowed</svelte:fragment>
                             </Tooltip>
                         </Layout.Stack>
-                        <Typography.Caption variant="400">Max file size 10MB</Typography.Caption>
+                        <Typography.Caption variant="400">Max file size 5MB</Typography.Caption>
                     </Layout.Stack>
                 </Layout.Stack>
             </Upload.Dropzone>

src/routes/(console)/project-[region]-[project]/functions/create-function/manual/+page.svelte

@@ -19,7 +19,7 @@
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import Configuration from './configuration.svelte';
     import { getIconFromRuntime } from '$lib/stores/runtimes';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
 
     export let data;
 
@@ -122,6 +122,26 @@
         }
     }
 
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+        if (reason === InvalidFileType.EXTENSION) {
+            addNotification({
+                type: 'error',
+                message: 'Only .tar.gz files allowed'
+            });
+        } else if (reason === InvalidFileType.SIZE) {
+            addNotification({
+                type: 'error',
+                message: 'File size exceeds 10MB'
+            });
+        } else {
+            addNotification({
+                type: 'error',
+                message: 'Invalid file'
+            });
+        }
+    }
+
     $: filesList = files?.length
         ? Array.from(files).map((f) => {
               return {
@@ -157,7 +177,8 @@
                     title="Upload function"
                     extensions={['gz', 'tar']}
                     maxSize={10000000}
-                    required>
+                    required
+                    on:invalid={handleInvalid}>
                     <Layout.Stack alignItems="center" gap="s">
                         <Layout.Stack alignItems="center" gap="s">
                             <Layout.Stack

src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createManual.svelte

@@ -4,7 +4,7 @@
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
@@ -36,6 +36,17 @@
         }
     }
 
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+        if (reason === InvalidFileType.EXTENSION) {
+            error = 'Only .tar.gz files allowed';
+        } else if (reason === InvalidFileType.SIZE) {
+            error = 'File size exceeds 10MB';
+        } else {
+            error = 'Invalid file';
+        }
+    }
+
     $: filesList = files?.length
         ? Array.from(files).map((f) => {
               return {
@@ -55,7 +66,12 @@
         <Typography.Text color="--fgcolor-neutral-primary">
             Upload a tar.gz file containing your function source code
         </Typography.Text>
-        <Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
+        <Upload.Dropzone
+            extensions={['gz', 'tar']}
+            bind:files
+            maxSize={10000000}
+            required
+            on:invalid={handleInvalid}>
             <Layout.Stack alignItems="center" gap="s">
                 <Layout.Stack alignItems="center" gap="s">
                     <Layout.Stack

src/routes/(console)/project-[region]-[project]/messaging/providers/settingsFormInput.svelte

@@ -26,7 +26,8 @@
     import TooltipPopover from './tooltipPopover.svelte';
     import { Icon, Tooltip, Upload, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
+    import { addNotification } from '$lib/stores/notifications';
 
     export let files: Record<string, FileList>;
 
@@ -55,6 +56,22 @@
             image: input.popoverImage
         };
     }
+
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+
+        if (reason === InvalidFileType.EXTENSION) {
+            addNotification({
+                type: 'error',
+                message: 'Only .json files allowed'
+            });
+        } else {
+            addNotification({
+                type: 'error',
+                message: 'Invalid file'
+            });
+        }
+    }
 </script>
 
 {#if input.type === 'text'}
@@ -104,6 +121,7 @@
     </InputPhone>
 {:else if input.type === 'file'}
     <Upload.Dropzone
+        on:invalid={handleInvalid}
         extensions={['json']}
         bind:files={files[input.name]}
         required={!input.optional}>

src/routes/(console)/project-[region]-[project]/sites/create-site/manual/+page.svelte

@@ -19,7 +19,7 @@
     import { organization } from '$lib/stores/organization';
     import { consoleVariables } from '$routes/(console)/store';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
 
     export let data;
     let showExitModal = false;
@@ -116,6 +116,26 @@
         }
     }
 
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+        if (reason === InvalidFileType.EXTENSION) {
+            addNotification({
+                type: 'error',
+                message: 'Only .tar.gz files allowed'
+            });
+        } else if (reason === InvalidFileType.SIZE) {
+            addNotification({
+                type: 'error',
+                message: 'File size exceeds 10MB'
+            });
+        } else {
+            addNotification({
+                type: 'error',
+                message: 'Invalid file'
+            });
+        }
+    }
+
     $: filesList = files?.length
         ? Array.from(files).map((f) => {
               return {
@@ -144,7 +164,12 @@
                 <Typography.Text color="--fgcolor-neutral-primary">
                     Upload a tar.gz containing your site source code
                 </Typography.Text>
-                <Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
+                <Upload.Dropzone
+                    extensions={['gz', 'tar']}
+                    bind:files
+                    maxSize={10000000}
+                    required
+                    on:invalid={handleInvalid}>
                     <Layout.Stack alignItems="center" gap="s">
                         <Layout.Stack alignItems="center" gap="s">
                             <Layout.Stack

src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte

@@ -3,7 +3,7 @@
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
     import { addNotification } from '$lib/stores/notifications';
     import { uploader } from '$lib/stores/uploader';
     import type { Models } from '@appwrite.io/console';
@@ -25,11 +25,19 @@
                 message: 'Deployment upload started',
                 type: 'success'
             });
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
+        } catch (e) {
+            error = e.message;
+        }
+    }
+
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+        if (reason === InvalidFileType.EXTENSION) {
+            error = 'Only .tar.gz files allowed';
+        } else if (reason === InvalidFileType.SIZE) {
+            error = 'File size exceeds 10MB';
+        } else {
+            error = 'Invalid file';
         }
     }
 
@@ -52,7 +60,12 @@
         <Typography.Text color="--fgcolor-neutral-primary">
             Upload a tar.gz file containing your site source code
         </Typography.Text>
-        <Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
+        <Upload.Dropzone
+            extensions={['gz', 'tar']}
+            bind:files
+            maxSize={10000000}
+            required
+            on:invalid={handleInvalid}>
             <Layout.Stack alignItems="center" gap="s">
                 <Layout.Stack alignItems="center" gap="s">
                     <Layout.Stack

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/create/+page.svelte

@@ -27,7 +27,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { removeFile } from '$lib/helpers/files';
+    import { InvalidFileType, removeFile } from '$lib/helpers/files';
 
     export let data: PageData;
 
@@ -74,6 +74,21 @@
             trackError(e, Submit.FileCreate);
         }
     }
+
+    function handleInvalid(e: CustomEvent) {
+        const reason = e.detail.reason;
+        if (reason === InvalidFileType.EXTENSION) {
+            addNotification({
+                type: 'error',
+                message: `Only ${data.bucket.allowedFileExtensions.join(', ')} files allowed`
+            });
+        } else {
+            addNotification({
+                type: 'error',
+                message: 'Invalid file'
+            });
+        }
+    }
 </script>
 
 <Wizard
@@ -103,7 +118,8 @@
                     <Upload.Dropzone
                         bind:files
                         required
-                        extensions={data.bucket.allowedFileExtensions}>
+                        extensions={data.bucket.allowedFileExtensions}
+                        on:invalid={handleInvalid}>
                         <Typography.Text variant="l-500"
                             >Drag and drop files here or click to upload</Typography.Text>
                     </Upload.Dropzone>