Fix 7353: Can't close execute function modal

src/lib/elements/forms/inputFile.svelte

@@ -20,17 +20,6 @@
     function setFiles(value: FileList) {
         if (!value) return;
 
-        const hasInvalidExt = Array.from(value).some((file) => {
-            const fileExtension = file.name.split('.').pop();
-            return allowedFileExtensions?.length
-                ? !allowedFileExtensions.includes(fileExtension)
-                : false;
-        });
-        if (hasInvalidExt) {
-            error = 'Invalid file extension';
-            return;
-        }
-
         files = value;
         input.files = value;
     }
@@ -78,6 +67,20 @@
 
     const handleChange = (event: Event) => {
         const target = event.currentTarget as HTMLInputElement;
+
+        const isValidFiles = Array.from(target.files).every((file) => {
+            const fileExtension = file.name.split('.').pop();
+            return allowedFileExtensions?.length
+                ? allowedFileExtensions.includes(fileExtension)
+                : true;
+        });
+
+        if (!isValidFiles) {
+            error = 'Invalid file extension';
+            target.value = '';
+            return;
+        }
+
         setFiles(target.files);
     };
 </script>

src/routes/console/project-[project]/functions/function-[function]/+page.svelte

@@ -25,7 +25,7 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { deploymentList, execute, func, proxyRuleList } from './store';
+    import { deploymentList, execute, func, proxyRuleList, showFunctionExecute } from './store';
     import { Container, ContainerHeader } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { calculateSize, humanFileSize } from '$lib/helpers/sizeConvertion';
@@ -151,7 +151,10 @@
 
                         <Button
                             secondary
-                            on:click={() => ($execute = $func)}
+                            on:click={() => {
+                                $execute = $func;
+                                $showFunctionExecute = true;
+                            }}
                             disabled={isCloud && $readOnly && !GRACE_PERIOD_OVERRIDE}>
                             Execute now
                         </Button>

src/routes/console/project-[project]/functions/function-[function]/execute.svelte

@@ -16,6 +16,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
+    import { showFunctionExecute } from './store';
 
     export let selectedFunction: Models.Function = null;
 
@@ -34,13 +35,8 @@
         { label: 'OPTIONS', value: 'OPTIONS' }
     ];
 
-    let show = false;
     let submitting = false;
 
-    $: if (selectedFunction && !show) {
-        show = true;
-    }
-
     const handleSubmit = async () => {
         submitting = true;
         try {
@@ -80,7 +76,7 @@
 
     function close() {
         selectedFunction = null;
-        show = false;
+        $showFunctionExecute = false;
     }
 
     afterNavigate(close);
@@ -89,10 +85,9 @@
 <Modal
     title="Execute function"
     headerDivider={false}
-    bind:show
+    bind:show={$showFunctionExecute}
     size="big"
     onSubmit={handleSubmit}
-    on:close={close}
     bind:error>
     <p class="text">
         Manually execute your function. <a

src/routes/console/project-[project]/functions/function-[function]/executions/+page.svelte

@@ -19,7 +19,7 @@
     import { log } from '$lib/stores/logs';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { func } from '../store';
+    import { func, showFunctionExecute } from '../store';
     import type { Models } from '@appwrite.io/console';
     import { organization } from '$lib/stores/organization';
     import { getServiceLimit, showUsageRatesModal } from '$lib/stores/billing';
@@ -54,7 +54,10 @@
         title="Executions"
         buttonText="Execute now"
         buttonEvent="execute_function"
-        buttonMethod={() => (selectedFunction = $func)}>
+        buttonMethod={() => {
+            selectedFunction = $func;
+            $showFunctionExecute = true;
+        }}>
         <svelte:fragment slot="tooltip" let:tier let:limit let:upgradeMethod>
             <p class="u-bold">The {tier} plan has limits</p>
             <ul>

src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte

@@ -2,7 +2,7 @@
     import { CardGrid, Heading, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { execute, func } from '../store';
+    import { execute, func, showFunctionExecute } from '../store';
 </script>
 
 <CardGrid>
@@ -26,6 +26,11 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button secondary on:click={() => ($execute = $func)}>Execute now</Button>
+        <Button
+            secondary
+            on:click={() => {
+                $execute = $func;
+                $showFunctionExecute = true;
+            }}>Execute now</Button>
     </svelte:fragment>
 </CardGrid>

src/routes/console/project-[project]/functions/function-[function]/store.ts

@@ -12,6 +12,8 @@ export const proxyRuleList = derived(
     ($page) => $page.data.proxyRuleList as Models.ProxyRuleList
 );
 export const execute: Writable<Models.Function> = writable();
+export const showFunctionExecute: Writable<boolean> = writable(false);
+
 export const repositories: Writable<{
     search: string;
     installationId: string;