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

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

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

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.

iOS 12 & Safari:

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.

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.

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.

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

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.

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

so are you or toby able to fix it?

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

Awesome! Thank you for all your hard work!

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. ;)

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 ;)

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

[This issue needs the mobile tag]

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.

Probably related to #1125

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

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

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

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

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

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?

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.

Okay, thanks for clarifying.

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

I'll let take care of this. ;)

Some references: - https://github.com/fat/bean/issues/82 - https://stackoverflow.com/questions/25886480/trigger-click-on-input-file - https://stackoverflow.com/questions/793014/jquery-trigger-file-input - https://stackoverflow.com/questions/13290421/script5-access-is-denied-error-on-ie9-when-firing-click-from-onchange

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?