Table of Contents
Svelte image preview
Preview a selected image
Example
Component.svelte
<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}
Related snippets
Add Darkmode to sveltekit
How to add darkmode to a sveltekit project
Create images from HTML
How to convert html to an image on the server as a sveltekit API endpoint
Get License from package.json
How to get and show the projects license from package.json
Kiwi schema
How to use Kiwi schema