normalized the caster to return always non-null value and fixed minor ui issues

ui/src/components/records/RecordFieldCell.svelte

@@ -44,7 +44,7 @@
     {:else if field.type === "file"}
         <div class="inline-flex">
             {#each CommonHelper.toArray(record[field.name]) as filename}
-                <figure class="thumb thumb-sm" use:tooltip={filename}>
+                <figure class="thumb thumb-sm">
                     <RecordFilePreview {record} {filename} />
                 </figure>
             {/each}

ui/src/components/records/RecordFilePreview.svelte

@@ -1,23 +1,42 @@
 <script>
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
+    import PreviewPopup from "@/components/base/PreviewPopup.svelte";
 
     export let record;
     export let filename;
 
-    let previewUrl = "";
+    let previewPopup;
+    let thumbUrl = "";
+    let originalUrl = "";
 
-    $: if (CommonHelper.hasImageExtension(filename)) {
-        previewUrl = ApiClient.Records.getFileUrl(record, `${filename}?thumb=100x100`);
+    $: hasPreview = CommonHelper.hasImageExtension(filename);
+
+    $: if (hasPreview) {
+        originalUrl = ApiClient.Records.getFileUrl(record, `${filename}`);
     }
 
+    $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
+
     function onError() {
-        previewUrl = "";
+        thumbUrl = "";
     }
 </script>
 
-{#if previewUrl}
-    <img src={previewUrl} alt={filename} on:error={onError} />
+{#if hasPreview}
+    <img
+        src={thumbUrl}
+        alt={filename}
+        title="Preview {filename}"
+        class:link-fade={hasPreview}
+        on:click={(e) => {
+            e.stopPropagation();
+            previewPopup?.show(originalUrl);
+        }}
+        on:error={onError}
+    />
 {:else}
     <i class="ri-file-line" />
 {/if}
+
+<PreviewPopup bind:this={previewPopup} />

ui/src/components/records/RecordUpsertPanel.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { Record } from "pocketbase";
     import CommonHelper from "@/utils/CommonHelper";
     import ApiClient from "@/utils/ApiClient";
@@ -57,12 +57,13 @@
         return recordPanel?.hide();
     }
 
-    function load(model) {
+    async function load(model) {
         setErrors({}); // reset errors
         original = model || {};
         record = model?.clone ? model.clone() : new Record();
         uploadedFilesMap = {};
         deletedFileIndexesMap = {};
+        await tick(); // wait to populate the fields to get the normalized values
         initialFormHash = calculateFormHash(record);
     }
 
@@ -71,7 +72,7 @@
     }
 
     function save() {
-        if (isSaving || !hasChanges) {
+        if (isSaving || !canSave) {
             return;
         }
 

ui/src/components/records/fields/FileField.svelte

@@ -5,17 +5,15 @@
     import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
     import UploadedFilePreview from "@/components/base/UploadedFilePreview.svelte";
-    import PreviewPopup from "@/components/base/PreviewPopup.svelte";
     import RecordFilePreview from "@/components/records/RecordFilePreview.svelte";
 
     export let record;
-    export let value = null;
+    export let value = "";
     export let uploadedFiles = []; // Array<File> array
     export let deletedFileIndexes = []; // Array<int> array
     export let field = new SchemaField();
 
     let fileInput;
-    let previewPopup;
     let filesListElem;
 
     // normalize uploadedFiles type
@@ -30,8 +28,8 @@
 
     $: isMultiple = field.options?.maxSelect > 1;
 
-    $: if (typeof value === "undefined" || value === null) {
-        value = isMultiple ? [] : null;
+    $: if (CommonHelper.isEmpty(value)) {
+        value = isMultiple ? [] : "";
     }
 
     $: valueAsArray = CommonHelper.toArray(value);
@@ -81,16 +79,7 @@
     <div bind:this={filesListElem} class="files-list">
         {#each valueAsArray as filename, i (filename)}
             <div class="list-item">
-                <figure
-                    class="thumb"
-                    class:fade={deletedFileIndexes.includes(i)}
-                    class:link-fade={CommonHelper.hasImageExtension(filename)}
-                    title={CommonHelper.hasImageExtension(filename) ? "Preview" : ""}
-                    on:click={() =>
-                        CommonHelper.hasImageExtension(filename)
-                            ? previewPopup?.show(ApiClient.Records.getFileUrl(record, filename))
-                            : false}
-                >
+                <figure class="thumb" class:fade={deletedFileIndexes.includes(i)}>
                     <RecordFilePreview {record} {filename} />
                 </figure>
                 <a
@@ -173,5 +162,3 @@
         {/if}
     </div>
 </Field>
-
-<PreviewPopup bind:this={previewPopup} />

ui/src/components/records/fields/JsonField.svelte

@@ -18,5 +18,5 @@
         <i class={CommonHelper.getFieldTypeIcon(field.type)} />
         <span class="txt">{field.name}</span>
     </label>
-    <textarea id={uniqueId} required={field.required} class="txt-mono txt-sm" bind:value />
+    <textarea id={uniqueId} required={field.required} class="txt-mono" bind:value />
 </Field>

ui/src/components/records/fields/SelectField.svelte

@@ -10,7 +10,7 @@
     $: isMultiple = field.options?.maxSelect > 1;
 
     $: if (typeof value === "undefined") {
-        value = isMultiple ? [] : null;
+        value = isMultiple ? [] : "";
     }
 
     $: if (isMultiple && Array.isArray(value) && value.length > field.options.maxSelect) {