Update

src/lib/components/CardAdd.svelte

@@ -5,6 +5,8 @@ import Cross from '$lib/assets/icons/Cross.svelte'
 // all data shared with rest of page in card_data
 export let card_data
 
+import { img } from '$lib/js/img_store';
+
 if(!card_data.tags){
 	card_data.tags = []
 }
@@ -20,20 +22,22 @@ let image_preview_url
 // Herbst: 🍂
 // Sommer: ☀️
 
-
 export function show_local_image(){
 	var file = this.files[0]
 	    // allowed MIME types
-    var mime_types = [ 'image/jpeg', 'image/webp' ];
+    var mime_types = [ 'image/webp' ];
 
     // validate MIME
     if(mime_types.indexOf(file.type) == -1) {
         alert('Error : Incorrect file type');
         return;
     }
-	image_preview_url = URL.createObjectURL(file);
-
-
+    image_preview_url = URL.createObjectURL(file);
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = e => {
+    	img.update(() => e.target.result.split(',')[1]);
+	};
 }
 
 export function remove_selected_images(){

src/lib/components/CreateIngredientList.svelte

@@ -8,9 +8,18 @@ import Check from '$lib/assets/icons/Check.svelte'
 import "$lib/css/action_button.css"
 
 import { do_on_key } from '$lib/components/do_on_key.js'
+import { portions } from '$lib/js/portions_store.js'
+
+let portions_local
+portions.subscribe((p) => {
+	portions_local = p
+});
+
+export function set_portions(){
+	portions.update((p) => portions_local)
+}
 
 export let ingredients
-export let portions
 
 let new_ingredient = {
 	amount: "",
@@ -348,7 +357,7 @@ h3{
 
 <div class=list_wrapper>
 <h4>Portionen:</h4>
-<p contenteditable type="text" bind:innerText={portions}></p>
+<p contenteditable type="text" bind:innerText={portions_local} on:blur={set_portions}></p>
 
 <h2>Zutaten</h2>
 {#each ingredients as list, list_index}

src/lib/components/CreateStepList.svelte

@@ -405,6 +405,10 @@ h3{
 	<div><h4>Backen:</h4>
 		<div><p type="text" bind:innerText={add_info.baking.length} contenteditable placeholder="40 min..."></p></div> bei <div><p type="text" bind:innerText={add_info.baking.temperature} contenteditable placeholder=200...></p></div> °C <div><p type="text" bind:innerText={add_info.baking.mode} contenteditable placeholder="Ober-/Unterhitze..."></p></div></div>
 
+	<div><h4>Kochen:</h4>
+		<p contenteditable type="text" bind:innerText={add_info.cooking}></p>
+	</div>
+
 	<div><h4>Auf dem Teller:</h4>
 		<p contenteditable type="text" bind:innerText={add_info.total_time}></p>
 	</div>

src/lib/components/InstructionsPage.svelte

@@ -69,6 +69,10 @@ h4{
 <div><h4>Backen:</h4> {data.baking.length} bei {data.baking.temperature} °C {data.baking.mode}</div>
 {/if}
 
+{#if data.cooking}
+<div><h4>Kochen:</h4>{data.cooking}</div>
+{/if}
+
 {#if data.total_time}
 <div><h4>Auf dem Teller:</h4>{data.total_time}</div>
 {/if}