fix: improve app image picker UX (#5589)

frontend/src/lib/components/S3FilePicker.svelte

@@ -50,7 +50,9 @@
 	let csvSeparatorChar: string = ','
 	let csvHasHeader: boolean = true
 
-	let dispatch = createEventDispatcher()
+	let dispatch = createEventDispatcher<{
+		close: { s3: string; storage: string | undefined } | undefined
+	}>()
 
 	let drawer: Drawer
 
@@ -466,7 +468,15 @@
 <Drawer
 	bind:this={drawer}
 	on:close={() => {
-		dispatch('close')
+		dispatch(
+			'close',
+			selectedFileKey?.s3
+				? {
+						s3: selectedFileKey.s3,
+						storage: storage
+					}
+				: undefined
+		)
 	}}
 	size="1200px"
 >

frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -64,11 +64,15 @@
 	let s3FilePicker: S3FilePicker | undefined
 	let s3PickerSelection: { s3: string; storage?: string } | undefined = undefined
 	let s3FolderPrefix: string = ''
-	$: s3PickerSelection && updateSelectedS3File()
 
 	function updateSelectedS3File() {
 		if (s3PickerSelection) {
-			componentInput['value'] = `s3://${s3PickerSelection.s3}`
+			// @ts-ignore
+			componentInput = {
+				...componentInput,
+				type: 'static',
+				value: `s3://${s3PickerSelection.s3}`
+			}
 		}
 	}
 
@@ -125,8 +129,8 @@
 						{customTitle
 							? customTitle
 							: shouldCapitalize
-							? capitalize(addWhitespaceBeforeCapitals(key))
-							: key}
+								? capitalize(addWhitespaceBeforeCapitals(key))
+								: key}
 					</span>
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
@@ -235,7 +239,12 @@
 			<UploadInputEditor bind:componentInput {fileUpload} />
 		{:else if componentInput?.type === 'uploadS3'}
 			<div class="w-12/12 pb-2 flex flex-row mb-1 gap-1">
-				<input type="text" placeholder="S3 Folder prefix" bind:value={s3FolderPrefix} aria-label="S3 Folder prefix" />
+				<input
+					type="text"
+					placeholder="S3 Folder prefix"
+					bind:value={s3FolderPrefix}
+					aria-label="S3 Folder prefix"
+				/>
 			</div>
 			<UploadInputEditor
 				bind:componentInput
@@ -260,8 +269,10 @@
 			<S3FilePicker
 				bind:this={s3FilePicker}
 				folderOnly={false}
-				fromWorkspaceSettings={true}
-				bind:selectedFileKey={s3PickerSelection}
+				on:close={(e) => {
+					s3PickerSelection = e.detail
+					updateSelectedS3File()
+				}}
 				readOnlyMode={false}
 				regexFilter={/\.(png|jpg|jpeg|svg|webp)$/i}
 			/>

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { FileInput } from '../../../../common'
-	import type { UploadAppInput, UploadS3AppInput, FileUploadData } from '../../../inputType'
+	import type {
+		UploadAppInput,
+		UploadS3AppInput,
+		FileUploadData,
+		StaticInput
+	} from '../../../inputType'
 	import type { ReadFileAs } from '../../../../common/fileInput/model'
 	import FileUpload from '$lib/components/common/fileUpload/FileUpload.svelte'
 	import { writable, type Writable } from 'svelte/store'
 
-	export let componentInput: UploadAppInput | UploadS3AppInput | undefined
+	export let componentInput: UploadAppInput | UploadS3AppInput | StaticInput<any> | undefined
 	export let fileUpload: UploadAppInput['fileUpload'] | UploadS3AppInput['fileUploadS3'] | undefined
 	export let s3: boolean | undefined = false
 	export let prefix: string | undefined = undefined
@@ -33,8 +38,10 @@
 			return `${cleanPrefix}${file.name}`
 		}}
 		on:addition={({ detail }) => {
-			if (componentInput) {
-				componentInput.value = `s3://${detail.path}`
+			componentInput = {
+				...componentInput,
+				type: 'static',
+				value: `s3://${detail.path}`
 			}
 		}}
 	/>
@@ -46,8 +53,10 @@
 		iconSize={24}
 		class="text-sm py-4"
 		on:change={({ detail }) => {
-			if (componentInput) {
-				componentInput.value = fileUpload?.multiple ? detail : detail?.[0]
+			componentInput = {
+				...componentInput,
+				type: 'static',
+				value: fileUpload?.multiple ? detail : detail?.[0]
 			}
 		}}
 	>