File upload control not working in Facebook In-App Browser

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/m

Answer 1

I've faced the same problem, however it wasn't the multiple or accept attributes but whether the user has given then underlying app (Facebook, Messenger, IG,...) permission to access photos. Any idea how you can construct a fallback for that scenario?

Answer 2

Ι 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 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

I have [solved] very recently using the following code. Please see the solution

Not working
<input type="file" class="file" id="image" accept="image/gif, image/jpg, image/jpeg, image/png" />

Working
<input type="file" class="file" id="image" />

Answer 5

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 6

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