Svelte image preview

Preview a selected image

Table of Contents
<script>
	let preview_image = $state();

	function handleFileSelect(event) {
		const files = event.target.files;
		if (files && files.length > 0) {
			const reader = new FileReader();

			reader.onload = (readerEvent) => {
				preview_image = readerEvent.target.result;
			};

			reader.readAsDataURL(files[0]);
		}
	}
</script>

<input accept="image/*" type="file" onchange={handleFileSelect} />
{#if preview_image}
	<img src={preview_image} alt="placeholder" />
{/if}