Skip to content

Instantly share code, notes, and snippets.

@TiagoSilvaPereira
Created February 13, 2021 18:24
Show Gist options
  • Save TiagoSilvaPereira/24206c2b7077a2635649987c4efd6f9b to your computer and use it in GitHub Desktop.
Save TiagoSilvaPereira/24206c2b7077a2635649987c4efd6f9b to your computer and use it in GitHub Desktop.
Alpine.js image viewer with fileChosen method
function imageViewer() {
return {
imageUrl: '',
fileChosen(event) {
this.fileToDataUrl(event, src => this.imageUrl = src)
},
fileToDataUrl(event, callback) {
if (! event.target.files.length) return
let file = event.target.files[0],
reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = e => callback(e.target.result)
},
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment