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

score 6 · Answer 1 · answered Dec 22 '14 at 20:41

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

For me the correct approach was that provided by @Lampros answer below — Diego D, May 20 '19 at 15:30

score 5 · Answer 2 · answered Dec 10 '18 at 11:53

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

score 3 · Answer 3 · edited Nov 21 '14 at 01:07

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]

Diogo Gomes · Answer 4 · 2018-07-10T09:22:47.530

3

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

edited Jul 10 '18 at 09:22

answered Jul 09 '18 at 16:44

Diogo Gomes

2,135
16
13

In the current Facebook Android app version switching from `accept=".jpg,.jpeg,.png, ..."` to `accept="image/*"` or `accept="image/jpg,image/jpeg, ..."` seems to fix the problem. Not sure if the "multiple" attribute needs to be set but we had it set. – daniels May 02 '22 at 08:47

score 1 · Answer 5 · answered Jan 21 '21 at 17:08

I have tried all the solutions above and deduced they probably work depending on the Android version.

Tests with Facebook 301.0.0.27.477 (2021-01-21):

Huawei P9 Lite / Android 7.0: the browser opens the file selector correctly, you are able to choose an image, but back to the browser the input still says "Select a file". We have tried the simplest input, using accept, using multiple, and using the w3schools simple input example, but nothing happened, no change event, nothing - it didn't work at all.
LG G7 ThinQ / Android 10: it works perfectly using accept=image/*, multiple or none of them.

The best solution might be telling users to open in Chrome in order to get the best experience in your application (as said here). We have found different error exceptions on Sentry for other devices using the Facebook browser that I have no idea how to reproduce or fix, or if the fix is even possible.

iulo · Answer 6 · 2021-01-28T03:29:30.260

1

finally I found FB bulit-in browser, only support several ways of writing "accept".

Like image, In the bulit-in browser, only accept="image/*"(glob) and accept="image/jpeg"(specified type) work.

the demo below is my test: https://codepen.io/iulo/full/LYRKOyO

edited Jan 28 '21 at 03:29

answered Jan 26 '21 at 03:14

iulo

467
4
14

Hi @iulo, I have tested your demo and have experienced exactly the same behaviour described in the previous answer. The Huawei P9 Lite / Android 7.0 does not work at all, but the LG G7 ThinQ / Android 10 work for all input examples (except for the last one I think it is just invalid). – Emilio Jan 27 '21 at 09:31

Beatnik Technology Ltd. · Answer 7 · 2020-02-05T11:26:41.250

0

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

edited Feb 05 '20 at 11:26

answered Feb 05 '20 at 11:18

Beatnik Technology Ltd.

1
2

score 0 · Answer 8 · answered Dec 28 '20 at 08:19

0

To solve this I had to make this change

            <input type="file" id="photoinput" name="photoinput" accept="image/*" />

Adding image/* made it work

answered Dec 28 '20 at 08:19

Sharjeel Ahmed

2,051
2
17
25

File upload control not working in Facebook In-App Browser

8 Answers8

Linked