1 files changed, 74 insertions, 0 deletions
diff --git a/animism-align/frontend/app/common/uploadImage.component.js b/animism-align/frontend/app/common/uploadImage.component.js
new file mode 100644
index 0000000..8048c8b
--- /dev/null
+++ b/animism-align/frontend/app/common/uploadImage.component.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+
+import { renderThumbnail } from 'app/common/upload.helpers'
+
+export default class UploadImageComponent extends Component {
+  constructor(props) {
+    super(props)
+    document.body.addEventListener("dragover", this.dragOver.bind(this))
+    document.body.addEventListener("dragleave", this.dragLeave.bind(this))
+    document.body.addEventListener("drop", this.upload.bind(this))
+  }
+  
+  dragOver(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    document.body.className = 'dragging'
+  }
+
+  dragLeave(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    document.body.className = ''
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.match('image.*')) break
+    }
+    if (!file) {
+      console.log('No file specified')
+      return
+    }
+    const fr = new FileReader()
+    fr.onload = fileReaderEvent => {
+      fr.onload = null
+      const img = new Image()
+      img.onload = () => {
+        img.onload = null
+        this.resizeAndUpload(file, img)
+      }
+      img.src = fileReaderEvent.target.result
+    }
+    fr.readAsDataURL(file)
+  }
+
+  resizeAndUpload(file, img) {
+    const canvas = renderThumbnail(img, this.props)
+    canvas.toBlob(blob => {
+      this.props.onUpload({ file, img, canvas, blob, freshen: true })
+    }, 'image/jpeg', this.props.quality || 80)
+  }
+
+  render() {
+    return (
+      <div className='uploadButton'>
+        <input
+          type="file"
+          accept="image/*"
+          onChange={this.upload.bind(this)}
+          required={this.props.required}
+        />
+        <div className='dragCurtain'>
+          <div className='dragLabel'>Drop image here</div>
+        </div>
+      </div>
+    )
+  }
+}