cropping images and uploading multiple versions

1 files changed, 102 insertions, 38 deletions

diff --git a/animism-align/frontend/views/media/components/media.formImage.js b/animism-align/frontend/views/media/components/media.formImage.js
index d86a6d8..23fd7e7 100644
--- a/animism-align/frontend/views/media/components/media.formImage.js
+++ b/animism-align/frontend/views/media/components/media.formImage.js
@@ -2,14 +2,22 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
 import { session } from '../../../session'
-import { capitalize } from '../../../util'
+import actions from '../../../actions'
+import { capitalize, preloadImage, cropImage } from '../../../util'
 
-import { TextInput, LabelDescription, FileInputField, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { renderThumbnail } from '../../../common/upload.helpers'
 
 import ImageSelection from './media.formImageSelection'
 
+const DISPLAY_SIZE = 1024
+const DISPLAY_QUALITY= 80
+const THUMBNAIL_SIZE = 320
+const THUMBNAIL_QUALITY = 80
+
 export default class MediaImageForm extends Component {
   state = {
+    img: null,
   }
 
   constructor(props) {
@@ -18,6 +26,17 @@ export default class MediaImageForm extends Component {
     this.handleChange = this.handleChange.bind(this)
     this.handleSettingsChange = this.handleSettingsChange.bind(this)
     this.handleUpload = this.handleUpload.bind(this)
+    this.handleCrop = this.handleCrop.bind(this)
+    this.replaceTaggedSize = this.replaceTaggedSize.bind(this)
+    this.uploadTaggedSize = this.uploadTaggedSize.bind(this)
+  }
+
+  componentDidMount() {
+    // this.setState({ })
+    if (this.props.data.settings.fullsize) {
+      preloadImage(this.props.data.settings.fullsize.url)
+      .then(img => this.setState({ img }))
+    }
   }
 
   handleChange(e) {
@@ -33,64 +52,109 @@ export default class MediaImageForm extends Component {
     this.props.onSettingsChange(name, value)
   }
 
-  handleUpload(image) {
-    // upload fullsize
-    this.uploadFullSize(image)
-    .then(res => {
-      this.props.onSettingsChange('fullsize', data.res)
-      setTimeout(() => {
-      })     
+  handleUpload({ file, img, canvas, blob }) {
+    // sizes: fullsize, display, thumbnail
+    this.replaceTaggedSize(file, 'fullsize')
+    .then(data => {
+      this.setState({ img })
+      this.props.onSettingsChange('multiple', {
+        fullsize: data,
+        crop: {},
+      })
+      return this.replaceTaggedSize(blob, 'display', file.name)
+    }).then(data => {
+      this.props.onSettingsChange('multiple', {
+        display: data,
+      })
+      this.uploadThumbnail(img)
     })
   }
 
-  uploadFullSize(image) {
-    actions.upload.upload({
-      image,
-      tag: 'fullsize',
-      username: 'animism',
-    }).then(data => {
-      console.log(data.res)
-      return data.res
-    })
+  uploadThumbnail(img) {
+    const { fn } = this.props.data.settings.fullsize
+    const thumbnailCanvas = renderThumbnail(img, { maxSide: THUMBNAIL_SIZE })
+    thumbnailCanvas.toBlob(thumbnail => {
+      this.replaceTaggedSize(thumbnail, 'thumbnail', fn).then(data => {
+        this.props.onSettingsChange('multiple', {
+          thumbnail: data,
+        })
+      })
+    }, 'image/jpeg', THUMBNAIL_QUALITY)
   }
-  
-  uploadThumbnail(image) {
-    actions.upload.upload({
-      image,
-      tag: 'thumbnail',
-      username: 'animism',
-    }).then(data => {
-      console.log(data.res)
-    })
+
+  replaceTaggedSize(image, tag, fn) {
+    // when we upload an image, if the image already exists in this "position"
+    // on the record, we should also delete it
+    if (this.props.data.settings[tag] && this.props.data.settings[tag].id) {
+      return actions.upload.destroy(this.props.data.settings[tag])
+      .then(() => {
+        return this.uploadTaggedSize(image, tag, fn)
+      })
+    }
+    return this.uploadTaggedSize(image, tag, fn)
   }
 
-  uploadCrop(image) {
-    actions.upload.upload({
+  uploadTaggedSize(image, tag, fn) {
+    const uploadData = {
       image,
-      tag: 'crop',
+      tag,
       username: 'animism',
-    }).then(data => {
-      console.log(data.res)
-      this.props.onSelect('url', data.res.url)
+    }
+    if (fn) {
+      uploadData['__image_filename'] = fn
+    }
+    // console.log(uploadData)
+    return actions.upload.upload(uploadData).then(data => {
+      // console.log(data)
+      return data.res
     })
   }
 
+  handleCrop(crop) {
+    // when cropping an image, re-upload the display image and thumbnail
+    // console.log(crop)
+    cropImage(this.state.img, crop, DISPLAY_SIZE)
+    .then(canvas => {
+      canvas.toBlob(blob => {
+        // console.log(canvas, canvas.width, canvas.height, blob)
+        this.replaceTaggedSize(blob, 'display', this.props.data.settings.fullsize.fn)
+        .then(data => {
+          this.props.onSettingsChange('multiple', {
+            crop,
+            display: data,
+          })
+          this.uploadThumbnail(canvas)
+        })
+      }, 'image/jpeg', DISPLAY_QUALITY)
+    })
+  }
+  
   render() {
     const { data } = this.props
-    console.log(data)
+    // console.log(data)
     return (
       <div className='imageForm'>
         {!data.url &&
-          <FileInputField
-            title='Upload image'
-            onChange={this.handleUpload}
-          />
+          <label className={'text fileInput'}>
+            <span>{"Upload image"}</span>
+            <div className="row">
+              <button>
+                {"Choose image"}
+              </button>
+              <UploadImage
+                onUpload={this.handleUpload}
+                maxSide={DISPLAY_SIZE}
+                quality={DISPLAY_QUALITY}
+              />
+            </div>
+          </label>
         }
         {data.settings.fullsize &&
           <div>
             <ImageSelection
               url={data.settings.fullsize.url}
               crop={data.settings.crop}
+              onCrop={this.handleCrop}
             />
           </div>
         }