diff --git a/.changeset/fix-image-editor-cleanup.md b/.changeset/fix-image-editor-cleanup.md new file mode 100644 index 000000000..a0be3cb5f --- /dev/null +++ b/.changeset/fix-image-editor-cleanup.md @@ -0,0 +1,5 @@ +--- +"@uppy/image-editor": patch +--- + +Fix cropper not reinitializing after save/cancel by destroying previous instance in `start()` and cleaning up on file removal diff --git a/packages/@uppy/image-editor/src/ImageEditor.tsx b/packages/@uppy/image-editor/src/ImageEditor.tsx index 710afc588..bc0ff9218 100644 --- a/packages/@uppy/image-editor/src/ImageEditor.tsx +++ b/packages/@uppy/image-editor/src/ImageEditor.tsx @@ -350,6 +350,7 @@ export default class ImageEditor< */ start = (file: UppyFile): void => { // Clean up any previous editing session + this.destroyCropper() if (this.objectUrl) { URL.revokeObjectURL(this.objectUrl) this.objectUrl = null @@ -480,8 +481,16 @@ export default class ImageEditor< return this.objectUrl } + handleFileRemoved = (file: UppyFile): void => { + const { currentImage } = this.getPluginState() + if (currentImage && currentImage.id === file.id) { + this.stop() + } + } + install(): void { this.resetEditorState(null) + this.uppy.on('file-removed', this.handleFileRemoved) const { target } = this.opts if (target) { @@ -496,6 +505,7 @@ export default class ImageEditor< const file = this.uppy.getFile(currentImage.id) this.uppy.emit('file-editor:cancel', file) } + this.uppy.off('file-removed', this.handleFileRemoved) this.stop() this.unmount() }