Add debug and fix image preview

isysd-mirror · Oct 4, 2018 · 35b6a30 · 35b6a30
1 parent 62eff90
commit 35b6a30
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@advancedalgos/web-components",
   "description": "Shared web components for Advanced Algos modules",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": "Advanced Algos, Ltd",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {

diff --git a/src/image-upload/components/ImagePreview.js b/src/image-upload/components/ImagePreview.js
@@ -6,8 +6,8 @@ import Button from '@material-ui/core/Button'
 
 const styles = theme => ({
   imagePreview: {
-    width: 100,
-    height: 100
+    maxWidth: '100%',
+    height: 'auto'
   }
 })
 

diff --git a/src/image-upload/index.js b/src/image-upload/index.js
@@ -19,7 +19,9 @@ const styles = theme => ({
 })
 
 // placeholder image if no existing image
-const placeHolder = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EAvatar%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'
+const placeHolder = fileName => {
+  return `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3E${fileName}%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E`
+}
 
 const cropPreviewBoxDefault = {
   width: 350,
@@ -57,6 +59,7 @@ class ImageUpload extends Component {
     this.handleCancel = this.handleCancel.bind(this)
     this.saveImage = this.saveImage.bind(this)
     this.cropper = React.createRef()
+    this.debug = this.props.debug
 
     let cropConfig = props.cropContainerConfig !== undefined ? props.cropContainerConfig : cropConfigDefault
     let saveConfig = props.saveImageConfig !== undefined ? props.saveImageConfig : saveImageConfigDefault
@@ -80,14 +83,16 @@ class ImageUpload extends Component {
     const {
       classes,
       existingImage,
-      cropRatio
+      cropRatio,
+      fileName
     } = this.props
 
     let image = null
+    if (this.debug) console.log('Image Upload existingImage: ', existingImage)
     if (existingImage !== undefined && existingImage !== null) {
       image = existingImage
     } else {
-      image = placeHolder
+      image = placeHolder(fileName)
     }
 
     return (
@@ -169,7 +174,7 @@ class ImageUpload extends Component {
 
     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
+    const image = `${AzureStorageUrl}${containerName}/${fileName}`
     handleUrl(image) // pass image URL up to be save to DB
     this.setState({ event: 'uploaded', uploadedImage: image })
     return image
@@ -206,7 +211,8 @@ ImageUpload.propTypes = {
   existingImage: PropTypes.string, // image url of existing image (optional)
   handleUrl: PropTypes.func.isRequired, // function that handles uploaded image file url
   AzureSASURL: PropTypes.string.isRequired,
-  AzureStorageUrl: PropTypes.string.isRequired
+  AzureStorageUrl: PropTypes.string.isRequired,
+  debug: PropTypes.bool
 }
 
 export default withStyles(styles)(ImageUpload)