how to image upload with preview in svelte

How to Image Upload With Preview in Svelte

updated 14/05/22 By frontendshape

In this tutorial we will see how to upload image with preview in sveltejs. For this styling we will use Tailwind CSS. First you need to install & setup svelte with tailwind css or you can use <svelte:head> special elements to import tailwind css cdn.

How to Install Tailwind CSS 3 in Svelte

Image Upload Preview in Svelte

    <script src=""></script>

    let input;
    let container;
    let image;
    let placeholder;
    let showImage = false;

    function onChange() {
        const file = input.files[0];

        if (file) {
            showImage = true;

            const reader = new FileReader();
            reader.addEventListener("load", function () {
                image.setAttribute("src", reader.result);

        showImage = false;
    <h1 class="text-2xl font-bold">Image Preview on File Upload</h1>
    <input bind:this={input} on:change={onChange} type="file"
        class="w-full px-3 py-2 border border-gray-300 rounded-md file:py-2 file:px-4 file:rounded-full file:border-0" />
    <div bind:this={container} class="flex items-center justify-center h-40 max-w-sm mt-4 border">
        {#if showImage}
        <img bind:this={image} src="" alt="Preview" />
        <span bind:this={placeholder} class="text-blue-600">Image Preview</span>
image upload sveltekit

image upload sveltekit