iOS Safari & Chrome, Avatar upload, doesn't work.

bekcpear commented 7 years ago

Expected behavior

Upload an avatar successful on iOS

Actual behavior.

No response when I click the avatar upload button

Specifications

iOS Version: 10.2.1
Version of Flarum: 0.1.0-beta.6
Website URL where the bug is visible: https://pondof.fish
The webserver you are running: nginx
PHP version: 7.1.1
Hosted environment: vps

iOS Safari & Chrome cannot upload an avatar too. The difference I tested between "iOS Safari" and "MS Edge#1125" is "iOS Safari" cannot popup the file selection box while "MS Edge" cannot upload the selection image.

I inspected the profile page on linux by iso-webkit-debug-proxy & mozilla/valence. No errors appear in WebIDE console. Avatar can be uploaded successful if I unhide the INPUT element and click it manually. Change '<input type="file">' to '<input type="file" style="cursor: pointer">' in AvatarEditor.js and rebuild the forum-*.js in assets folder is not working.

I also tried the following code and these worked as expected on iOS (file selection box can popup when I click the "button" element) :

<!DOCTYPE html>
<html>
  <head>
    <script src="./jquery-2.1.4.js"></script>
  </head>
  <body>
    <script>
      $(function() {
        console.log("Ready!");
        $('<button id="1" style="width: 100px; height: 20px; float: left;"></button>').appendTo("body");
        $( "#1" ).click(function(){
            console.log("Click");                                                                                                                          
            $('<input type="file">').appendTo("body").hide().click();
        });
      })
    </script>
  </body>
</html>

Kakifrucht commented 7 years ago

Probably related to #1125

chaosbunker commented 7 years ago

I also have the same issue, with both chrome and safari in iOS

oanhnn commented 7 years ago

Yes. I have same issue and fixed it by changing upload avatar specs :smile:

franzliedke commented 7 years ago

@oanhnn Not sure I understand. How did you fix this exactly? Which specs are we talking about?

oanhnn commented 7 years ago

Spec: Haven't avatar yet case: Click avatar => show dialog chose file => upload Have avatar yet: Click avatar => show dialog chose change avatar or remove avatar => upload

My spec after fix: Click avatar => show dialog chose file => upload

My solution: make input[file] in avatar block

ibrahimk157 commented 7 years ago

@oanhnn I don't get it, what file are you editing?

franzliedke commented 7 years ago

To anybody who can reproduce this bug:

Can you see any error message in the browser's dev tools console?
In the dev tools' "Network" tab, do you see a request that tries to upload the file? If so, does it return successfully?
Any errors in the server-side error logs?

bekcpear commented 7 years ago

@franzliedke Thank you for your reply.

It's not a server-side problem.

It's just cannot popup the file dialog when I click the avatar upload button on iOS platform.

If I unhide the 'file input' element (which is triggered by JS before), and click the input manually, iOS file dialog can appears normally and then avatar uploaded successfully.

I inspected the profile page on linux by iso-webkit-debug-proxy & mozilla/valence. No errors appear in WebIDE console.

franzliedke commented 7 years ago

Okay, thanks for clarifying.

Apparently, we need to shift the file input field off-screen instead of hiding it.

I'll let @tobscure take care of this. ;)

franzliedke commented 7 years ago

Some references:

ibrahimk157 commented 7 years ago

@franzliedke flagrow/upload has a upload button that works all the time... can't you copy (or compare) the code from that to solve this problem? Or have you already discovered why this happens?

franzliedke commented 7 years ago

@ibrahimk157 As far as I can tell, they do not hide the upload input field the way we do.

ibrahimk157 commented 7 years ago

@franzliedke so are you or toby able to fix it?

franzliedke commented 7 years ago

Using my suggestion above, I hope Toby will be able to fix it, yes. :)

ibrahimk157 commented 7 years ago

@franzliedke Awesome! Thank you for all your hard work!

franzliedke commented 7 years ago

Apparently Flagrow does hide the button, but not by setting its display to none, but rather by wrapping it with another CSS element and styling that. Might be even more inspiration for Toby. ;)

