Single Image Mode?

[oalexdoda]

Initial checklist

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

Problem

Trying to use the module to create a component that allows the user to upload a profile image. Just a single file. For some reason, even if the limit is set to 1, the widget still behaves as if it should allow multiple images. Which is caused by a bunch of things:

1. Even with autoOpenFileEditor set to true, the widget still shows the view with multiple items for a second or two before it actually opens the editor.

2. After cropping an image and hitting Save, it goes back to that screen instead of skipping it.

I tried using:

.on('complete', onUploadComplete)
            .on('file-editor:complete', (payload) => {
                onUploadComplete({
                    successful: [payload],
                });
            })

... to get around it, but for some reason the widget still shows that for a few seconds.

Solution

When the limit is set to 1 with an image editor that has autoOpenFileEditor set to true, it should open straight up in editor mode, and when saving it should skip the "gallery" screen.

Alternatives

Maybe with some custom CSS, but it'd be super counter intuitive.

[nqst]

Agreed with the proposed solution.

Two things to add:

1. In this particular case (only 1 file allowed & autoOpenFileEditor = true) it might make sense to use the Upload button instead of the Save changes button in the editor, so it's clear the file is going to be uploaded immediately after clicking the button.

2. If autoOpenFileEditor is false, but just one file was uploaded, it's better to show a large preview of that file instead of the gallery. We designed it some time ago, but I think it hasn't been implemented yet:

[Murderlon]

Two things to add:

May be better to hold this off until we figured out 'dashboard mini'. This mode may make more sense for that component. With the current proposed solution, it's still quite a massive dashboard with a single image, while another potential outcome is something slim. Example:

https://user-images.githubusercontent.com/9060226/186122228-7ee8f584-15e3-483e-a062-a21d882cf111.mov

But it could also be possible to have both. Either way, it requires a bit more discussion and vision before we implement.

[oalexdoda]

Here's the custom flow I'm using for my app, which seems like the best UI for the user:

Step 1: Click the field that opens up the image picker.

Step 2: Drag & Drop or Click to Choose

Step 3: Crop & Save

Step 4: Wait for Upload

No need for extra steps like having users click the Upload button and stuff. What do you think @Murderlon @nqst

[oalexdoda]

I wish it was all possible with minimal plugins / code, cause right now it's a super customized instance of Uppy + Image Editor but feels a bit 'hacky".

[Murderlon]

Thanks for the context. Like I said I think we need to discuss this internally and see how it fits in our vision of 'dashboard mini'. We'll come back on it.

[pedantic-git]

I've been able to almost get this working (my source code) by adding both autoOpenFileEditor and an uppy.upload() to the file-editor:complete method.

The main outstanding problem is the user can still get to the selected files grid by cancelling on the image editor pane. (I can disable the files grid altogether with showSelectedFiles: false which would work if there was some way to remove the file from pending files when the user cancels in the editor, but as it stands, returning users to the Dashboard homescreen just leaves them with an "Upload 1 file" button and no way to back out.)

Unfortunately, the "cancel" button in the Dashboard's editor doesn't seem to fire any events I can hook into. If Dashboard fired the same file-editor:cancel event that the image editor fires when it's being used outside of Dashboard then this last issue could be fixed, and hopefully that's quite a small change to make?

If that event existed, I'd fix it like:

uppy.on('file-editor:cancel', () => {
  uppy.cancelAll()
})

[oalexdoda]

Hey @Murderlon , any news on this? Thanks!

[Murderlon]

The idea of 'dashboard mini' is something I don't see us working on before February, if I'm being very honest. We have some other big projects lined up at the moment.

[pedantic-git]

I see my suggested improvements to the events as a workaround is being discussed in #4045 now so I'll follow that issue for updates. I'd imagine that's a smaller fix than adding "dashboard mini" and my workaround above will be enough for me and hopefully others!

[oalexdoda]

I see my suggested improvements to the events as a workaround is being discussed in #4045 now so I'll follow that issue for updates. I'd imagine that's a smaller fix than adding "dashboard mini" and my workaround above will be enough for me and hopefully others!

Yeah, that event working would be more than enough. I managed to put something together with custom hook states but it's a bit glitchy. Will keep an eye on #4045.