File upload control not working in Facebook In-App

Question

I have a mobile html Facebook app which has a control to upload files (a simple input file). I can upload fine when I open the app in a browser like this apps.facebook.com/myapp. But once I go through the native Facebook app and load my app in the new FB's internal browser, the upload control doesn't work. It's there on the page but does nothing.

• Is this an expected behaviour?
• If so, how do I get around it?
• Can I force an app to open in an external browser like Chrome?

Thanks.

Answer 1

Ι faced the same issue as well, both facebook and instagram in-app browsers were buggy with the file upload element because of the accept attribute. The weird thing is that in iOS there was no issue but in all androids the input type file wouldn't open ontouch. So like above I added also the condition for Instagram. So on document 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');
}

Answer 2

We have fixed this problem by adding a "Multiple" attribute on the input element. It appears to be a bug in the Facebook browser.

This fixes it for iOS, but we have had some reports of it not working still in Android. It also adds a check to see if they uploaded more than one file (since that may not be intended, but is allowed by the element). I hope it 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");
        }
    });
}

Answer 3

Same problem.

The only solution I found for now is to suggest to visitors by an alert message to open the website in Safari (for iPhone of course), with the action button at the top right of the facebook web browser.

This is a specific user-agent:

Mozilla/5.0 (iPhone; CPU iPhone OS 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/iPhone5,2;FBMD/iPhone;FBSN/iPhone OS;FBSV/8.1.1;FBSS/2; FBCR/T-Mobile;FBID/phone;FBLC/en_US;FBOP/5]

Answer 4

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

This doesn't work on native Facebook browser on mobile devices:

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

So my solution was to detect if its a native FB browser, and remove that 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');
}