make web file picking more consistent

.gitignore

@@ -8,3 +8,6 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Local Netlify folder
+.netlify

src/lib/components/FramePreview.svelte

@@ -11,17 +11,19 @@
 	import { frames, mode } from '../store';
 
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
-	import { info } from '$lib/logging';
+	import { debug, info } from '$lib/logging';
 	import { loadGif, loadImage } from '$lib/io';
 	import { keepFocused } from '$lib/state';
+	import { onMount } from 'svelte';
 	export let index: number;
 
 	let src: string | null;
-	let fileInput: HTMLInputElement | undefined;
+
 	let files: FileList;
 
 	$: loading = false;
 
+	// prevent the component from being unmounted when the file picker opens
 	$: $keepFocused = loading;
 
 	$: {
@@ -95,24 +97,28 @@
 			}
 		}
 
+		fileInput.value = "";
 		loading = false;
 	};
 
 	const clearImage = () => {
 		$frames[index] = null;
+		loading = false;
 	};
+
+	let fileInput: HTMLInputElement;
 </script>
 
 {#if mode === 'web'}
-	<div class="w-0 h-0 overflow-hidden">
-		<input
-			type="file"
-			accept="image/png, image/jpeg, image/gif, image/tiff"
-			bind:this={fileInput}
-			bind:files
-			on:change={finishLoad}
-		/>
-	</div>
+	<input
+		bind:this={fileInput}
+		type="file"
+		bind:files={files}
+		on:change={finishLoad}
+		on:input={() => debug("This is the input event")}
+		class="hidden"
+		accept="image/png, image/jpeg, image/tiff, image/gif"
+	/>
 {/if}
 
 <button

src/lib/components/tube.svelte

@@ -132,6 +132,8 @@
 					);
 				} else if (src?.mode === 'gif' && !src.data.running()) {
 					src.data.start();
+				} else {
+					ctx?.clearRect(0, 0, canvas.width, canvas.height);
 				}
 			} catch (e) {
 				debug('Rendering error', e);