WiseClock commented 7 years ago

I came up with an extension that tweaks the avatar uploading function a little bit and was having the same issue at the beginning since I didn't change any of the code that's firing the click events. Then today I did a little hack to it, now it works on iOS, too.

What causes this issue is that the current code in AvatarEditor only adds a click handler to the elements (the onclick attributes). In order to make it work on some mobile devices, we need to add the tap (or touchend) listener, too. It'll be something like: $("#id").on("tap click", function(e) { }); But doing this sometimes triggers the event twice on mobile devices -- one for tap and one for click. So at the end I manage to hack it by adding a touchend event without changing the old code, and inside the touchend event I e.preventDefault(); to avoid it triggering the click event once more. Then I can just simulate the mouse hover and manually trigger the click event again. Hooray!

The codes I injected to make it happen are here, note that I remove and add the event listeners depending on if the user has already an avatar or not. It is because that the config() function is called every time when some elements are changed. I need to remove the unused listeners or it will break ;)

gingerbeardman commented 6 years ago

+1 I see this issue on discuss.flarum.org

ardacebi commented 6 years ago

[This issue needs the mobile tag]

dsevillamartin commented 6 years ago

I can no longer reproduce this on iOS 11.3. I was able to upload an avatar with the expected delays of native iOS popups on that regard.

ardacebi commented 6 years ago

iOS 12 & Safari:

e14decbc-695c-4c76-9676-d7b155550471

tobyzerner commented 6 years ago

@ardacebi I think the issue you've encountered there ("oops something went wrong") might be unrelated to this issue ("No response when I click the avatar upload button"). Please verify.

ardacebi commented 6 years ago

@tobscure You're right, I was able to upload.

The issue was the size of the image I attempted to upload, for some reason it didn't accept a large image. Anyways, I was able to upload a square image of mine, see discuss of what I uploaded.

zerosonesfun commented 6 years ago

This is still an issue. I’m on iOS 11.4.1, using Chrome version 68.0.3440.83, which I assume is the latest version as of today.

If I tap the plus sign just right, the iOS upload box slides up as it should. But, it only works every now and then.

I think this is a fairly common problem with iOS and upload buttons if you aren’t using a standard upload button.

Again it’s very inconsistent. So you may think this is no longer an issue one day, then a week later try to upload and it doesn’t work.

zerosonesfun commented 6 years ago

I found out that this is only an issue if you have not uploaded an avatar yet. It has something to do with the code involved with there not being an avatar. Because if you manage to get an avatar uploaded, say via a desktop computer, then this is no longer an issue on iOS.

Also, if you double tap on the original letter avatar, then it works.

I wonder if this could be the solution. Use the label tag: https://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button

johnlewissims commented 4 years ago

Hello! Just wanted to follow up on this issue and see if anyone is experiencing this problem still. On my site the issue occurs on all mobile browsers. I've tested in Chrome, Safari and Brave.

If i run it on desktop it works just fine. Which unfortunately means I don't have a console error to give anyone.

gingerbeardman commented 4 years ago

YI no longer use flare, but you can get console logs from iPhone using Mac Safari > Develop menu.

Quick google result: https://medium.com/@mattcroak718/debugging-your-iphone-mobile-web-app-using-safari-development-tools-71240657c487

johnlewissims commented 4 years ago

Update. Just updated my phone to the latest iOS 13.4.1 (was running 13.3.1). Everything works as expected.

Update your phones folks.

askvortsov1 commented 3 years ago

Just replicated on iPad, Google Chrome v87. The OS's file upload interface showed up once, then I couldn't get it to do so again.

Safari works fine though.

Why, Apple, must you be like this?

zerosonesfun commented 3 years ago

Just replicated on iPad, Google Chrome v87. The OS's file upload interface showed up once, then I couldn't get it to do so again.

Safari works fine though.

Why, Apple, must you be like this?

For what it’s worth I’ve used Flarum on two different model iPhones with Safari and Chome. I haven’t experienced this. Yet.

flarum / framework