Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<script src="" defer></script>
<link href="^1.0/dist/tailwind.min.css" rel="stylesheet">
function imageData() {
return {
previewUrl: '',
updatePreview() {
var reader, files = document.getElementById('thumbnail').files;
reader = new FileReader();
reader.onload = (e) => {
this.previewUrl =;
clearPreview() {
document.getElementById('thumbnail').value = null;
this.previewUrl = '';
<body class="flex items-center justify-center text-gray-500 bg-blue-800">
<div class="w-full">
<h3 class="mb-8 text-xl text-center text-white">Image Preview Demo</h3>
<div class="w-full max-w-2xl p-8 mx-auto bg-white rounded-lg">
<div class="" x-data="imageData()">
<div x-show="previewUrl == ''">
<p class="text-center uppercase text-bold">
<label for="thumbnail" class="cursor-pointer">
Upload a file
<input type="file" name="thumbnail" id="thumbnail" class="hidden" @change="updatePreview()">
<div x-show="previewUrl !== ''">
<img :src="previewUrl" alt="" class="rounded">
<div class="">
<button type="button" class="" @click="clearPreview()">change</button>
<div class="mt-2 text-center text-white">
<a class="w-32 mx-2" href="">TailwindCSS</a>
<a class="w-32 mx-2" href="">AlpineJS</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment