Управление загрузкой файлов не работает в Facebook Браузер в приложении

У меня есть мобильное приложение html Facebook, у которого есть контроль над загрузкой файлов (простой входной файл). Я могу загрузить, когда открываю приложение в браузере, например, apps.facebook.com/myapp. Но как только я перейду через собственное приложение Facebook и загружу свое приложение в новый внутренний браузер FB, элемент управления загрузкой не работает. Он там на странице, но ничего не делает.

  • Это ожидаемое поведение?
  • Если да, то как мне обойти это?
  • Могу ли я заставить приложение открываться во внешнем браузере, таком как Chrome?

Спасибо.

Ответы

Ответ 1

Мы исправили эту проблему, добавив к элементу ввода атрибут "Несколько". Кажется, это ошибка в браузере Facebook.

Это исправление для iOS, но у нас есть некоторые сообщения о том, что он не работает в Android. Он также добавляет проверку, чтобы загрузить, если они загрузили несколько файлов (так как это может быть не предназначено, но разрешено элементом). Надеюсь, это поможет.

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

Ответ 2

Такая же проблема.

Единственное решение, которое я нашел сейчас, - предложить посетителям предупреждающее сообщение, чтобы открыть веб-сайт в Safari (для iPhone, конечно), с кнопкой действия в правом верхнем углу веб-браузера facebook.

Это конкретный пользовательский агент:

Mozilla/5.0 (iPhone, iPhone для iPhone 8_1_1, как Mac OS X) AppleWebKit/600.1.4 (KHTML, как и 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/телефон; FBLC/en_US; FBOP/5]

Ответ 3

Для меня проблема заключалась в атрибуте accept файла ввода.

Это не работает в родном браузере Facebook на мобильных устройствах:

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

Таким образом, мое решение состояло в том, чтобы обнаружить, является ли это собственным браузером FB, и удалить этот атрибут:

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

Ответ 4

Ι столкнулся с той же проблемой, и браузеры в приложениях Facebook и instagram содержали ошибку в элементе загрузки файла из-за атрибута accept. Странно то, что в iOS не было никаких проблем, но во всех андроидах файл входного типа не открывался на ощупь. Поэтому, как и выше, я добавил также условие для Instagram. Итак, документ готов:

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