feat(Thumbnail): Allow customResizer to be used

closes #24

README.md

@@ -819,6 +819,10 @@ The `<Thumbnail />` component allows you to easily render Fine Uploader generate
 
 ##### Properties
 
+- `customResizer(resizeInfo)` - An optional function that allows you to use a custom/3rd-library to resize thumbnail images. Documented further in [Fine Uploader's `drawThumbnail` API method documentation](https://docs.fineuploader.com/api/methods.html#drawThumbnail). See the second code example below for details.
+
+- `fromServer` - Specify whether the current file was set from [initial file](https://docs.fineuploader.com/branch/master/features/session.html)
+
 - `id` - The Fine Uploader ID of the submitted file. (required)
 
 - `maxSize` - Maps directly to the [`maxSize` parameter](http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail) of the Fine Uploader `drawThumbnail` API method. If not supplied a default value is used, which is exported as a named constant.
@@ -829,8 +833,6 @@ The `<Thumbnail />` component allows you to easily render Fine Uploader generate
 
 - `waitingPlaceholder` - A custom element to display while waiting for the thumbnail.
 
-- `fromServer` - Specify whether the current file was set from [initial file](https://docs.fineuploader.com/branch/master/features/session.html)
-
 Suppose you wanted to render a thumbnail for each file as new files are submitted to Fine Uploader. Your React component may look like this:
 
 Note: This assumes you have additional components or code to allow files to actually be submitted to Fine Uploader.
@@ -880,3 +882,62 @@ export default class FileListener extends Component {
     }
 }
 ```
+
+Suppose you want to override React Fine Uploader's thumbnail generation code (especially since it trades quality for speed). The below example uses the [Pica canvas resizing library](https://github.com/nodeca/pica) to generate much higher quality thumbnail images:
+
+```javascript
+import pica from 'pica/dist/pica'
+import React, { Component } from 'react'
+
+import FineUploaderTraditional from 'fine-uploader-wrappers'
+import Thumbnail from 'react-fine-uploader/thumbnail'
+
+const customResizer = resizeInfo => {
+    return new Promise(resolve => {
+        pica.resizeCanvas(resizeInfo.sourceCanvas, resizeInfo.targetCanvas, {}, resolve)
+    })
+}
+
+const uploader = new FineUploader({
+   options: {
+      request: {
+         endpoint: 'my/upload/endpoint'
+      }
+   }
+})
+
+export default class FileListener extends Component {
+    constructor() {
+        super()
+
+        this.state = {
+            submittedFiles: []
+        }
+    }
+
+    componentDidMount() {
+        uploader.on('submitted', id => {
+            const submittedFiles = this.state.submittedFiles
+
+            submittedFiles.push(id)
+            this.setState({ submittedFiles })
+        })
+    }
+
+    render() {
+        return (
+            <div>
+                {
+                    this.state.submittedFiles.map(id => (
+                        <Thumbnail customResizer={ !uploader.qq.ios() && customResizer }
+                                   id={ id }
+                                   uploader={ uploader }
+                        />
+                    ))
+                }
+            </div>
+        )
+    }
+}
+```
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fine-uploader",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "description": "React UI components for using Fine Uploader in a React-based project.",
   "author":     {
@@ -54,6 +54,7 @@
     "karma-sourcemap-loader": "0.3.7",
     "karma-spec-reporter": "0.0.30",
     "karma-webpack": "2.0.3",
+    "pica": "2.0.8",
     "react": "15.4.2",
     "react-addons-css-transition-group": "15.4.2",
     "react-addons-test-utils": "15.4.2",

src/test/manual/tester.jsx

@@ -1,3 +1,4 @@
+import pica from 'pica/dist/pica'
 import React, { Component } from 'react'
 
 import Gallery from 'lib/gallery'
@@ -59,7 +60,9 @@ class Tester extends Component {
         return (
             <div>
                 <h2>Traditional</h2>
-                <Gallery uploader={ traditionalUploader } />
+                <Gallery uploader={ traditionalUploader }
+                         thumbnail-customResizer={ !traditionalUploader.qq.ios() && customResizer }
+                />
 
                 <h2>S3</h2>
                 <Gallery uploader={ s3Uploader } />
@@ -68,4 +71,10 @@ class Tester extends Component {
     }
 }
 
+const customResizer = resizeInfo => {
+    return new Promise(resolve => {
+        pica.resizeCanvas(resizeInfo.sourceCanvas, resizeInfo.targetCanvas, {}, resolve)
+    })
+}
+
 export default Tester

src/test/unit/thumbnail/index.spec.jsx

@@ -25,8 +25,8 @@ describe('<Thumbnail />', () => {
             <Thumbnail id={ 3 } uploader={ uploader } />
         )
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
-        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, defaultMaxSize, undefined)
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeFalsy()
+        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent._canvas, defaultMaxSize, undefined, undefined)
     })
 
     it('renders thumbnail as canvas using passed size', () => {
@@ -37,8 +37,8 @@ describe('<Thumbnail />', () => {
             <Thumbnail id={ 3 } maxSize={ 333 } uploader={ uploader } />
         )
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
-        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333, undefined)
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeFalsy()
+        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent._canvas, 333, undefined, undefined)
     })
 
     it('renders thumbnail as canvas using passed thumbnail origin', () => {
@@ -49,8 +49,8 @@ describe('<Thumbnail />', () => {
             <Thumbnail id={ 3 } maxSize={ 333 } uploader={ uploader } fromServer={ true }/>
         )
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeFalsy()
-        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent.refs.canvas, 333, true)
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeFalsy()
+        expect(drawThumbnail).toHaveBeenCalledWith(3, ThumbnailComponent._canvas, 333, true, undefined)
     })
 
     it('renders default waiting placeholder until thumbnail generation is complete', () => {
@@ -61,7 +61,7 @@ describe('<Thumbnail />', () => {
         )
         const placeholderEls = TestUtils.scryRenderedDOMComponentsWithClass(ThumbnailComponent, `react-fine-uploader-thumbnail-${waitingStatus}`)
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeTruthy()
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeTruthy()
         expect(placeholderEls.length).toBe(1)
     })
 
@@ -86,7 +86,7 @@ describe('<Thumbnail />', () => {
         )
         const customWaitingThumbnailEl = TestUtils.findRenderedDOMComponentWithClass(ThumbnailComponent, 'custom-waiting-thumbnail')
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeTruthy()
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeTruthy()
         expect(customWaitingThumbnailEl).toBeDefined()
     })
 
@@ -99,7 +99,7 @@ describe('<Thumbnail />', () => {
         )
         const placeholderEls = TestUtils.scryRenderedDOMComponentsWithClass(ThumbnailComponent, `react-fine-uploader-thumbnail-${notAvailableStatus}`)
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeTruthy()
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeTruthy()
         expect(placeholderEls.length).toBe(1)
     })
 
@@ -133,7 +133,7 @@ describe('<Thumbnail />', () => {
         )
         const notAvailableSvgEl = TestUtils.findRenderedDOMComponentWithClass(ThumbnailComponent, 'not-available-svg')
 
-        expect(ThumbnailComponent.refs.canvas.hasAttribute('hidden')).toBeTruthy()
+        expect(ThumbnailComponent._canvas.hasAttribute('hidden')).toBeTruthy()
         expect(notAvailableSvgEl).toBeDefined()
     })
 })

src/thumbnail/index.jsx

@@ -11,6 +11,8 @@ export const waitingStatus = 'waiting'
 
 class Thumbnail extends Component {
     static propTypes = {
+        customResizer: PropTypes.func,
+        fromServer: PropTypes.bool,
         id: PropTypes.number.isRequired,
         maxSize: PropTypes.number,
         notAvailablePlaceholder: PropTypes.element,
@@ -33,9 +35,10 @@ class Thumbnail extends Component {
     componentDidMount() {
         this.props.uploader.methods.drawThumbnail(
             this.props.id,
-            this.refs.canvas,
+            this._canvas,
             this.props.maxSize,
-            this.props.fromServer
+            this.props.fromServer,
+            this.props.customResizer
         )
             .then(
                 () => {
@@ -62,7 +65,7 @@ class Thumbnail extends Component {
             <span className={ `react-fine-uploader-thumbnail-container ${customContainerClassName || ''}` }>
                 <canvas className={ `react-fine-uploader-thumbnail ${this.props.className || ''}` }
                         hidden={ !this.state.drawComplete || this._failure }
-                        ref='canvas'
+                        ref={ component => this._canvas = component }
                 />
 
                 { this._maybePlaceholder }