Preview Image Before Upload Alpine js with Tailwind CSS

Hey friends, today in this blog you’ll see Preview Image Before Upload Alpine js with Tailwind CSS. Earlier, I have shared a blog on how to create File Upload Ui using Tailwind CSS.

Tailwind CSS Image And File Upload Example

Tool Use

Tailwind CSS 2.x

Heroicons Icon

Alpine Js 2.x

Setup Project

Using CDN

<link href="[email protected]^2/dist/tailwind.min.css" rel="stylesheet">


The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Using Apline Js 2.x CDN

<script src="[email protected]/dist/alpine.min.js" defer></script>


Preview Image Before Upload Alpine js with Tailwind CSS

<!DOCTYPE html>
<html lang="en">

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Preview Image Before Upload Alpine js with Tailwind CSS</title>
        <link href="[email protected]^2/dist/tailwind.min.css" rel="stylesheet">
        <script src="[email protected]/dist/alpine.min.js" defer></script>

        <div x-data="showImage()" class="flex items-center justify-center h-screen mt-32 mb-32 bg-gray-200">
            <div class="bg-white rounded-lg shadow-xl md:w-9/12 lg:w-1/2">
                <div class="m-4">
                    <label class="inline-block mb-2 text-gray-500">Upload
                    <div class="flex items-center justify-center w-full">
                            class="flex flex-col w-full h-32 border-4 border-dashed hover:bg-gray-100 hover:border-gray-300">
                            <div class="relative flex flex-col items-center justify-center pt-7">
                                <img id="preview" class="absolute inset-0 w-full h-32">
                                <svg xmlns=""
                                    class="w-12 h-12 text-gray-400 group-hover:text-gray-600" viewBox="0 0 20 20"
                                    <path fill-rule="evenodd"
                                        d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
                                        clip-rule="evenodd" />
                                <p class="pt-1 text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
                                    Select a photo</p>
                            <input type="file" class="opacity-0" accept="image/*" @change="showPreview(event)" />
                <div class="flex p-2 space-x-4">
                    <button class="px-4 py-2 text-white bg-green-500 rounded shadow-xl">Create</button>
            function showImage() {
                return {
                    showPreview(event) {
                        if ( > 0) {
                            var src = URL.createObjectURL([0]);
                            var preview = document.getElementById("preview");
                            preview.src = src;
                   = "block";