Use FileInput in thumbnails test

packages/@uppy/thumbnail-generator/src/index.js

@@ -35,20 +35,21 @@ module.exports = class ThumbnailGenerator extends Plugin {
    */
   createThumbnail (file, targetWidth) {
     const originalUrl = URL.createObjectURL(file.data)
+    const revoke = () => URL.revokeObjectURL(originalUrl)
     const onload = new Promise((resolve, reject) => {
       const image = new Image()
       image.src = originalUrl
       image.onload = () => {
-        URL.revokeObjectURL(originalUrl)
         resolve(image)
       }
       image.onerror = () => {
         // The onerror event is totally useless unfortunately, as far as I know
-        URL.revokeObjectURL(originalUrl)
         reject(new Error('Could not create thumbnail'))
       }
     })
 
+    onload.then(revoke, revoke)
+
     return onload
       .then(image => {
         const targetHeight = this.getProportionalHeight(image, targetWidth)
@@ -175,6 +176,7 @@ module.exports = class ThumbnailGenerator extends Plugin {
         .then(() => this.processQueue())
     } else {
       this.queueProcessing = false
+      this.uppy.emit('thumbnail:ready')
     }
   }
 
@@ -183,9 +185,11 @@ module.exports = class ThumbnailGenerator extends Plugin {
       return this.createThumbnail(file, this.opts.thumbnailWidth)
         .then(preview => {
           this.setPreviewURL(file.id, preview)
+          this.uppy.emit('thumbnail:generated', file, preview)
         })
         .catch(err => {
           console.warn(err.stack || err.message)
+          this.uppy.emit('thumbnail:error', file, err)
         })
     }
     return Promise.resolve()

test/endtoend/thumbnails/main.js

@@ -1,7 +1,8 @@
 require('es6-promise/auto')
 require('whatwg-fetch')
 const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
+const ThumbnailGenerator = require('@uppy/thumbnail-generator')
+const FileInput = require('@uppy/file-input')
 
 const uppyThumbnails = Uppy({
   id: 'uppyThumbnails',
@@ -9,7 +10,13 @@ const uppyThumbnails = Uppy({
   debug: true
 })
 
-uppyThumbnails.use(Dashboard, {
-  target: '#uppyThumbnails',
-  inline: true
+uppyThumbnails.use(ThumbnailGenerator, {})
+uppyThumbnails.use(FileInput, { target: '#uppyThumbnails', pretty: false })
+
+uppyThumbnails.on('thumbnail:generated', (file) => {
+  const img = new Image()
+  img.src = file.preview
+
+  document.body.appendChild(img)
 })
+window.ready = new Promise((resolve) => uppyThumbnails.on('thumbnail:ready', resolve))

test/endtoend/thumbnails/test.js

@@ -11,17 +11,17 @@ const images = [
   path.join(__dirname, '../../resources/kodim23.png')
 ]
 
-describe.only('Thumbnail generation through the Dashboard', () => {
+describe.only('ThumbnailGenerator', () => {
   beforeEach(() => {
     browser.url(testURL)
   })
 
-  it('should generate thumbnails', () => {
-    $('#uppyThumbnails .uppy-Dashboard-input').waitForExist()
+  it('should generate thumbnails for images', () => {
+    $('#uppyThumbnails .uppy-FileInput-input').waitForExist()
 
     if (supportsChooseFile()) {
       for (const img of images) {
-        browser.chooseFile('#uppyThumbnails .uppy-Dashboard-input', img)
+        browser.chooseFile('#uppyThumbnails .uppy-FileInput-input', img)
       }
     } else {
       for (const img of images) {
@@ -34,6 +34,7 @@ describe.only('Thumbnail generation through the Dashboard', () => {
         )
       }
     }
+
     browser.pause(20 * 1000)
   })
 })