@uppy/compressor: ignore remote files, calculate savings correctly (#3578)

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

@@ -46,8 +46,9 @@ export default class Compressor extends BasePlugin {
       async (file) => {
         try {
           const compressedBlob = await this.compress(file.data)
-          this.uppy.log(`[Image Compressor] Image ${file.id} size before/after compression: ${file.data.size} / ${compressedBlob.size}`)
-          totalCompressedSize += compressedBlob.size
+          const compressedSavingsSize = file.data.size - compressedBlob.size
+          this.uppy.log(`[Image Compressor] Image ${file.id} compressed by ${prettierBytes(compressedSavingsSize)}`)
+          totalCompressedSize += compressedSavingsSize
           this.uppy.setFileState(file.id, {
             data: compressedBlob,
             size: compressedBlob.size,
@@ -66,6 +67,10 @@ export default class Compressor extends BasePlugin {
         message: this.i18n('compressingImages'),
       })
 
+      if (file.isRemote) {
+        return Promise.resolve()
+      }
+
       // Some browsers (Firefox) add blobs with empty file type, when files are
       // added from a folder. Uppy auto-detects type from extension, but leaves the original blob intact.
       // However, Compressor.js failes when file has no type, so we set it here

private/dev/Dashboard.js

@@ -23,6 +23,7 @@ import Form from '@uppy/form'
 import ImageEditor from '@uppy/image-editor'
 import DropTarget from '@uppy/drop-target'
 import Audio from '@uppy/audio'
+import Compressor from '@uppy/compressor'
 /* eslint-enable import/no-extraneous-dependencies */
 
 // DEV CONFIG: create a .env file in the project root directory to customize those values.
@@ -91,6 +92,7 @@ export default () => {
     .use(DropTarget, {
       target: document.body,
     })
+    .use(Compressor)
 
   switch (UPLOADER) {
     case 'tus':