Connect image-editor and Dashboard, try rotation

package-lock.json

@@ -7608,6 +7608,13 @@
         "preact": "8.2.9"
       }
     },
+    "@uppy/image-editor": {
+      "version": "file:packages/@uppy/image-editor",
+      "requires": {
+        "cropperjs": "1.5.6",
+        "preact": "8.2.9"
+      }
+    },
     "@uppy/informer": {
       "version": "file:packages/@uppy/informer",
       "requires": {

package.json

@@ -72,7 +72,7 @@
     "@uppy/utils": "file:packages/@uppy/utils",
     "@uppy/webcam": "file:packages/@uppy/webcam",
     "@uppy/xhr-upload": "file:packages/@uppy/xhr-upload",
-    "cropperjs": "^1.5.6",
+    "@uppy/image-editor": "file:packages/@uppy/image-editor",
     "remark-lint-uppy": "file:private/remark-lint-uppy",
     "uppy": "file:packages/uppy",
     "uppy.io": "file:website"

packages/@uppy/dashboard/src/components/EditorPanel.js

@@ -1,6 +1,8 @@
 const { h } = require('preact')
 
 function EditorPanel (props) {
+  const file = this.props.files[this.props.fileCardFor]
+
   return (
     <div
       class="uppy-DashboardContent-panel"
@@ -10,7 +12,9 @@ function EditorPanel (props) {
     >
       <div class="uppy-DashboardContent-bar">
         <div class="uppy-DashboardContent-title" role="heading" aria-level="1">
-          123
+          {props.i18nArray('editing', {
+            file: <span class="uppy-DashboardContent-titleFile">{file.meta ? file.meta.name : file.name}</span>
+          })}
         </div>
         <button
           class="uppy-DashboardContent-back"

packages/@uppy/dashboard/src/components/FileCard/index.js

@@ -111,7 +111,17 @@ class FileCard extends Component {
 
         <div class="uppy-Dashboard-FileCard-inner">
           <div class="uppy-Dashboard-FileCard-preview" style={{ backgroundColor: getFileTypeIcon(file.type).color }}>
-            <FilePreview file={file} uppy={this.props.uppy} />
+            <FilePreview
+              file={file}
+              uppy={this.props.uppy}
+              openFileEditor={this.props.openFileEditor}
+            />
+            <button
+              class="uppy-u-reset uppy-c-btn"
+              onClick={() => this.props.openFileEditor(file)}
+            >
+              Edit
+            </button>
           </div>
 
           <div class="uppy-Dashboard-FileCard-info">

packages/@uppy/dashboard/src/index.js

@@ -204,6 +204,7 @@ module.exports = class Dashboard extends Plugin {
       activePickerPanel: false,
       showAddFilesPanel: false,
       activeOverlayType: null,
+      fileCardFor: null,
       showFileEditor: false
     }
 
@@ -234,6 +235,24 @@ module.exports = class Dashboard extends Plugin {
     })
   }
 
+  openFileEditor = (file) => {
+    const { targets } = this.getPluginState()
+
+    this.setPluginState({
+      showFileEditor: true
+    })
+
+    const editors = this._getEditors(targets)
+    editors.forEach((editor) => {
+      const editorPlugin = this.uppy.getPlugin(editor.id)
+      editorPlugin.selectFile(file)
+      setTimeout(editorPlugin.initEditor, 4)
+      setTimeout(() => {
+        editorPlugin.edit()
+      }, 5000)
+    })
+  }
+
   openModal = () => {
     const { promise, resolve } = createPromise()
     // save scroll position
@@ -870,6 +889,7 @@ module.exports = class Dashboard extends Plugin {
       toggleAddFilesPanel: this.toggleAddFilesPanel,
       showAddFilesPanel: pluginState.showAddFilesPanel,
       saveFileCard: this.saveFileCard,
+      openFileEditor: this.openFileEditor,
       width: this.opts.width,
       height: this.opts.height,
       showLinkToFileUploadResult: this.opts.showLinkToFileUploadResult,

packages/@uppy/image-editor/package.json

@@ -23,7 +23,8 @@
     "url": "git+https://github.com/transloadit/uppy.git"
   },
   "dependencies": {
-    "preact": "8.2.9"
+    "preact": "8.2.9",
+    "cropperjs": "1.5.6"
   },
   "peerDependencies": {
     "@uppy/core": "^1.0.0"

packages/@uppy/image-editor/src/index.js

@@ -25,10 +25,6 @@ module.exports = class ImageEditor extends Plugin {
     this.opts = { ...defaultOptions, ...opts }
 
     // this.i18nInit()
-
-    this.initEditor = this.initEditor.bind(this)
-    this.setCurrentImage = this.setCurrentImage.bind(this)
-    this.render = this.render.bind(this)
   }
 
   // setOptions (newOpts) {
@@ -43,41 +39,49 @@ module.exports = class ImageEditor extends Plugin {
   //   this.setPluginState() // so that UI re-renders and we see the updated locale
   // }
 
-  initEditor () {
+  edit = () => {
     const { currentImage } = this.getPluginState()
 
-    if (currentImage.preview) {
-      const cropper = new Cropper(this.imgElement, {
-        aspectRatio: 16 / 9,
-        crop (event) {
-          console.log(event.detail.x)
-          console.log(event.detail.y)
-          console.log(event.detail.width)
-          console.log(event.detail.height)
-          console.log(event.detail.rotate)
-          console.log(event.detail.scaleX)
-          console.log(event.detail.scaleY)
-        }
+    this.cropper.rotate(90)
+    this.cropper.getCroppedCanvas().toBlob((blob) => {
+      this.uppy.setFileState(currentImage.id, {
+        data: blob,
+        size: blob.size,
+        preview: null
+      })
+      const updatedFile = this.uppy.getFile(currentImage.id)
+      this.uppy.emit('thumbnail:request', updatedFile)
+      this.setPluginState({
+        currentImage: updatedFile
       })
+      this.cropper.destroy()
+    })
+  }
 
-      setTimeout(() => {
-        cropper.getCroppedCanvas().toBlob((blob) => {
-          console.log(blob)
-          this.uppy.setFileState(currentImage.id, {
-            data: blob,
-            preview: null
-          })
-          const updatedFile = this.uppy.getFile(currentImage.id)
-          this.uppy.emit('thumbnail:request', updatedFile)
-        })
-      }, 5000)
+  initEditor = () => {
+    console.log(this.imgElement)
+    const { currentImage } = this.getPluginState()
+
+    if (currentImage.preview) {
+      this.cropper = new Cropper(this.imgElement, {
+        aspectRatio: 16 / 9
+        // crop (event) {
+        //   console.log(event.detail.x)
+        //   console.log(event.detail.y)
+        //   console.log(event.detail.width)
+        //   console.log(event.detail.height)
+        //   console.log(event.detail.rotate)
+        //   console.log(event.detail.scaleX)
+        //   console.log(event.detail.scaleY)
+        // }
+      })
     }
   }
 
-  setCurrentImage (file) {
-    const firstFile = this.uppy.getFiles()[0]
+  selectFile = (file) => {
+    console.log('set current image!', file)
     this.setPluginState({
-      currentImage: firstFile
+      currentImage: file
     })
   }
 
@@ -96,19 +100,19 @@ module.exports = class ImageEditor extends Plugin {
     this.unmount()
   }
 
-  render (state) {
+  render () {
     const { currentImage } = this.getPluginState()
-
     if (currentImage === null) {
       return
     }
+    const imageURL = URL.createObjectURL(currentImage.data)
 
     return (
       <div class="uppy-ImageCropper">
         <img
           class="uppy-ImageCropper-image"
           alt={currentImage.name}
-          src={currentImage.preview}
+          src={imageURL}
           ref={(ref) => { this.imgElement = ref }}
         />
       </div>

packages/@uppy/image-editor/src/style.scss

@@ -1,4 +1,8 @@
 @import '@uppy/core/src/_utils.scss';
 @import '@uppy/core/src/_variables.scss';
-@import 'cropper.scss';
+@import './cropper.scss';
 
+.uppy-ImageCropper-image {
+  max-width: 100%;
+  max-height: 100%;
+}