BookStack/resources/js/components/image-picker.js
2022-11-15 16:04:46 +00:00

57 lines
1.7 KiB
JavaScript

import {Component} from "./component";
export class ImagePicker extends Component {
setup() {
this.imageElem = this.$refs.image;
this.imageInput = this.$refs.imageInput;
this.resetInput = this.$refs.resetInput;
this.removeInput = this.$refs.removeInput;
this.resetButton = this.$refs.resetButton;
this.removeButton = this.$refs.removeButton || null;
this.defaultImage = this.$opts.defaultImage;
this.setupListeners();
}
setupListeners() {
this.resetButton.addEventListener('click', this.reset.bind(this));
if (this.removeButton) {
this.removeButton.addEventListener('click', this.removeImage.bind(this));
}
this.imageInput.addEventListener('change', this.fileInputChange.bind(this));
}
fileInputChange() {
this.resetInput.setAttribute('disabled', 'disabled');
if (this.removeInput) {
this.removeInput.setAttribute('disabled', 'disabled');
}
for (let file of this.imageInput.files) {
this.imageElem.src = window.URL.createObjectURL(file);
}
this.imageElem.classList.remove('none');
}
reset() {
this.imageInput.value = '';
this.imageElem.src = this.defaultImage;
this.resetInput.removeAttribute('disabled');
if (this.removeInput) {
this.removeInput.setAttribute('disabled', 'disabled');
}
this.imageElem.classList.remove('none');
}
removeImage() {
this.imageInput.value = '';
this.imageElem.classList.add('none');
this.removeInput.removeAttribute('disabled');
this.resetInput.setAttribute('disabled', 'disabled');
}
}