weixin_39568706
weixin_39568706
2021-01-12 13:21

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

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




  
    <script src="./jquery-2.1.4.js"></script>
  
  
    <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>
  

该提问来源于开源项目:flarum/core

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

28条回答

  • weixin_39638012 weixin_39638012 3月前

    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

    点赞 评论 复制链接分享
  • weixin_39557402 weixin_39557402 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39670627 weixin_39670627 3月前

    iOS 12 & Safari:

    e14decbc-695c-4c76-9676-d7b155550471

    点赞 评论 复制链接分享
  • weixin_39613712 weixin_39613712 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39670627 weixin_39670627 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39563132 weixin_39563132 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39563132 weixin_39563132 3月前

    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

    点赞 评论 复制链接分享
  • weixin_39557402 weixin_39557402 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

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

    点赞 评论 复制链接分享
  • weixin_39964869 weixin_39964869 3月前

    so are you or toby able to fix it?

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

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

    点赞 评论 复制链接分享
  • weixin_39964869 weixin_39964869 3月前

    Awesome! Thank you for all your hard work!

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

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

    点赞 评论 复制链接分享
  • weixin_39633252 weixin_39633252 3月前

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

    点赞 评论 复制链接分享
  • weixin_39638012 weixin_39638012 3月前

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

    点赞 评论 复制链接分享
  • weixin_39670627 weixin_39670627 3月前

    [This issue needs the mobile tag]

    点赞 评论 复制链接分享
  • weixin_39758288 weixin_39758288 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39997253 weixin_39997253 3月前

    Probably related to #1125

    点赞 评论 复制链接分享
  • weixin_39850365 weixin_39850365 3月前

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

    点赞 评论 复制链接分享
  • weixin_39903477 weixin_39903477 3月前

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

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

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

    点赞 评论 复制链接分享
  • weixin_39903477 weixin_39903477 3月前

    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

    点赞 评论 复制链接分享
  • weixin_39964869 weixin_39964869 3月前

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

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

    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?

    点赞 评论 复制链接分享
  • weixin_39568706 weixin_39568706 3月前

    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.

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

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

    点赞 评论 复制链接分享
  • weixin_39918747 weixin_39918747 3月前

    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

    点赞 评论 复制链接分享
  • weixin_39964869 weixin_39964869 3月前

    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?

    点赞 评论 复制链接分享