All geek questions in one place

File upload control does not work on Facebook Browser in the application

I have a Facebook html mobile app that has control over uploading files (simple input file). I can download it when I open the application in a browser, for example, apps.facebook.com/myapp. But as soon as I go through my own Facebook application and upload my application to the new internal FB browser, the download control does not work. He is there on the page, but does nothing.

  • Is this expected behavior?
  • If so, how do I get around this?
  • Can I make the application open in an external browser such as Chrome?

Thanks.

+10
source share
4 answers

We fixed this problem by adding the Multiple attribute to the input element. This seems to be a bug in the Facebook browser.

This is a fix for iOS, but we have some reports that it does not work in Android. It also adds a check to load if they have downloaded multiple files (since this may not be intended, but allowed by the element). Hope this helps.

if (navigator.userAgent.match(/FB/)) { $('#myinput').attr('multiple',true); $('#myinput').change(function(){ if ($('#myinput')[0].files.length > 1) { //user trying to upload more than 1 $('#myinput').value = ''; alert("Sorry, only 1 file is allowed"); } }); }
+7
source

Same problem.

The only solution I found now is to offer visitors a warning message to open the website in Safari (for iPhone, of course), with an action button in the upper right corner of the facebook web browser.

This is a specific user agent:

Mozilla / 5.0 (iPhone, iPhone for iPhone 8_1_1, like Mac OS X) AppleWebKit / 600.1.4 (KHTML, like Gecko) Mobile / 12B435 [FBAN / FBIOS; FBAV / 18.0.0.14.11; FBBV / 5262967; FBDV / iPhone 5.2; FBMD / iPhone; FBSN / iPhone OS; FBSV / 8.1.1; FBSS / 2; FBCR / T-Mobile; FBID / Phone FBLC / en_US; FBOP / 5]

+1
source

For me, the problem was the accept attribute of the input file.

This does not work in the native Facebook browser on mobile devices:

accept=".jpg,.jpeg,.png,.svg,.tiff,.bmp,.webp,.bpg"

So my solution was to detect if this is FB's own browser, and remove this attribute:

 let isFacebookApp = function () { let ua = navigator.userAgent || navigator.vendor || window.opera; return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1); }; if (isFacebookApp) { $('#myinput').removeAttr('accept'); }
+1
source

Ι ran into the same problem, and browsers in Facebook and instagram applications contained an error in the file upload element due to the accept attribute. The strange thing is that there were no problems in iOS, but in all androids the input type file did not open by touch. Therefore, as above, I also added a condition for Instagram. So the document is ready:

 var isFacebookApp = function () { var ua = navigator.userAgent || navigator.vendor || window.opera; return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1 ) || (ua.indexOf("Instagram") > -1); }; if (isFacebookApp()) { jQuery('#myinputfile').removeAttr('accept'); }
0
source

Source: https://habr.com/ru/post/978348/

More articles:


All Articles