fix: max size alert

src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte

@@ -1,47 +1,43 @@
 <script lang="ts">
     import { Alert, CustomId } from '$lib/components';
-    import { BillingPlan } from '$lib/constants';
     import { Pill } from '$lib/elements';
-    import { Button, FormList, InputFile } from '$lib/elements/forms';
+    import { FormList, InputFile } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
     import WizardStep from '$lib/layout/wizardStep.svelte';
-    import { getServiceLimit, tierToPlan } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
+    import { getServiceLimit } from '$lib/stores/billing';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { bucket } from '../store';
     import { createFile } from './store';
 
     let showCustomId = false;
+    let showFileSizeWarning = false;
     const service = getServiceLimit('fileSize');
+
+    async function checkFileSize() {
+        if (!$createFile?.files?.length) return;
+        const file = $createFile.files?.length ? Array.from($createFile.files)[0] : null;
+
+        if (file.size > $bucket.maximumFileSize) {
+            showFileSizeWarning = true;
+            $wizard.interceptorNotificationEnabled = false;
+            throw new Error('File size exceeds the maximum file size limit');
+        }
+    }
 </script>
 
-<WizardStep>
+<WizardStep beforeSubmit={checkFileSize}>
     <svelte:fragment slot="title">Create file</svelte:fragment>
     <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
 
-    {#if isCloud}
+    {#if isCloud && showFileSizeWarning}
         {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
-        {@const plan = tierToPlan($organization?.billingPlan)}
         <Alert type="info">
             <p class="text">
-                The {plan.name} plan has a maximum upload file size limit of {Math.floor(
+                The maximum file upload size for this bucket is {Math.floor(
                     parseInt(size.value)
-                )}{size.unit}.
-                {#if $organization?.billingPlan === BillingPlan.STARTER}
-                    Upgrade to allow files of a larger size.
-                {/if}
+                )}{size.unit}. Edit this number in your bucket settings.
             </p>
-            <svelte:fragment slot="action">
-                {#if $organization?.billingPlan === BillingPlan.STARTER}
-                    <div class="alert-buttons u-flex">
-                        <Button text on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
-                            Upgrade plan
-                        </Button>
-                    </div>
-                {/if}
-            </svelte:fragment>
         </Alert>
     {/if}
 

src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-    import { Button, FormList, InputFile } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
-    import { Modal, CustomId, Heading, Alert } from '$lib/components';
-    import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
-    import { uploader } from '$lib/stores/uploader';
-    import { bucket } from './store';
-    import { Permissions } from '$lib/components/permissions';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { ID } from '@appwrite.io/console';
-
-    export let showCreate = false;
-
-    const bucketId = $page.params.bucket;
-    const dispatch = createEventDispatcher();
-
-    let files: FileList;
-    let permissions: string[] = [];
-    let id: string = null;
-    let error: string;
-    let showCustomId = false;
-
-    async function create() {
-        try {
-            showCreate = false;
-            await uploader.uploadFile(bucketId, id ?? ID.unique(), files[0], permissions);
-            files = null;
-            showCustomId = false;
-            dispatch('created');
-            addNotification({
-                type: 'success',
-                message: `File has been uploaded`
-            });
-            trackEvent(Submit.FileCreate, {
-                customId: !!id
-            });
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.FileCreate);
-        }
-    }
-
-    $: if (!showCreate) {
-        id = files = error = null;
-        permissions = [];
-    }
-</script>
-
-<Modal title="Create file" size="big" {error} bind:show={showCreate} onSubmit={create}>
-    <FormList>
-        <div>
-            <InputFile
-                bind:files
-                allowedFileExtensions={$bucket.allowedFileExtensions}
-                maxSize={$bucket.maximumFileSize} />
-        </div>
-
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        File ID
-                    </span>
-                </Pill>
-            </div>
-        {:else}
-            <CustomId bind:show={showCustomId} name="File" bind:id />
-        {/if}
-        <Heading tag="h6" size="7">Permissions</Heading>
-        <p class="text">
-            Choose who can access your buckets and files. For more information, visit our
-            <a
-                href="https://appwrite.io/docs/advanced/platform/permissions"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                Permissions guide
-            </a>.
-        </p>
-        {#if $bucket.fileSecurity}
-            <div class="common-section">
-                <Alert type="info">
-                    <svelte:fragment slot="title">File security enabled</svelte:fragment>
-                    Users will be able to access this file if they have been granted
-                    <b>either File or Bucket permissions</b>.
-                </Alert>
-            </div>
-            <div class="common-section">
-                <Permissions bind:permissions />
-            </div>
-        {:else}
-            <Alert type="info">
-                <svelte:fragment slot="title">File security disabled</svelte:fragment>
-                If you want to assign file permissions, navigate to Bucket settings and enable file security.
-                Otherwise, only Bucket permissions will be used.
-            </Alert>
-        {/if}
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        <Button submit>Create</Button>
-    </svelte:fragment>
-</Modal>