File upload doesn't work in web version (Linux)

[xDarksome]

Summary

After choosing a file in the file picker nothing happens. There is no relevant logs in the console, no network requests are being made.
I have tried this on Chromium Version 106.0.5249.119 and Firefox Version 106.0.1.

Uploading files on other websites works fine (e.g. Google search by image). Everyone else on the backend team use Macs, and they don't have this issue.

Steps to reproduce

1. Open the latest version of the web app in Chromium / Firefox
2. Click on the profile avatar
3. Choose an image file in the file picker
4. Nothing happens

What is the current bug behavior?

Nothing happens when a file is chosen in the file picker.

What is the expected correct behavior?

The file should be uploaded to the server.

Relevant logs and/or screenshots

Loading app from service worker.
main.dart.js:101549 Flutter Web Bootstrap: Auto
main.dart.js:101549 Got object store box in database version.
main.dart.js:101549 Got object store box in database session_data.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_my_user.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_chat.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_gallery_item.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_user.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_contact.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_media_settings.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_application_settings.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_background.
main.dart.js:101549 Initialising connection
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_messages_74def00d-f5d1-467b-9a56-7ea9a5a4a1f2.
main.dart.js:101549 Got object store box in database 3a90cde7-799a-4beb-bd5d-e46d31ff64c5_messages_890ae897-31dd-46c5-a9f0-fa43dcfef09d.
main.dart.js:101549 [WebSocket]: Connected

[SleepySquash]

Firefox 105.0 on Ubuntu 22.04 running through Parallels seems to work fine to me, avatar is uploadable and changable.

@xDarksome, have you tried the production deployment, not the design one? Is the problem still relevant there?

[SleepySquash]

@xDarksome, I just checked: any error thrown during the upload gets swollen, so it's possible that an error occurs, but it isn't shown. I fixed this behaviour with the latest deployment, could you please check if there's any popups or errors now?

[xDarksome]

@SleepySquash which one is the production? I am trying this on https://new-design-preview.mob.soc.rev.t11913.org/

And I don't see any errors in the console still. I did a force refresh.

[SleepySquash]

@xDarksome, this is the design deployment. Is there any progress indication going around the profile avatar on the menu tab when you choose an image? I wonder who is the culprit, is it the file picker package itself or our code.

@alexlapa, can you please check if you can reproduce this issue?

[alexlapa]

@SleepySquash ,

Все ок. Ubuntu 22.04, Chrome 105, FF 106.

[xDarksome]

@SleepySquash please give me a link to the deployment with fixed logs.

[SleepySquash]

@xDarksome, sorry, I was talking about the design deployment you mentioned earlier. When you click on the avatar on menu tab and pick a file, you should see a progress indication over your avatar. And if any error is thrown while executing this code, you should get an alert. Could you please check this behaviour in incognito mode? If that doesn't happen, then the problem propably lies within the package used to pick the files.

[xDarksome]

@SleepySquash I tried it again on https://new-design-preview.mob.soc.rev.t11913.org in incognito mode. Still can't see any relevant logs.

And I didn't see any progress indicator, it looks like nothing's happening.

If that doesn't happen, then the problem propably lies within the package used to pick the files.

If I am not mistaken it is a GTK filepicker. However, I did not encounter this problem on any other website. Maybe it's something Flutter specific?

I do have a rather exotic Linux setup, but I would at least expect some logs giving clues on what's wrong.

[SleepySquash]

@xDarksome, I added additional logs when uploading an avatar, could you please check what the console prints?

[xDarksome]

@SleepySquash sorry for not replying sooner, I've been a bit busy.
Here is what I get now when trying to upload a file:

[uploadAvatar] picking files...                     js_primitives.dart:47 
[uploadAvatar] files picked, result: null (null     js_primitives.dart:47 

[SleepySquash]

@xDarksome, this log clearly states that the problem lies within file_picker package being used by us, it's not an issue in our code.

This package had some issues with picking files on Linux, notably this conversation: https://github.com/miguelpruivo/flutter_file_picker/issues/903 However, the provided issue is about native Linux code and not Web.

After digging I found that file_picker uses the FileUploadInputElement provided by the Flutter team:

InputElement uploadInput = FileUploadInputElement() as InputElement;
uploadInput.draggable = true;
uploadInput.multiple = allowMultiple;
uploadInput.accept = accept;
uploadInput.style.display = 'none';

Under the hood this element creates a simple input HTML element:

InputElement e = document.createElement("input") as InputElement;

So I'd presume this issue might be related to the framework itself. Maybe this element is not created properly? Without an ability to reproduce this issue I might be out of ideas :(

I'll try implementing native picker using the FileUploadInputElement directly to ensure the source of the problem. And I'll contact you about it later then.