uppy: autoOpenFileEditor option is ignored (broken?) past @uppy/dashboard 3.7.4 and @uppy/react

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

https://codesandbox.io/p/sandbox/ecstatic-wilbur-vk6krr

Steps to reproduce

Visit page
Click “Browse files” and select an image
See results

Expected behavior

The crop/edit tool should open immediately because autoOpenFileEditor is specified. This worked in previous versions.

Actual behavior

The preview and rename dialog shows with an “Edit image” button. The user can click “Edit image” to bring up the editor.

This started after upgrading my dependencies this morning.

Previous, including some likely unrelated packages to be thorough:

    "@uppy/core": "^3.8.0",
    "@uppy/dashboard": "^3.7.1",
    "@uppy/drag-drop": "^3.0.3",
    "@uppy/file-input": "^3.0.4",
    "@uppy/image-editor": "^2.4.0",
    "@uppy/progress-bar": "^3.0.4",
    "@uppy/react": "^3.2.1",

Now:

    "@uppy/core": "^3.9.3",
    "@uppy/dashboard": "^3.7.5",
    "@uppy/drag-drop": "^3.0.3",
    "@uppy/file-input": "^3.1.0",
    "@uppy/image-editor": "^2.4.4",
    "@uppy/progress-bar": "^3.1.0",
    "@uppy/react": "^3.2.2",

If I revert to @uppy/dashboard@3.7.3, it works as it used to. It seems like a bug but if it was intention, it’s a major breaking change as I rely on this behavior to enforce aspect ratios of many images.

I did some exploration of versions and traced this back to @uppy/dashboard 3.7.4. In other words, the following works:

    "@uppy/core": "^3.9.3",
    "@uppy/dashboard": "3.7.3",
    "@uppy/drag-drop": "^3.0.3",
    "@uppy/file-input": "^3.1.0",
    "@uppy/image-editor": "^2.4.4",
    "@uppy/progress-bar": "^3.1.0",
    "@uppy/react": "3.2.1",

@uppy/react 3.2.2 has a peer dependency on @uppy/dashboard 3.7.5 so I can’t update it past there.

About this issue

Original URL
State: closed
Created 4 months ago
Comments: 16 (12 by maintainers)

Most upvoted comments

In my case, I use use events to control the behavior:

    // from within useImageUploadEdit, a React Hook

    newUppy.on('file-editor:cancel', () => {
      onCancel();
    });

    newUppy.on('file-editor:complete', (updatedFileMeta) => {
      onEditComplete(updatedFileMeta.data);
    });

This will not help @jbpros because of the Metadata requirement; however, if new events wind up being added then perhaps they will provide the tools needed to control each step of the process.

subvertallchris on Mar 18, 2024

I just opened the PR for the config option. I started working on events and it’s a bit more tangled than I was comfortable with. In my quick review it looks like it would benefit from a bit of untangling and reworking that I’d consider breaking changes.

Current events:

dashboard:file-edit-start fires only when the meta editor starts because it’s part of the toggleFileCard method
dashboard:file-edit-complete fires only when the image editor ends

The wording for both suggests image editor, just like the autoOpenfileEditor, the language suggests the same things, but they are describing different events.

Rather than changing these events, which will cause breaking changes, can we consider adding three new pairs of events that are more specific and accurate?

dashboard:meta-editor-start should fire specifically when editing metadata
dashboard:meta-editor-complete should fire specifically when done editing metadata, ideally with an argument indicating whether it was submitted or cancelled.
dashboard:image-editor-start should fire specifically when editing the image
dashboard:image-editor-end should fire specifically when done editing the image, ideally with an argument indicating whether it was submitted or cancelled
dashboard:editor-start should fire when the card first appears
dashboard:editor-end should fire when the card closes

Then leave the existing events alone, possibly deprecate them and stop using them in a future major release, RIP. I’ll also add that I am currently using dashboard:file-edit-complete to immediately save changes once editing is complete, so I have a personal stake in not changing in a patch release or it will break my app. 🙏 🙏 🙏

subvertallchris on Mar 18, 2024