diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
index 4bed65b6e..0305631e4 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/settings/+page.svelte
@@ -5,6 +5,7 @@
         Button,
         InputNumber,
         InputSelect,
+        InputText,
         InputCron,
         Form,
         FormList
@@ -22,6 +23,7 @@
     import Upload from './uploadVariables.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { variableList } from '../../../store';
+    import { breadcrumbs, title } from '$lib/stores/layout';
 
     const functionId = $page.params.function;
     let showDelete = false;
@@ -32,6 +34,7 @@
     let showVariablesDropdown = [];
     let timeout = 0;
     let deployment: Models.Deployment = null;
+    let functionName: string = null;
 
     onMount(async () => {
         if ($func?.$id !== functionId) {
@@ -39,7 +42,8 @@
         }
         await variableList.load(functionId);
         deployment = await func.getDeployment(functionId, $func.deployment);
-        timeout = $func.timeout;
+        timeout ??= $func.timeout;
+        functionName ??= $func.name;
     });
 
     let options = [
@@ -47,6 +51,26 @@
         { label: 'minutes', value: 'minutes' }
     ];
 
+    async function updateName() {
+        try {
+            await sdkForProject.functions.update(functionId, functionName, $func.execute);
+            $func.name = functionName;
+            title.set(functionName);
+            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
+            breadcrumb.title = functionName;
+            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
     async function updateTimeout() {
         try {
             await sdkForProject.functions.update(
@@ -184,6 +208,28 @@
         </svelte:fragment>
     </CardGrid>
 
+    <Form on:submit={updateName}>
+        <CardGrid>
+            <h6 class="heading-level-7">Update Name</h6>
+
+            <svelte:fragment slot="aside">
+                <ul>
+                    <InputText
+                        id="name"
+                        label="Name"
+                        placeholder="Enter name"
+                        autocomplete={false}
+                        bind:value={functionName} />
+                </ul>
+            </svelte:fragment>
+
+            <svelte:fragment slot="actions">
+                <Button disabled={functionName === $func.name || !functionName} submit
+                    >Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+    </Form>
+
     <Form on:submit={() => console.log($func.schedule)}>
         <CardGrid>
             <h2 class="heading-level-6">Update CRON Schedule</h2>
diff --git a/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
index 5c67f84e4..1e4502f2e 100644
--- a/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte
@@ -9,7 +9,8 @@
 
     let list = new DataTransfer();
     let files: FileList;
-    let variables: object = null;
+    let input: HTMLInputElement;
+    let variables: object = {};
 
     const handleSubmit = async () => {
         dispatch('uploaded', variables);
@@ -18,7 +19,9 @@
     function dropHandler(ev: DragEvent) {
         ev.preventDefault();
         if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
             for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+                // If dropped items aren't files, reject them
                 if (ev.dataTransfer.items[i].kind === 'file') {
                     list.items.clear();
                     list.items.add(ev.dataTransfer.items[i].getAsFile());
@@ -31,8 +34,26 @@
     function dragOverHandler(ev: DragEvent) {
         ev.preventDefault();
     }
+
+    async function parseFile(file: File) {
+        if (file) {
+            let text = await file.text();
+
+            text.split('\n').forEach((line) => {
+                const [key, value] = line.split('=');
+                variables[key] = value;
+            });
+
+            return variables;
+        }
+    }
+
+    $: console.log(parseFile(files?.length ? files[0] : null));
+    $: console.log(variables);
 </script>
 
+<input bind:files bind:this={input} type="file" style="display: none" />
+
 <Form single on:submit={handleSubmit}>
     <Modal bind:show>
         <svelte:fragment slot="header">Upload Variables</svelte:fragment>
@@ -44,8 +65,8 @@
         <p class="text">Attach a file</p>
         <div
             class="card is-border-dashed is-no-shadow"
-            on:drop|preventDefault={(e) => dropHandler(e)}
-            on:dragover|preventDefault={(e) => dragOverHandler(e)}>
+            on:drop|preventDefault={dropHandler}
+            on:dragover|preventDefault={dragOverHandler}>
             <div class="u-flex u-main-center u-cross-center u-gap-32">
                 <div class="avatar is-size-large">
                     <span class="icon-upload" aria-hidden="true" />
@@ -53,11 +74,7 @@
                 <div class="u-grid u-gap-16">
                     <p>Drag and drop files here to upload</p>
                     <div>
-                        <Button
-                            secondary
-                            on:click={() => {
-                                document.getElementById('file').click();
-                            }}>
+                        <Button secondary on:click={() => input.click()}>
                             <span class="icon-upload" aria-hidden="true" />
                             <span class="text">Choose File</span>
                         </Button>
@@ -68,13 +85,15 @@
                                 type="button"
                                 class="x-button"
                                 aria-label="remove file"
-                                title="Remove file"
-                                ><span class="icon-x" aria-hidden="true" /></button
-                            >{/if}
+                                title="Remove file">
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        {/if}
                     </div>
                 </div>
             </div>
         </div>
+
         <svelte:fragment slot="footer">
             <Button text on:click={() => (show = false)}>Cancel</Button>
             <Button submit>Create</Button>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
index fe94f6e7f..f434fda50 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte
@@ -88,7 +88,7 @@
                         <div class="u-grid u-gap-16">
                             <p>Drag and drop files here to upload</p>
                             <div>
-                                <Button secondary on:click={input.click}>
+                                <Button secondary on:click={() => input.click()}>
                                     <span class="icon-upload" aria-hidden="true" />
                                     <span class="text">Choose File</span>
                                 </Button>