Mobile UI confusing

[unknowndevice]

fof/upload 0.8.3
flarum version: Flarum 0.1.0-beta.12
upload adapter causing issues: imgur
mimetype configurations: ^image\/.*

I'm not sure if some of these issues are specific to any adapter/configuration or to flarum, but I've been told by multiple users that the UI for the mobile version of this plugin is very confusing.

• When you upload an image, once finished it auto hides the draft.

• The uploading text and loading icon never go away after an image has been uploaded.

[clarkwinkelmann]

Hi! I expect you have fof/upload 0.8.3, not flagrow/upload ? version 0.8.x are only on the FriendsOfFlarum package.

To help us replicate could you answer these questions:

When you upload an image, once finished it auto hides the draft.

Is this what happens or is it what you expect ?

The uploading text and loading icon never go away after an image has been uploaded

On which mobile browsers did you experience this ?

[unknowndevice]

Hi! Sorry yes it is fof/upload 0.8.3, a copy paste error on my part.

Is this what happens or is it what you expect ?

It's what happens. It auto hides the draft.

On which mobile browsers did you experience this ?

On Firefox 68.6.0 for Android 10. But I've heard it from other users so it might not be exclusive to just that browser.

[clarkwinkelmann]

Thanks for the details. I checked it out and I can reproduce. It happens with any screen width below 767px ("mobile view").

This appears to be caused by this line https://github.com/FriendsOfFlarum/upload/blob/master/js/src/forum/components/UploadButton.js#L93

I think the reason we call preview() was to scroll the page into the preview section so that the user can see their new image.

But on mobile calling preview() also closes the editor so that you can see the post.

The bug about the spinner that continues spinning must be related to this behavior. The editor closing must interfere with the redraw of the "uploading" state which happens while it's closed.

I'm not really sure what the best approach would be here. We could drop the call to preview(). The code has been like that since 2016 but can be changed.

[unknowndevice]

Thanks for looking into this!

I'm using a Nokia 7.1, which has a resolution of 2280x1080. I know other people who have mentioned the issue who's phone resolution is above 767px. Unless movile view means something different to resolution. In which case you can ignore that.

I'm not a javascript expert, so I'm not exactly sure what the best recourse is here.

[johnlewissims]

Just wanted to check on the status of this issue. Like clarkwinkelmann mentioned, I am commenting out line 93 of UploadButton.js as a workaround.

[clarkwinkelmann]

I was hoping to get some feedback from other FoF members. I'll link this in our Discord to see if someone can comment.

[clarkwinkelmann]

Fixed in version 0.8.5. I kept the scrolling part, but removed the minimizing part. I believe it fixes both issues on mobile and still does the same as before on desktop.

[johnlewissims]

Thank you so much!