Skip to content

Instantly share code, notes, and snippets.

@vmitchell85

vmitchell85/imagePreview.html

Created March 5, 2020 15:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vmitchell85/55d212ab12a7654dbe18aed700a32fdb to your computer and use it in GitHub Desktop.
Save vmitchell85/55d212ab12a7654dbe18aed700a32fdb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
imagePreview.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script>
function imageData() {
return {
previewUrl: '',
updatePreview() {
var reader, files = document.getElementById('thumbnail').files;
reader = new FileReader();
reader.onload = (e) => {
this.previewUrl = e.target.result;
}
reader.readAsDataURL(files[0]);
},
clearPreview() {
document.getElementById('thumbnail').value = null;
this.previewUrl = '';
}
};
}
</script>
</head>
<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
</label>
<input type="file" name="thumbnail" id="thumbnail" class="hidden" @change="updatePreview()">
</p>
</div>
<div x-show="previewUrl !== ''">
<img :src="previewUrl" alt="" class="rounded">
<div class="">
<button type="button" class="" @click="clearPreview()">change</button>
</div>
</div>
</div>
</div>
<div class="mt-2 text-center text-white">
<a class="w-32 mx-2" href="https://tailwindcss.com/">TailwindCSS</a>
<a class="w-32 mx-2" href="https://github.com/alpinejs/alpine">AlpineJS</a>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment