1 import {Component} from './component';
3 export class ImagePicker extends Component {
6 this.imageElem = this.$refs.image;
7 this.imageInput = this.$refs.imageInput;
8 this.resetInput = this.$refs.resetInput;
9 this.removeInput = this.$refs.removeInput;
10 this.resetButton = this.$refs.resetButton;
11 this.removeButton = this.$refs.removeButton || null;
13 this.defaultImage = this.$opts.defaultImage;
15 this.setupListeners();
19 this.resetButton.addEventListener('click', this.reset.bind(this));
21 if (this.removeButton) {
22 this.removeButton.addEventListener('click', this.removeImage.bind(this));
25 this.imageInput.addEventListener('change', this.fileInputChange.bind(this));
29 this.resetInput.setAttribute('disabled', 'disabled');
30 if (this.removeInput) {
31 this.removeInput.setAttribute('disabled', 'disabled');
34 for (const file of this.imageInput.files) {
35 this.imageElem.src = window.URL.createObjectURL(file);
37 this.imageElem.classList.remove('none');
41 this.imageInput.value = '';
42 this.imageElem.src = this.defaultImage;
43 this.resetInput.removeAttribute('disabled');
44 if (this.removeInput) {
45 this.removeInput.setAttribute('disabled', 'disabled');
47 this.imageElem.classList.remove('none');
51 this.imageInput.value = '';
52 this.imageElem.classList.add('none');
53 this.removeInput.removeAttribute('disabled');
54 this.resetInput.setAttribute('disabled', 'disabled');