markdown insert media

front/js/svelte/records/elements/File.svelte

@@ -4,6 +4,7 @@
     import PreviewFile from "../previews/PreviewFile.svelte";
     import FileDialog from "../../dialog/FileDialog.svelte";
     import Uploader from "../../files/Uploader.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let record;
@@ -22,7 +23,7 @@
     function insertFiles(e) {
         e.preventDefault();
         browseModal.close();
-        value = [...(value ?? []), ...(e.detail ?? [])];
+        value = [...(value ?? []), ...(e.detail.files ?? [])];
     }
 
     function replaceFiles(e) {
@@ -41,12 +42,15 @@
     }
 </script>
 
-<div class="mb-0">
-    <button class="button" on:click={openBrowseModal}> Browse </button>
+<div
+    class="mb-0"
+    style="display: flex; align-items: start; justify-content: start; gap:6px"
+>
+    <button class="button" on:click={openBrowseModal}>
+        <Icon icon="photo-film"></Icon> Browse
+    </button>
 
-    <div>
-        <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
-    </div>
+    <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
 </div>
 {#if value.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>