CODEWITHSUNDEEP
facebookfile-upload
Alex24
Alex24

Reputation: 171

File upload control not working in Facebook In-App Browser

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.

Thanks.

Upvotes: 17

Views: 13931

Answers (8)

iulo
iulo

Reputation: 500

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

Upvotes: 1

Emilio
Emilio

Reputation: 390

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.

Upvotes: 1

Sharjeel Ahmed
Sharjeel Ahmed

Reputation: 2061

To solve this I had to make this change

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

Adding image/* made it work

Upvotes: 0

Beatnik Technology Ltd.
Beatnik Technology Ltd.

Reputation: 1

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

Upvotes: 0

Lampros
Lampros

Reputation: 51

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

Upvotes: 5

Diogo Gomes
Diogo Gomes

Reputation: 2265

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

Upvotes: 3

sricks
sricks

Reputation: 409

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

Upvotes: 6

Ben Moreton
Ben Moreton

Reputation: 73

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]

Upvotes: 3

Related Questions