Support for png thumbnails (#2603)

* Add support for png thumbnails

* Add documentation

* Update thumbnail-generator.md

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

@@ -115,6 +115,7 @@ module.exports = class Dashboard extends Plugin {
       width: 750,
       height: 550,
       thumbnailWidth: 280,
+      thumbnailType: 'image/jpeg',
       waitForThumbnailsBeforeUpload: false,
       defaultPickerIcon,
       showLinkToFileUploadResult: true,
@@ -1008,6 +1009,7 @@ module.exports = class Dashboard extends Plugin {
       this.uppy.use(ThumbnailGenerator, {
         id: `${this.id}:ThumbnailGenerator`,
         thumbnailWidth: this.opts.thumbnailWidth,
+        thumbnailType: this.opts.thumbnailType,
         waitForThumbnailsBeforeUpload: this.opts.waitForThumbnailsBeforeUpload,
         // If we don't block on thumbnails, we can lazily generate them
         lazy: !this.opts.waitForThumbnailsBeforeUpload

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

@@ -21,6 +21,7 @@ module.exports = class ThumbnailGenerator extends Plugin {
     this.queue = []
     this.queueProcessing = false
     this.defaultThumbnailDimension = 200
+    this.thumbnailType = this.opts.thumbnailType || 'image/jpeg'
 
     this.defaultLocale = {
       strings: {
@@ -92,7 +93,7 @@ module.exports = class ThumbnailGenerator extends Plugin {
         const dimensions = this.getProportionalDimensions(image, targetWidth, targetHeight, orientation.deg)
         const rotatedImage = this.rotateImage(image, orientation)
         const resizedImage = this.resizeImage(rotatedImage, dimensions.width, dimensions.height)
-        return this.canvasToBlob(resizedImage, 'image/jpeg', 80)
+        return this.canvasToBlob(resizedImage, this.thumbnailType, 80)
       })
       .then(blob => {
         // bug in the compatibility data

website/src/docs/thumbnail-generator.md

@@ -49,6 +49,7 @@ uppy.use(ThumbnailGenerator, {
   id: 'ThumbnailGenerator',
   thumbnailWidth: 200,
   thumbnailHeight: 200,
+  thumbnailType: 'image/jpeg',
   waitForThumbnailsBeforeUpload: false
 })
 ```
@@ -77,6 +78,10 @@ If both width and height are given, only width is taken into account.
 >
 > See issue [#979](https://github.com/transloadit/uppy/issues/979) and [#1096](https://github.com/transloadit/uppy/pull/1096) for details on this feature.
 
+### `thumbnailtype: 'image/jpeg'`
+
+MIME type of the resulting thumbnail. Default thumbnail MIME type is `image/jpeg`. This is useful if you want to support transparency in your thumbnails by switching to `image/png`.
+
 ### `waitForThumbnailsBeforeUpload: false`
 
 Whether to wait for all thumbnails to be ready before starting the upload. If set to `true`, Thumbnail Generator will invoke Uppy’s internal processing stage and wait for `thumbnail:all-generated` event, before proceeding to the uploading stage.