☒ 


Before the file upload to aws, the images have croppied by canvas.

image could  transform by html canvas without server, even network.

npm package croppie (https://foliotek.github.io/Croppie/ ) encapsulates the  croppie functions 



```js

// when user selected a image to file input, trigger this action 
editPhoto(e) {
    e.preventDefault();
    this.editingPhoto = true

    this._showEditPanel()

    this.croppie =  new Croppie(this.croppiePanelTarget, {
      url: this.imageTarget.src,
    })
  }

// crop confirm button action 
  buildNewPhoto(e){
    e.preventDefault();
    this.editingPhoto  = false
    this.croppie.result('blob').then((blob) => {
      this.addImage(new File([blob], 'newphoto'))
      this.croppie.destroy()
    });

    this._showOperationsPanel()

  }

// ...
addImage(file){
    this.imageFile = file;
    let that = this;
    var reader = new FileReader();
    reader.onload = (e1) => {
      that.imageTarget.src = e1.target.result
    }
    reader.readAsDataURL(file)
    this.imageTarget.classList.remove("hidden")
  }

```