Загрузка файлов
Загрузка файлов — базовая функция большинства приложений: аватар, фото товара, скан документа. FlutterFlow умеет отправлять их в Firebase, Supabase или на ваш собственный сервер, а перед отправкой — сжимать, менять размер и обрабатывать.
Три способа загрузки
Отличаются они тем, куда файл попадает.
Firebase
Файл уходит прямо в Firebase Storage. После загрузки ссылка на него доступна в Widget State > Uploaded File URL — её можно показать или записать в базу.
Supabase
Файл уходит в bucket Supabase по заданному пути. Ссылка так же доступна в Widget State > Uploaded File URL.
Локальная загрузка
Файл остаётся на устройстве и доступен в Widget State > Uploaded Local File. Это промежуточный шаг: показать предпросмотр, дать отредактировать, обработать — и только потом отправить в облако.
Действие Upload or Save Media
Действие загружает фото или видео в Firebase, Supabase либо на ваш сервер через API. После загрузки файл доступен по ссылке — её показывают сразу или сохраняют в базу.
- Firebase подключён к проекту — см. инструкцию.
- Настроена аутентификация Firebase.
- Настроен Firebase Storage.
- Есть хотя бы одна коллекция, куда записать полученную ссылку.
- Подключите Supabase к приложению.
- Создайте bucket. По умолчанию он закрытый — без авторизации файлы недоступны. Публичным его делать можно, но не для чувствительного содержимого.
- Задайте правила доступа. Пример: для структуры вида pics/uploads так настраивается политика, разрешающая загружать аватар только авторизованным пользователям.
Добавьте действие Upload/Save Media на виджет, с которого пользователь начинает загрузку, и задайте Upload Type. В разделе Media Type/Source выберите, что загружается — фото, видео или и то и другое, — а в списке Media Source укажите источник:
- Camera — снять на камеру.
- Gallery — выбрать из галереи.
- Either Camera or Gallery — спросить у пользователя: откроется нижняя панель с обоими вариантами.
Как показать загруженное — в следующем разделе.
При Upload Type:
- Firebase — нужно развернуть правила хранилища.
- Supabase — нужно указать Bucket Name и Uploaded Folder Path, например
pics/uploaded.
Настройки самого действия:
- Max Width и Max Height — предельные размеры фотографии. Картинка уменьшается с сохранением пропорций. Задавать их стоит почти всегда: снимок с современного телефона весит несколько мегабайт, и хранить его в исходном разрешении под аватар бессмысленно.
- Image Quality — качество от 0 до 100; 100 оставляет исходное.
- Include Media Dimensions — получить ширину и высоту загруженного файла. Операция затратная, включайте только если размеры действительно нужны.
- Include Blur Hash — сгенерировать BlurHash, чтобы показывать размытую заглушку, пока грузится оригинал. Подробнее — в разделе про BlurHash.
- Source Picker Style — оформление нижней панели выбора источника.
- Allow Multiple Images — разрешить выбрать несколько картинок; требует Media Source = Gallery. Ссылки на них берутся из Set from Variable menu > Widget State > Uploaded File URLs (
List<String>). - Show Snackbar — показывать ход загрузки снекбаром.
Подробный видеоразбор действия:
Обработка файла перед отправкой
С Upload Type = Local Upload файл сначала сохраняется на устройстве в виде байтов — его можно показать, изменить или обработать до отправки в облако.
Что это даёт:
-
Предпросмотр и проверка. Пользователь видит, что именно отправляет, и может отказаться.
-
Редактирование. В соцсетях фото для поста правят и накладывают фильтры до публикации, а в облако уходит уже готовый кадр.
-
Обработка данных. В сканерах документов снимок распознаётся текстом, выправляется по контрасту или превращается в PDF — и только потом загружается.
-
Работа без сети. Файл лежит на устройстве, пока не появится интернет.
-
Свой сервер. Файл отправляется вызовом API; ссылку, которую вернёт сервер, нужно сохранить в базе, если содержимое потом показывается.
Ниже — три типичных сценария.
1. Загрузка на свой сервер через API
Добавьте Upload/Save Media с типом Local Upload (Widget State), следующим действием — API call с вызовом, который отправляет файл. Сервер должен вернуть ссылку на загруженный файл; её сохраняют в базу или используют, чтобы показать картинку.
Тело запроса должно быть в формате Multipart — см. настройку multipart-запроса.
2. Сжатие картинки собственным действием
Сначала Upload/Save Media с типом Local Upload (Widget State) — файл ложится на устройство.
Дальше собственное действие (например, compressImageAction) принимает этот файл, сжимает его по байтам и возвращает результат. Сжатый файл отправляется в облако вторым действием Upload/Save Media.
3. Загрузка в Firebase или Supabase после обработки
Первое действие — Upload/Save Media с типом Local Upload (Widget State). После обработки добавьте второе: Upload Type — Firebase или Supabase, File Type — Uploaded File, File to Upload — Widget State > Uploaded Local File.
Действие Upload or Save File
Для файлов любого типа — PDF, MP3 и прочих — есть отдельное действие. Настраивается оно почти так же, как Upload or Save Media.
Для веб-версии приложения и проверки загрузки PDF в Run Mode нужна дополнительная настройка — см. доступ из веба.