Merge new name and type into compressed file (#3606)

Co-authored-by: Merlijn Vos <merlijn@soverin.net>

e2e/clients/dashboard-compressor/app.js

@@ -10,7 +10,9 @@ const uppy = new Uppy()
     target: document.body,
     inline: true,
   })
-  .use(Compressor)
+  .use(Compressor, {
+    mimeType: 'image/webp',
+  })
 
 // Keep this here to access uppy in tests
 window.uppy = uppy

e2e/cypress/integration/dashboard-compressor.spec.ts

@@ -36,9 +36,16 @@ describe('dashboard-compressor', () => {
     cy.get('.uppy-StatusBar-actionBtn--upload').click()
 
     cy.get('.uppy-Informer p[role="alert"]', {
-      timeout: 10000,
+      timeout: 12000,
     }).should('be.visible')
 
+    cy.window().then(({ uppy }) => {
+      for (const file of uppy.getFiles()) {
+        expect(file.extension).to.equal('webp')
+        expect(file.type).to.equal('image/webp')
+      }
+    })
+
     cy.get('.uppy-Dashboard-Item-statusSize').should((elements) => {
       expect(elements).to.have.length(sizeBeforeCompression.length)
 

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

@@ -1,5 +1,6 @@
 import { BasePlugin } from '@uppy/core'
 import { RateLimitedQueue } from '@uppy/utils/lib/RateLimitedQueue'
+import getFileNameAndExtension from '@uppy/utils/lib/getFileNameAndExtension'
 import prettierBytes from '@transloadit/prettier-bytes'
 import CompressorJS from 'compressorjs/dist/compressor.common.js'
 import locale from './locale.js'
@@ -49,7 +50,12 @@ export default class Compressor extends BasePlugin {
           const compressedSavingsSize = file.data.size - compressedBlob.size
           this.uppy.log(`[Image Compressor] Image ${file.id} compressed by ${prettierBytes(compressedSavingsSize)}`)
           totalCompressedSize += compressedSavingsSize
+          const { name } = compressedBlob
+          const { extension } = getFileNameAndExtension(name)
           this.uppy.setFileState(file.id, {
+            name,
+            extension,
+            type: compressedBlob.type,
             data: compressedBlob,
             size: compressedBlob.size,
           })