fix(frontend): Fix app file uploads (#1408)

* fix(frontend): Image upload

* fix

* handle map input error

frontend/src/lib/components/apps/components/display/AppMap.svelte

@@ -79,16 +79,18 @@
 
 	function getMarkerArray(): Marker[] | undefined {
 		let array: Marker[] | undefined = undefined
-		if (typeof markers === 'string') {
-			try {
-				array = JSON.parse(markers)
-			} catch (e) {
-				return undefined
+		try {
+			if (typeof markers === 'string') {
+				const json = JSON.parse(markers)
+				array = Array.isArray(json) ? json : [json]
+			} else {
+				array = markers
 			}
-		} else {
-			array = markers
+			return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon))
+		} catch (error) {
+			console.log(error)
+			return undefined
 		}
-		return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon))
 	}
 
 	function createMarkerLayers() {

frontend/src/lib/components/apps/editor/component/components.ts

@@ -1642,7 +1642,7 @@ Hello \${ctx.username}
 					fieldType: 'text',
 					fileUpload: {
 						accept: 'application/pdf',
-						convertTo: 'buffer'
+						convertTo: 'base64'
 					}
 				},
 				zoom: {

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

@@ -13,7 +13,7 @@
 	import UploadInputEditor from './inputEditor/UploadInputEditor.svelte'
 	import { getContext } from 'svelte'
 	import type { AppViewerContext, RichConfiguration } from '../../types'
-	import type { InputType } from '../../inputType'
+	import type { InputType, UploadAppInput } from '../../inputType'
 
 	export let id: string
 	export let componentInput: RichConfiguration
@@ -28,7 +28,7 @@
 	export let subFieldType: InputType | undefined
 	export let format: string | undefined
 	export let selectOptions: string[] | undefined
-	export let fileUpload: { accept: string; convertTo: string } | undefined = undefined
+	export let fileUpload: UploadAppInput['fileUpload'] | undefined = undefined
 	export let placeholder: string | undefined
 
 	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
@@ -139,7 +139,7 @@
 		{:else if componentInput?.type === 'eval'}
 			<EvalInputEditor {hasRows} {id} bind:componentInput />
 		{:else if componentInput?.type === 'upload'}
-			<UploadInputEditor bind:componentInput />
+			<UploadInputEditor bind:componentInput {fileUpload} />
 		{:else if componentInput?.type === 'user'}
 			<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
 		{/if}

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

@@ -30,7 +30,6 @@
 				/>
 			{:else}
 				{@const meta = inputSpecsConfiguration?.[k]}
-				<!-- {JSON.stringify(meta)} -->
 				<InputsSpecEditor
 					key={k}
 					bind:componentInput={inputSpecs[k]}

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

@@ -3,17 +3,18 @@
 	import type { UploadAppInput } from '../../../inputType'
 
 	export let componentInput: UploadAppInput | undefined
+	export let fileUpload: UploadAppInput['fileUpload'] | undefined
 </script>
 
 <FileInput
-	accept={componentInput?.fileUpload?.accept}
-	multiple={componentInput?.fileUpload?.multiple}
-	convertTo={componentInput?.fileUpload?.convertTo}
+	accept={fileUpload?.accept}
+	multiple={fileUpload?.multiple}
+	convertTo={fileUpload?.convertTo}
 	iconSize={24}
 	class="text-sm py-4"
 	on:change={({ detail }) => {
 		if (componentInput) {
-			componentInput.value = componentInput?.fileUpload?.multiple ? detail : detail?.[0]
+			componentInput.value = fileUpload?.multiple ? detail : detail?.[0]
 		}
 	}}
 >