avatar upload works

src/components/image_cropper/image_cropper.js

@@ -10,14 +10,6 @@ library.add(
 
 const ImageCropper = {
   props: {
-    trigger: {
-      type: [String, window.Element],
-      required: true
-    },
-    submitHandler: {
-      type: Function,
-      required: true
-    },
     mimes: {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
@@ -39,17 +31,7 @@ const ImageCropper = {
       submitting: false
     }
   },
-  computed: {
-    saveText () {
-      return this.saveButtonLabel || this.$t('image_cropper.save')
-    },
-    saveWithoutCroppingText () {
-      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
-    },
-    cancelText () {
-      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    }
-  },
+  emits: ['submit'],
   methods: {
     destroy () {
       this.$refs.input.value = ''
@@ -65,20 +47,15 @@ const ImageCropper = {
       } else {
         cropperPromise = Promise.resolve()
       }
+
       cropperPromise.then(canvas => {
-        this.submitHandler(canvas, this.file)
-            .then(() => this.destroy())
-            .finally(() => {
-              this.submitting = false
-            })
+        this.$emit('submit', { canvas, file: this.file })
+        this.submitting = false
       })
     },
     pickImage () {
       this.$refs.input.click()
     },
-    getTriggerDOM () {
-      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
-    },
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
@@ -117,23 +94,11 @@ const ImageCropper = {
     }
   },
   mounted () {
-    // listen for click event on trigger
-    const trigger = this.getTriggerDOM()
-    if (!trigger) {
-      this.$emit('error', 'No image make trigger found.', 'user')
-    } else {
-      trigger.addEventListener('click', this.pickImage)
-    }
     // listen for input file changes
     const fileInput = this.$refs.input
     fileInput.addEventListener('change', this.readFile)
   },
   beforeUnmount: function () {
-    // remove the event listeners
-    const trigger = this.getTriggerDOM()
-    if (trigger) {
-      trigger.removeEventListener('click', this.pickImage)
-    }
     const fileInput = this.$refs.input
     fileInput.removeEventListener('change', this.readFile)
   }

src/components/image_cropper/image_cropper.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="image-cropper">
-    <div v-if="dataUrl">
+    <div class="image">
       <cropper-canvas
         ref="cropperCanvas"
         background
         class="image-cropper-canvas"
-        height="25em"
+        height="100%"
       >
         <cropper-image
+          v-if="dataUrl"
           ref="cropperImage"
           :src="dataUrl"
           alt="Picture"
@@ -47,41 +48,13 @@
           <cropper-handle action="sw-resize" />
         </cropper-selection>
       </cropper-canvas>
-      <div class="image-cropper-buttons-wrapper">
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit()"
-          v-text="saveText"
-        />
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="destroy"
-          v-text="cancelText"
-        />
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit(false)"
-          v-text="saveWithoutCroppingText"
-        />
-        <FAIcon
-          v-if="submitting"
-          spin
-          icon="circle-notch"
-        />
-      </div>
     </div>
     <input
       ref="input"
       type="file"
       class="input image-cropper-img-input"
       :accept="mimes"
-    >
+    />
   </div>
 </template>
 
@@ -89,13 +62,15 @@
 
 <style lang="scss">
 .image-cropper {
-  &-img-input {
-    display: none;
+  display: flex;
+  flex-direction: column;
+
+  &-canvas, .image {
+    height: 100%;
   }
 
-  &-canvas {
-    height: 25em;
-    width: 25em;
+  & &-img-input {
+    display: none;
   }
 
   &-buttons-wrapper {