Merge pull request #15770 from Budibase/feat/file-ts-conversion

File component ts conversion

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>

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}