BookStack Code Mirror - bookstack/blob - resources/js/components/image-picker.js

   1 import {Component} from "./component";
   2
   3 export class ImagePicker extends Component {
   4
   5     setup() {
   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;
  12
  13         this.defaultImage = this.$opts.defaultImage;
  14
  15         this.setupListeners();
  16     }
  17
  18     setupListeners() {
  19         this.resetButton.addEventListener('click', this.reset.bind(this));
  20
  21         if (this.removeButton) {
  22             this.removeButton.addEventListener('click', this.removeImage.bind(this));
  23         }
  24
  25         this.imageInput.addEventListener('change', this.fileInputChange.bind(this));
  26     }
  27
  28     fileInputChange() {
  29         this.resetInput.setAttribute('disabled', 'disabled');
  30         if (this.removeInput) {
  31             this.removeInput.setAttribute('disabled', 'disabled');
  32         }
  33
  34         for (let file of this.imageInput.files) {
  35             this.imageElem.src = window.URL.createObjectURL(file);
  36         }
  37         this.imageElem.classList.remove('none');
  38     }
  39
  40     reset() {
  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');
  46         }
  47         this.imageElem.classList.remove('none');
  48     }
  49
  50     removeImage() {
  51         this.imageInput.value = '';
  52         this.imageElem.classList.add('none');
  53         this.removeInput.removeAttribute('disabled');
  54         this.resetInput.setAttribute('disabled', 'disabled');
  55     }
  56
  57 }