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 / 3.x
Heroicons Icon
Alpine Js 2.x / 3.x
Setup Project
Using CDN
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
or
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="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
Alpinejs 3.x
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
Example
Preview Image Before Upload Alpine js with Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<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="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<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
Image(jpg,png)</label>
<div class="flex items-center justify-center w-full">
<label
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="http://www.w3.org/2000/svg"
class="w-12 h-12 text-gray-400 group-hover:text-gray-600" viewBox="0 0 20 20"
fill="currentColor">
<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" />
</svg>
<p class="pt-1 text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
Select a photo</p>
</div>
<input type="file" class="opacity-0" accept="image/*" @change="showPreview(event)" />
</label>
</div>
</div>
<div class="flex p-2 space-x-4">
<button class="px-4 py-2 text-white bg-green-500 rounded shadow-xl">Create</button>
</div>
</div>
</div>
<script>
function showImage() {
return {
showPreview(event) {
if (event.target.files.length > 0) {
var src = URL.createObjectURL(event.target.files[0]);
var preview = document.getElementById("preview");
preview.src = src;
preview.style.display = "block";
}
}
}
}
</script>
</body>
</html>
Preview Image Before Upload Alpine js with Tailwind CSS
Preview Image Before Upload Alpine js with Tailwind CSS v2
