From ac489ac2da0fbf01f5e2877612c14cfaf1ef79c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Thu, 13 Apr 2023 21:00:12 +0200
Subject: [PATCH] fix(frontend): Fix app file uploads (#1408)

* fix(frontend): Image upload

* fix

* handle map input error
---
 .../apps/components/display/AppMap.svelte      | 18 ++++++++++--------
 .../apps/editor/component/components.ts        |  2 +-
 .../settingsPanel/InputsSpecEditor.svelte      |  6 +++---
 .../settingsPanel/InputsSpecsEditor.svelte     |  1 -
 .../inputEditor/UploadInputEditor.svelte       |  9 +++++----
 5 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte
index edad113fac..026cb984bb 100644
--- a/frontend/src/lib/components/apps/components/display/AppMap.svelte
+++ b/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() {
diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts
index 8b6c7e9e84..16f213998c 100644
--- a/frontend/src/lib/components/apps/editor/component/components.ts
+++ b/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: {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 1f041e6957..65ce462a41 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 244ea97f61..2b7fb77d4f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/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]}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
index b03cd370b1..1598f39341 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
+++ b/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]
 		}
 	}}
 >