to avoid image crop on server, 

we can crop image first, then upload the cropped image.

when file input selected, we can read the the blob of the file

croperjs could get cropped image blob by `cropper.getCroppedCanvas().toBlob`

then upload the blob using active storage.

 ☒ 


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")
  }

```