From ed8160bdbb099f3979d8b0f29faff05a545f249d Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Mar 2025 15:13:28 +0000
Subject: [PATCH 1/2] File component ts conversion

---
 packages/bbui/src/Form/Core/File.svelte | 48 ++++++++++++++-----------
 packages/bbui/src/Form/File.svelte      | 29 ++++++++-------
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/packages/bbui/src/Form/Core/File.svelte b/packages/bbui/src/Form/Core/File.svelte
index 997c0248a1..c4d54308ad 100644
--- a/packages/bbui/src/Form/Core/File.svelte
+++ b/packages/bbui/src/Form/Core/File.svelte
@@ -1,43 +1,47 @@
-<script>
+<script lang="ts">
   import ActionButton from "../../ActionButton/ActionButton.svelte"
   import { uuid } from "../../helpers"
   import Icon from "../../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let title = "Upload file"
-  export let disabled = false
-  export let allowClear = null
-  export let extensions = null
-  export let handleFileTooLarge = null
-  export let fileSizeLimit = BYTES_IN_MB * 20
-  export let id = null
-  export let previewUrl = null
+  const BYTES_IN_MB = 1000000
+
+  export let value: File | undefined = undefined
+  export let title: string = "Upload file"
+  export let disabled: boolean = false
+  export let allowClear: boolean | undefined = undefined
+  export let extensions: string[] | undefined = undefined
+  export let handleFileTooLarge: ((file: File) => void) | undefined = undefined
+  export let fileSizeLimit: number = BYTES_IN_MB * 20
+  export let id: string | undefined = undefined
+  export let previewUrl: string | undefined = undefined
 
   const fieldId = id || uuid()
   const BYTES_IN_KB = 1000
-  const BYTES_IN_MB = 1000000
 
   const dispatch = createEventDispatcher()
 
-  let fileInput
+  let fileInput: HTMLInputElement | undefined
 
   $: inputAccept = Array.isArray(extensions) ? extensions.join(",") : "*"
 
-  async function processFile(targetFile) {
-    if (handleFileTooLarge && targetFile?.size >= fileSizeLimit) {
-      handleFileTooLarge(targetFile)
-      return
+  async function processFile(targetFile: File | undefined) {
+    if (targetFile) {
+      if (handleFileTooLarge && targetFile.size >= fileSizeLimit) {
+        handleFileTooLarge(targetFile)
+        return
+      }
+      dispatch("change", targetFile)
     }
-    dispatch("change", targetFile)
   }
 
-  function handleFile(evt) {
-    processFile(evt.target.files[0])
+  function handleFile(evt: Event) {
+    const target = evt.target as HTMLInputElement
+    processFile(target.files?.[0])
   }
 
   function clearFile() {
-    dispatch("change", null)
+    dispatch("change", undefined)
   }
 </script>
 
@@ -75,7 +79,9 @@
       {/if}
     </div>
   {/if}
-  <ActionButton {disabled} on:click={fileInput.click()}>{title}</ActionButton>
+  <ActionButton {disabled} on:click={() => fileInput?.click()}>
+    {title}
+  </ActionButton>
 </div>
 
 <style>
diff --git a/packages/bbui/src/Form/File.svelte b/packages/bbui/src/Form/File.svelte
index 4c00cafc35..8fb51fd224 100644
--- a/packages/bbui/src/Form/File.svelte
+++ b/packages/bbui/src/Form/File.svelte
@@ -1,23 +1,23 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import { CoreFile } from "./Core"
   import { createEventDispatcher } from "svelte"
 
-  export let label = null
-  export let labelPosition = "above"
-  export let disabled = false
-  export let allowClear = null
-  export let handleFileTooLarge = () => {}
-  export let previewUrl = null
-  export let extensions = null
-  export let error = null
-  export let title = null
-  export let value = null
-  export let tooltip = null
-  export let helpText = null
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let disabled: boolean = false
+  export let allowClear: boolean | undefined = undefined
+  export let handleFileTooLarge: (file: File) => void = () => {}
+  export let previewUrl: string | undefined = undefined
+  export let extensions: string[] | undefined = undefined
+  export let error: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let value: File | undefined = undefined
+  export let tooltip: string | undefined = undefined
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -25,7 +25,6 @@
 
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <CoreFile
-    {error}
     {disabled}
     {allowClear}
     {title}

From 237e690dcd888337e0a71cc4a12a7cd2375ca2d8 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 19 Mar 2025 15:33:35 +0000
Subject: [PATCH 2/2] lint issue

---
 packages/bbui/src/Form/Core/File.svelte | 2 +-
 packages/bbui/src/Form/File.svelte      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Form/Core/File.svelte b/packages/bbui/src/Form/Core/File.svelte
index c4d54308ad..a4bc576e95 100644
--- a/packages/bbui/src/Form/Core/File.svelte
+++ b/packages/bbui/src/Form/Core/File.svelte
@@ -11,7 +11,7 @@
   export let disabled: boolean = false
   export let allowClear: boolean | undefined = undefined
   export let extensions: string[] | undefined = undefined
-  export let handleFileTooLarge: ((file: File) => void) | undefined = undefined
+  export let handleFileTooLarge: ((_file: File) => void) | undefined = undefined
   export let fileSizeLimit: number = BYTES_IN_MB * 20
   export let id: string | undefined = undefined
   export let previewUrl: string | undefined = undefined
diff --git a/packages/bbui/src/Form/File.svelte b/packages/bbui/src/Form/File.svelte
index 8fb51fd224..b596b81537 100644
--- a/packages/bbui/src/Form/File.svelte
+++ b/packages/bbui/src/Form/File.svelte
@@ -7,7 +7,7 @@
   export let labelPosition: string = "above"
   export let disabled: boolean = false
   export let allowClear: boolean | undefined = undefined
-  export let handleFileTooLarge: (file: File) => void = () => {}
+  export let handleFileTooLarge: (_file: File) => void = () => {}
   export let previewUrl: string | undefined = undefined
   export let extensions: string[] | undefined = undefined
   export let error: string | undefined = undefined