file-editor:cancel event is incorrectly implemented

[Murderlon]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

• Use @uppy/dashboard with @uppy-image-editor
• Add .on('file-editor:cancel', () => console.log('foo'))
• Add a local file
• Click "Edit file X"
• Click "Edit file"
• Click "Cancel"

Expected behavior

file-editor:cancel should have fired.

Actual behavior

Nothing happens.

In #3875 the file-editor:cancel event was added. However, it fires when you cancel the meta data editing screen instead of the cancel inside the image editor. This is incorrect.

The correct solution isn't easy unfortunately. Cancel is called here:

uppy/packages/@uppy/dashboard/src/components/EditorPanel.jsx

Lines 20 to 26 in c658883

	<button
	className="uppy-DashboardContent-back"
	type="button"
	onClick={props.hideAllPanels}
	>
	{props.i18n('cancel')}
	</button>

hideAllPanels has no knowledge plugins so we can't fire it there, then every "Cancel" would have that event, instead of just the cancel for the image editor. Currently, this event only fires when the plugin is uninstalled during editing. But this is a strange edge case and I would say the value of file-editor:cancel would mostly come from the cancel button.

[oalexdoda]

The event still doesn't fire for me when clicking the Cancel button in the image editor. Is this still pending?

[Murderlon]

The issue is open, that means yes

[oalexdoda]

Any idea on a workaround while it's getting figured out? All I need is for the Cancel button in the File Editor to skip the files list (which is hidden via CSS for now if the prop limit = 1 is passed to the Uppy component). I saw the message in #3970 but wondering if there's anything at all that can be done to support that functionality.

[Murderlon]

@arturi do you have time to look at this?

[arturi]

@altechzilla So you'd like the cancel button on the image editor to remove the file?

[oalexdoda]

@altechzilla So you'd like the cancel button on the image editor to remove the file?

Basically, yes. When cancelled, I need the editor to reset back to “drag an image or click to select” view. Which means removing the file so that there’s none. Would’ve been easy with that event working properly

[feedanal]

Is it still broken? As I cannot get file-editor:cancel to fire from image editor

[ghost]

It looks like still doesn't work.

[robbiehobby]

+1

Still doesn't work in the latest 3.10.0 release.

[ericauv]

+1 Would like this

[jaisondavis]

Don't know if this is a bit of an overkill but, here is a way to do what @altechzilla asked for.

uppy.on('file-editor:start', (file) => {
            var selector = '#uppy-DashboardContent-panel--editor > div.uppy-DashboardContent-bar > button.uppy-DashboardContent-back';
            new Promise(resolve => {                
                if (document.querySelector(selector)) {
                    return resolve(document.querySelector(selector));
                }

                const observer = new MutationObserver(mutations => {
                    if (document.querySelector(selector)) {
                        resolve(document.querySelector(selector));
                        observer.disconnect();
                    }
                });

                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            }).then(() => {
                document.querySelector(selector)?.addEventListener('click', () => {
                    uppy.removeFile(file.id)
                });
            });
     });

[isdigital-github]

+1 here

@uppy/core 3.4.0 and @uppy/image-editor 2.1.3

[arturi]

Hi all, this has been hopefully fixed in the latest release, please update @uppy/dashboard to the latest and try the event again. Sorry for the delay.

[pedantic-git]

@arturi I can confirm this has fixed my issue (reported as part of #3970) and my app is finally behaving the way I'd like it to. Woohoo! Thank you!