transloadit / uppy

The next open source file uploader for web browsers :dog:
https://uppy.io
MIT License
29.19k stars 2.01k forks source link

Compressor fails when called after Image Editor #4903

Closed movy closed 9 months ago

movy commented 9 months ago

Initial checklist

Link to runnable example

No response

Steps to reproduce

Whenever ImageEditor is used before Compressor, Compressor does not receive filename and fails with:

chunk-uppy.1095d508f2f728d74ea2.js:27 [Uppy] [21:45:04] [Image Compressor] Failed to compress uppy-wn3/b/up/jpg-2v-2v-1e-image/jpeg-1105440-1706684357600:
warn @ chunk-uppy.1095d508f2f728d74ea2.js:27
chunk-uppy.1095d508f2f728d74ea2.js:27 [Uppy] [21:45:04] TypeError: Cannot read properties of undefined (reading 'lastIndexOf')
    at r (chunk-uppy.1095d508f2f728d74ea2.js:27:323659)
    at chunk-uppy.1095d508f2f728d74ea2.js:27:125411
    at p (chunk-vendors.6715ff139c64af28c42c.js:9:619)
    at Generator.<anonymous> (chunk-vendors.6715ff139c64af28c42c.js:9:1971)
    at Generator.next (chunk-vendors.6715ff139c64af28c42c.js:9:1048)
    at r (chunk-vendors.6715ff139c64af28c42c.js:7:303046)
    at s (chunk-vendors.6715ff139c64af28c42c.js:7:303249)

The error is related to this code: https://github.com/transloadit/uppy/blob/c51032c9d1e7f7ac8df199d695aa50142638bd3b/packages/%40uppy/compressor/src/index.js#L56

name is undefined because it's not populated in file.data for compressedBlob: https://github.com/transloadit/uppy/blob/c51032c9d1e7f7ac8df199d695aa50142638bd3b/packages/%40uppy/compressor/src/index.js#L50C1-L51C1

I tried reproducing it on Uppy's sandbox, but be aware that ImageEditor is not activated there, hence Compressor works fine. We use vue, our setup is as follows:


<template>
      <dashboard
        :plugins="['ImageEditor', 'Webcam']"
        :props="dashboardOptions"
        :uppy="uppy"
      />
</template>

<script>
...

  this.uppy
  .use(this.Compressor, {
            quality: 0.8,
            maxWidth: 500,
            maxHeight: 500,
            resize: true,
            alwaysRunCompressor: true,
            convertTypes: [
              'image/jpeg',
              'image/png',
              'image/webp',
              'image/heic'
            ],
            mimeType: 'image/jpeg',
            convertSize: 200000,
            success(result) {
              console.log('Compressor result', result)
            },
            error(error) {
              console.error(error.message)
            }
          })
          .use(this.ImageEditor, {
            id: 'ImageEditor',
            quality: 0.8,
            displayImageSize: true,
            cropperOptions: {
              initialAspectRatio:  1,
              aspectRatio: 1,
              checkCrossOrigin: 'use-credentials',
              checkOrientation: true,
              dragMode: 'move',
              autoCrop: true,
              autoCropArea: 1,
              viewMode: 1,
              cropBoxMovable: false,
              modal: true,
              zoomable: true,
              moveable: true,
              scalable: true,
              rotatable: true,
              guides: true,
              center: true,
              highlight: true,
              cropBoxMovable: true,
              cropBoxResizable: true,
              toggleDragModeOnDblclick: false
            },
            actions: {
              revert: true,
              rotate: true,
              granularRotate: false,
              flip: true,
              zoomIn: true,
              zoomOut: true,
              cropSquare: false,
              cropWidescreen: false,
              cropWidescreenVertical: false,
            }
          })

### Expected behavior

Image compresses after using editor

### Actual behavior

Image is uploaded uncompressed.
lakesare commented 9 months ago

Can reproduce this, will take a look.