diff --git a/front/js/svelte/common/Icon.svelte b/front/js/svelte/common/Icon.svelte
index 66000bc..6276451 100644
--- a/front/js/svelte/common/Icon.svelte
+++ b/front/js/svelte/common/Icon.svelte
@@ -56,23 +56,23 @@
             path: '<path d="M416 288h-95.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H416c17.67 0 32-14.33 32-32S433.7 288 416 288zM544 32h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 32 544 32zM352 416h-32c-17.67 0-32 14.33-32 32s14.33 32 32 32h32c17.67 0 31.1-14.33 31.1-32S369.7 416 352 416zM480 160h-159.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H480c17.67 0 32-14.33 32-32S497.7 160 480 160zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z"/>',
             viewBox: "0 0 576 512",
         },
-        "filter": {
+        filter: {
             path: '<path d="M3.853 54.87C10.47 40.9 24.54 32 40 32H472C487.5 32 501.5 40.9 508.1 54.87C514.8 68.84 512.7 85.37 502.1 97.33L320 320.9V448C320 460.1 313.2 471.2 302.3 476.6C291.5 482 278.5 480.9 268.8 473.6L204.8 425.6C196.7 419.6 192 410.1 192 400V320.9L9.042 97.33C-.745 85.37-2.765 68.84 3.854 54.87L3.853 54.87z"/>',
             viewBox: "0 0 512 512",
         },
-        "calendar": {
+        calendar: {
             path: '<path d="M96 32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32zM448 464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192H448V464z"/>',
             viewBox: "0 0 448 512",
         },
-        "pencil": {
+        pencil: {
             path: '<path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"/>',
             viewBox: "0 0 512 512",
         },
-        "database": {
+        database: {
             path: '<path d="M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"/>',
             viewBox: "0 0 448 512",
         },
-        "dice": {
+        dice: {
             path: '<path d="M447.1 224c0-12.56-4.781-25.13-14.35-34.76l-174.9-174.9C249.1 4.786 236.5 0 223.1 0C211.4 0 198.9 4.786 189.2 14.35L14.35 189.2C4.783 198.9-.0011 211.4-.0011 223.1c0 12.56 4.785 25.17 14.35 34.8l174.9 174.9c9.625 9.562 22.19 14.35 34.75 14.35s25.13-4.783 34.75-14.35l174.9-174.9C443.2 249.1 447.1 236.6 447.1 224zM96 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S120 210.8 120 224S109.3 248 96 248zM224 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 376 224 376zM224 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S248 210.8 248 224S237.3 248 224 248zM224 120c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 120 224 120zM352 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S365.3 248 352 248zM591.1 192l-118.7 0c4.418 10.27 6.604 21.25 6.604 32.23c0 20.7-7.865 41.38-23.63 57.14l-136.2 136.2v46.37C320 490.5 341.5 512 368 512h223.1c26.5 0 47.1-21.5 47.1-47.1V240C639.1 213.5 618.5 192 591.1 192zM479.1 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S493.2 376 479.1 376z"/>',
             viewBox: "0 0 640 512",
         },
@@ -81,7 +81,7 @@
             path: '<path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/>',
             viewBox: "0 0 512 512",
         },
-        "eye": {
+        eye: {
             path: '<path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"/>',
             viewBox: "0 0 576 512",
         },
@@ -93,19 +93,19 @@
             path: '<path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>',
             viewBox: "0 0 512 512",
         },
-        "expand": {
+        expand: {
             path: '<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z"/>',
             viewBox: "0 0 448 512",
         },
-        "compress": {
+        compress: {
             path: '<path d="M128 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32v-96C160 334.3 145.7 320 128 320zM416 320h-96c-17.69 0-32 14.31-32 32v96c0 17.69 14.31 32 32 32s32-14.31 32-32v-64h64c17.69 0 32-14.31 32-32S433.7 320 416 320zM320 192h96c17.69 0 32-14.31 32-32s-14.31-32-32-32h-64V64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96C288 177.7 302.3 192 320 192zM128 32C110.3 32 96 46.31 96 64v64H32C14.31 128 0 142.3 0 160s14.31 32 32 32h96c17.69 0 32-14.31 32-32V64C160 46.31 145.7 32 128 32z"/>',
             viewBox: "0 0 448 512",
         },
-        "check": {
+        check: {
             path: '<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/>',
             viewBox: "0 0 448 512",
         },
-        "close": {
+        close: {
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
             viewBox: "0 0 24 24",
         },
@@ -113,7 +113,7 @@
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
             viewBox: "0 0 24 24",
         },
-        "list": {
+        list: {
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
             viewBox: "0 0 24 24",
         },
@@ -121,13 +121,16 @@
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
             viewBox: "0 0 24 24",
         },
-        "italic": {
+        italic: {
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
             viewBox: "0 0 24 24",
-        }
+        },
+        upload: {
+            path: '<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>              <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z"/>',
+            viewBox: "0 0 16 16",
+        },
     };
 
-
     export let width = 16;
     export let height = 16;
     export let icon = "";
@@ -138,16 +141,15 @@
 </script>
 
 <svg
-        class="bi"
-        xmlns="http://www.w3.org/2000/svg"
-        {width}
-        {height}
-        viewBox={selectedIcon.viewBox}
-        aria-labelledby={icon}
-        role="presentation"
-        {stroke}
-        {fill}
-
+    class="bi"
+    xmlns="http://www.w3.org/2000/svg"
+    {width}
+    {height}
+    viewBox={selectedIcon.viewBox}
+    aria-labelledby={icon}
+    role="presentation"
+    {stroke}
+    {fill}
 >
     {@html selectedIcon.path}
 </svg>
@@ -155,6 +157,5 @@
 <style>
     svg {
         vertical-align: text-top;
-
     }
 </style>
diff --git a/front/js/svelte/dialog/FileDialog.svelte b/front/js/svelte/dialog/FileDialog.svelte
index ded5645..b0a1693 100644
--- a/front/js/svelte/dialog/FileDialog.svelte
+++ b/front/js/svelte/dialog/FileDialog.svelte
@@ -2,13 +2,15 @@
     import { createEventDispatcher, getContext } from "svelte";
     import Icon from "../common/Icon.svelte";
     import FileIndex from "./FileIndex.svelte";
+    import Dropdown from "../common/Dropdown.svelte";
 
     let dialogEl;
+    export let presetMode = false;
 
     const dispatch = createEventDispatcher();
     const channel = getContext("channel");
     $: files = [];
-    $: selectedRecords = [];
+    $: selectedFiles = [];
     // onMount(() => {
     //     load();
     // });
@@ -19,7 +21,7 @@
         }
 
         dialogEl.close();
-        selectedRecords = [];
+        selectedFiles = [];
     }
 
     function load(recordId) {
@@ -31,14 +33,14 @@
             .catch((error) => console.log(error));
     }
 
-    function insert(e) {
+    function insert(e, preset) {
         e.preventDefault();
-        dispatch("insert_files", selectedRecords);
+        dispatch("insert_files", { files: selectedFiles, preset: preset });
     }
 
     function replace(e) {
         e.preventDefault();
-        dispatch("replace_files", selectedRecords);
+        dispatch("replace_files", selectedFiles);
     }
 
     export function open(recordId) {
@@ -49,25 +51,38 @@
 
 <dialog bind:this={dialogEl}>
     <div class="dialog-header">
-        <button
-            type="button"
-            class="button"
-            on:click={insert}
-            disabled={selectedRecords.length === 0}
-        >
-            Insert
-        </button>
-        <button
-            type="button"
-            class="button"
-            on:click={replace}
-            disabled={selectedRecords.length === 0}
-        >
-            Replace
-        </button>
-        {#if selectedRecords.length > 0}
+        {#if presetMode}
+            <Dropdown>
+                <div slot="button">Insert Preset</div>
+                {#each channel.imagePresets as preset}
+                    <button
+                        class=" dropdown-item button"
+                        on:click={(e) => insert(e, preset)}
+                        >{preset.name}</button
+                    >
+                {/each}
+            </Dropdown>
+        {:else}
+            <button
+                type="button"
+                class="button"
+                on:click={insert}
+                disabled={selectedFiles.length === 0}
+            >
+                Insert
+            </button>
+            <button
+                type="button"
+                class="button"
+                on:click={replace}
+                disabled={selectedFiles.length === 0}
+            >
+                Replace
+            </button>
+        {/if}
+        {#if selectedFiles.length > 0}
             <span class="">
-                {selectedRecords.length} records selected
+                {selectedFiles.length} records selected
             </span>
         {/if}
 
@@ -82,6 +97,6 @@
     </div>
 
     <div class="dialog-body">
-        <FileIndex {files} bind:selected={selectedRecords}></FileIndex>
+        <FileIndex {files} bind:selected={selectedFiles}></FileIndex>
     </div>
 </dialog>
diff --git a/front/js/svelte/files/Uploader.svelte b/front/js/svelte/files/Uploader.svelte
index ff76256..001847e 100644
--- a/front/js/svelte/files/Uploader.svelte
+++ b/front/js/svelte/files/Uploader.svelte
@@ -1,5 +1,6 @@
 <script>
     import { createEventDispatcher, getContext } from "svelte";
+    import Icon from "../common/Icon.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -45,6 +46,7 @@
 
 <fieldset class="upload-button" disabled={isLoading}>
     <label class="button primary btn-spinner">
+        <Icon icon="upload"></Icon>
         <span
             class="spinner-border spinner-border-sm"
             role="status"
diff --git a/front/js/svelte/files/imageserver.js b/front/js/svelte/files/imageserver.js
index 00af94c..f0afa18 100644
--- a/front/js/svelte/files/imageserver.js
+++ b/front/js/svelte/files/imageserver.js
@@ -6,6 +6,14 @@ export function imgurl(channel, file) {
   return channel.filesUrl + `/thumbs/${webpPath}`;
 }
 
+export function presetUrl(channel, file, preset) {
+  if (file.mime === "image/svg+xml") {
+    return fileurl(channel, file);
+  }
+  const webpPath = file.path.slice(0, file.path.lastIndexOf(".")) + ".webp";
+  return channel.filesUrl + `/templates/${preset}/${webpPath}`;
+}
+
 export function fileurl(channel, file) {
   return channel.filesUrl + `/${file.path}`;
 }
diff --git a/front/js/svelte/records/elements/File.svelte b/front/js/svelte/records/elements/File.svelte
index 0e8fbb4..4e6a184 100644
--- a/front/js/svelte/records/elements/File.svelte
+++ b/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}>
diff --git a/front/js/svelte/records/elements/Markdown.svelte b/front/js/svelte/records/elements/Markdown.svelte
index c2c75ee..67a751b 100644
--- a/front/js/svelte/records/elements/Markdown.svelte
+++ b/front/js/svelte/records/elements/Markdown.svelte
@@ -1,11 +1,13 @@
 <script>
+    import { getContext } from "svelte";
+    import { htmlurl, presetUrl } from "../../files/imageserver";
     import Codemirror from "../../libs/CodemirrorMarkdown.svelte";
     import { getErrorMessage } from "./errorMessage";
     import RichEditorFiles from "./RichEditorFiles.svelte";
-
+    const channel = getContext("channel");
     export let value;
     export let field;
-    export let graph;
+
     export let record;
     export let isCreateMode;
     // export let id;
@@ -16,21 +18,38 @@
     function insertMedia(e) {
         editor.insertMedia(e.detail);
     }
+
+    function onFilesInserted(e) {
+        console.log(e.detail);
+        const presetPath = e.detail.preset.path;
+
+        e.detail.files.map((aFile) => {
+            let html = htmlurl(channel, record, presetPath);
+
+            editor.insertMedia({
+                html: html,
+                url: presetUrl(channel, aFile, presetPath),
+                originalUrl: channel.filesUrl + "/" + aFile.path,
+                file: aFile,
+            });
+        });
+    }
 </script>
 
 <div class="mb-3">
+    <RichEditorFiles
+        {record}
+        {field}
+        {validationErrors}
+        {onFilesInserted}
+        on:editor-insert={insertMedia}
+    ></RichEditorFiles>
     <Codemirror
         bind:this={editor}
         bind:value
         editable={!field.readonly || isCreateMode}
     />
-    <RichEditorFiles
-        bind:graph
-        {record}
-        {field}
-        {validationErrors}
-        on:editor-insert={insertMedia}
-    ></RichEditorFiles>
+
     {#if errorMessage}
         <div class="invalid-feedback d-block">
             {errorMessage}
diff --git a/front/js/svelte/records/elements/RichEditorFiles.svelte b/front/js/svelte/records/elements/RichEditorFiles.svelte
index 31dd687..39de492 100644
--- a/front/js/svelte/records/elements/RichEditorFiles.svelte
+++ b/front/js/svelte/records/elements/RichEditorFiles.svelte
@@ -1,15 +1,13 @@
 <script>
-    import PreviewFile from "../previews/PreviewFile.svelte";
-    import Dropdown from "../../common/Dropdown.svelte";
-    import Dialog from "../../dialog/Dialog.svelte";
-    import { insertEdges } from "./reference.js";
     import { getContext } from "svelte";
     import FileDialog from "../../dialog/FileDialog.svelte";
     import Uploader from "../../files/Uploader.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     const channel = getContext("channel");
     export let field;
     export let record;
+    export let onFilesInserted;
     let browseModal;
 
     function openBrowseModal(e) {
@@ -19,6 +17,7 @@
 
     function insertFiles(e) {
         e.preventDefault();
+        onFilesInserted(e);
         browseModal.close();
     }
 
@@ -30,17 +29,20 @@
     function uploadComplete(e) {}
 </script>
 
-<div class="mb-3">
-    <label class="mt-4 mb-3">Rich editor files</label>
-    <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>
 
 <FileDialog
     bind:this={browseModal}
     on:insert_files={insertFiles}
     on:replace_files={replaceFiles}
+    presetMode={true}
 ></FileDialog>
diff --git a/front/js/svelte/records/previews/PreviewFile.svelte b/front/js/svelte/records/previews/PreviewFile.svelte
index c7749b2..10ce00d 100644
--- a/front/js/svelte/records/previews/PreviewFile.svelte
+++ b/front/js/svelte/records/previews/PreviewFile.svelte
@@ -1,37 +1,18 @@
 <script>
     import Icon from "../../common/Icon.svelte";
 
-    import { createEventDispatcher, getContext } from "svelte";
+    import { createEventDispatcher } from "svelte";
     import Preview from "../../files/Preview.svelte";
-    import Dropdown from "../../common/Dropdown.svelte";
-    import { htmlurl } from "../../files/imageserver";
 
     const dispatch = createEventDispatcher();
-    const channel = getContext("channel");
+
     export let file;
     export let hasDelete = false;
-    export let hasInsert = false;
-
-    let imagePresets = Object.keys(channel.imageFilters);
 
     function remove(e) {
         e.preventDefault();
         dispatch("remove_file", file.id);
     }
-
-    function insert(e, preset) {
-        e.preventDefault();
-        let html = htmlurl(channel, record, preset);
-        let url = !preset
-            ? `/${record._file.path}`
-            : `/templates/${preset}/${record._file.path}`;
-        dispatch("editor-insert", {
-            html: html,
-            url: channel.filesUrl + url,
-            originalUrl: channel.filesUrl + "/" + record._file.path,
-            record: record,
-        });
-    }
 </script>
 
 <div class="preview-file">
@@ -48,25 +29,6 @@
     <div
         style="display: flex;gap:4px; align-items: center;  margin-right: 10px;"
     >
-        {#if hasInsert}
-            <div class="reference-action">
-                <Dropdown>
-                    <div slot="button">
-                        <Icon icon="photo-film" />
-                    </div>
-                    <button
-                        class="dropdown-item button"
-                        on:click={(e) => insert(e, null)}>original</button
-                    >
-                    {#each imagePresets as preset}
-                        <button
-                            class="dropdown-item button"
-                            on:click={(e) => insert(e, preset)}>{preset}</button
-                        >
-                    {/each}
-                </Dropdown>
-            </div>
-        {/if}
         {#if hasDelete}
             <div class="reference-action">
                 <button class="button" on:click={remove}>
diff --git a/front/sass/_button.scss b/front/sass/_button.scss
index 0db4f81..8b10b1d 100644
--- a/front/sass/_button.scss
+++ b/front/sass/_button.scss
@@ -1,93 +1,90 @@
-.button{
-  border-radius: 12px;
-  background: var(--p20);
-  padding: 3px 10px;
-  cursor: pointer;
-  border: 0px solid var(--p30);
-  font-size: 14px;
-  min-height: 27px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--text);
-
-
-  &:focus {
-  }
-
-  &:hover {
-    background: var(--p30);
-  }
-
-  &:active {
-    background: var(--p50)!important;
-    box-shadow: none;
-  }
-  &.active {
-    background: var(--p30);
-  }
-
-  &.secondary{
-    background: var(--p30);
-    &:hover {
-      background: var(--p40);
-    }
-  }
-  &.primary{
-    background: var(--p70);
-    color: var(--p10);
-
-    &:hover {
-      background: var(--p90);
-    }
-  }
-
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: .7;
-    color: var(--text);
-  }
-}
-
-.upload-button{
-  padding: 0;
-  border: none;
-
-
-  label{
+.button {
+    border-radius: 12px;
+    background: var(--p20);
+    padding: 3px 10px;
+    cursor: pointer;
+    border: 0px solid var(--p30);
     font-size: 14px;
-    line-height: 14px;
-    font-weight: normal;
-    background: var(--p80)!important;
-    color: var(--p10);
-  }
+    min-height: 27px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--text);
+
+    &:focus {
+    }
+
+    &:hover {
+        background: var(--p30);
+    }
+
+    &:active {
+        background: var(--p50) !important;
+        box-shadow: none;
+    }
+    &.active {
+        background: var(--p30);
+    }
+
+    &.secondary {
+        background: var(--p30);
+        &:hover {
+            background: var(--p40);
+        }
+    }
+    &.primary {
+        background: var(--p70);
+        color: var(--p10);
+
+        &:hover {
+            background: var(--p90);
+        }
+    }
+
+    &[disabled] {
+        pointer-events: none;
+        opacity: 0.7;
+        color: var(--text);
+    }
 }
 
-.button-text{
-  border: none;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
+.upload-button {
+    padding: 0;
+    border: none;
+
+    label {
+        margin: 0;
+        font-size: 14px;
+        line-height: 14px;
+        font-weight: normal;
+        background: var(--p80) !important;
+        color: var(--p10);
+    }
 }
 
+.button-text {
+    border: none;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+}
 
 .spinner-border {
-  width: 12px;
-  height: 12px;
-  border: 2px solid  var(--p10);
-  border-bottom-color: var(--p30);
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
+    width: 12px;
+    height: 12px;
+    border: 2px solid var(--p10);
+    border-bottom-color: var(--p30);
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
 }
 
 @keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
\ No newline at end of file
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}