Move handleCrop to CropperDialog

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@advancedalgos/web-components",
   "description": "Shared web components for Advanced Algos modules",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "author": "Advanced Algos, Ltd",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -27,9 +27,9 @@
     "build-storybook": "build-storybook"
   },
   "peerDependencies": {
-      "prop-types": "^15.6.2",
-      "react": "^16.5.0",
-      "react-dom": "^16.5.0"
+    "prop-types": "^15.6.2",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0"
   },
   "dependencies": {
     "@azure/storage-blob": "^10.1.0-preview",

src/image-upload/components/CropperDialog.js

@@ -21,6 +21,13 @@ const styles = theme => ({
 })
 
 class CropperDialog extends Component {
+  constructor (props) {
+    super(props)
+
+    this.handleCrop = this.handleCrop.bind(this)
+    this.cropper = React.createRef()
+  }
+
   render () {
     const { classes, open, handleClose, imgSrc, handleCrop, handleCancel, cropperRef } = this.props
     console.log(cropperRef)
@@ -41,7 +48,7 @@ class CropperDialog extends Component {
                   src={imgSrc}
                   originX={100}
                   originY={100}
-                  ref={ref => { this.cropper = ref }}
+                  ref={this.cropper}
                   ratio={1}
                 />
               )}
@@ -52,7 +59,7 @@ class CropperDialog extends Component {
               Cancel
             </Button>
             <Button
-              onClick={(e) => handleCrop(e, this.cropper)}
+              onClick={this.handleCrop}
               color='primary'
             >
               Crop Image
@@ -62,6 +69,12 @@ class CropperDialog extends Component {
       </Dialog>
     )
   }
+
+  async handleCrop () {
+    console.log('CropperDialog handleCrop: ', this.cropper.current)
+    const cropped = this.cropper.current.crop()
+    this.props.handleCrop(cropped)
+  }
 }
 
 CropperDialog.propTypes = {

src/image-upload/index.js

@@ -144,10 +144,8 @@ class ImageUpload extends Component {
     }
   }
 
-  async handleCrop (e, cropper) {
-    e.preventDefault()
-    console.log('handleCrop: ', cropper)
-    const cropped = cropper.crop()
+  async handleCrop (cropped) {
+    console.log('handleCrop', this.cropped)
     const croppedBlob = await imgSrcToBlob(cropped, 'image/png', 'Anonymous')
     let resizedBlob = await readAndCompressImage(croppedBlob, this.saveConfig)
 
@@ -167,7 +165,7 @@ class ImageUpload extends Component {
     const containerURL = Azure.ContainerURL.fromServiceURL(serviceURL, containerName)
     const blockBlobURL = Azure.BlockBlobURL.fromContainerURL(containerURL, fileName)
 
-    await Azure.uploadBrowserDataToBlockBlob(Azure.Aborter.None, this.state.cropped, blockBlobURL)
+    await Azure.uploadBrowserDataToBlockBlob(Azure.Aborter.None, this.state.editedImage, blockBlobURL)
 
     const image = `${AzureStorageUrl}${containerName}/${fileName}?${Math.random()}` // random number keeps browser from using cached version of existing image
     handleUrl(image) // pass image URL up to be save to DB