Загрузка или сохранение файла

С помощью этого действия вы можете загружать любые типы файлов в свое приложение (например, PDF, MP3 и т. д.). Вы можете хранить файл на Firebase, хранилище Supabase или на своем сервере, используя API. После загрузки вы можете получить доступ к файлу через его сгенерированный URL. Этот URL можно использовать для немедленного отображения содержимого или для его хранения в базе данных для будущего извлечения.

Требования к Firebase

1. Firebase должен быть подключен к вашему проекту. Следуйте инструкциям на этой странице для интеграции Firebase с FlutterFlow.
2. Должна быть правильно настроена аутентификация Firebase. Посмотрите эту страницу для настройки аутентификации.
3. Хранилище Firebase должно быть настроено и правильно настроено. Это занимает всего секунду! Следуйте инструкциям на этой странице.
4. Должна быть настроена хотя бы одна Коллекция Firebase для проекта, чтобы можно было сохранить сгенерированный URL.

Требования к Supabase

1. Убедитесь, что вы интегрировали Supabase в свое приложение.
2. Создайте хранилище в Supabase. Совет: Чтобы позволить всем загружать загруженные медиафайлы, можно включить опцию 'Public bucket'.

3. Примените дополнительные правила безопасности, которые определяют, кто может получить доступ к хранилищу. Совет: Если вы загружаете в структуру папок, например 'pics/uploads,' вот как можно добавить политику, которая позволит только аутентифицированным пользователям загружать свое изображение профиля.

Загрузка файла: Обучающий материал

Давайте создадим простой пример, который позволит загружать файл PDF. Вот как это выглядит:

Построение функции загрузки файла включает в себя следующие шаги:

1. Только Firebase: развертывание правил хранилища Firebase
2. Дополнительно: включение доступа к веб-версии
3. Добавление действия Загрузить/Сохранить файл
4. Предварительный просмотр загруженного файла

1. Только Firebase: развертывание правил хранилища Firebase

Правила хранилища Firebase определяют, кто может получить доступ к загруженному файлу. Необходимо настроить и развернуть правила перед началом работы. Сначала необходимо включить Хранилище Firebase на Консоли Firebase, а затем развернуть правила безопасности. Это можно сделать прямо из FlutterFlow.

Проверьте как развернуть правила хранилища Firebase.

2. Дополнительно: включение доступа к веб-версии

Если планируется поддержка веб-версии вашего приложения или желаете протестировать функцию загрузки PDF в Режиме запуска, необходимо выполнить дополнительную конфигурацию, требуемую для некоторых типов файлов, например PDF, чтобы они работали. Узнайте, как включить доступ к веб-версии.

3. Добавление действия Загрузить/Сохранить файл

Перейдите на страницу своего проекта в FlutterFlow и выполните следующие шаги, чтобы определить действие для любого виджета.

1. Выберите Виджет (например, Кнопка), на котором хотите добавить действие.
2. Выберите Действия из панели свойств (правое меню) и нажмите Открыть. Это откроет Редактор действий в новом всплывающем окне.
3. Нажмите на + Добавить действие.
4. Найдите и выберите действие Загрузить/Сохранить файл (в разделе Утилиты > Загрузить данные).
5. Если вы еще не интегрировали Firebase или Supabase, тип загрузки по умолчанию будет Сохранить медиа для загрузки. Однако после интеграции вы сможете выбрать Тип загрузки как Firebase, Supabase или Локальный (Состояние виджета).
6. Используйте выпадающий список Тип файла, чтобы указать, хотите загрузить PDF, Аудио (MP3), Любой или Загруженное медиа. Опция Загруженное медиа позволяет загружать медиафайлы, хранимые на устройстве. Если выбрано Загруженное медиа, убедитесь, что добавили еще одно действие (перед этим действием) с Типом загрузки установленным на Локальная загрузка (Состояние виджета).
7. Можно Разрешить загрузку нескольких файлов. После загрузки нескольких файлов их можно получить через Меню "Задать из переменной" > Состояние виджета > URL загруженного файла (List <String>).
8. Чтобы информировать пользователей о том, что файл все еще загружается, можно включить опцию 'Показать Snackbar'.
9. В Типе загрузки:
   1. Если выбран Firebase, необходимо развернуть правила хранения.
   2. Если выбран Supabase, укажите Название Корзины и установите Путь к папке для загрузки (например, attachments/pdfs). Это путь, по которому файлы будут загружены.
   3. Если выбран Локальная загрузка (Состояние виджета), вероятно, вы хотите сначала сохранить файл на устройстве, а затем загрузить его на свой бэкэнд-сервер через API. Для этого добавьте следующее действие как вызов API и выберите API, который загрузит файл на ваш сервер. Обратите внимание, что тело запроса для этого API должно быть в формате Multipart. Узнайте, как настроить API для тела запроса в формате multipart. Совет: Когда выбран этот тип, у вас есть возможность непосредственно отобразить PDF перед его загрузкой на ваш сервер; см. здесь.

Загрузка в Firebase

Загрузка в Supabase

Загрузка файла через API

4. Предварительный просмотр загруженного файла

После загрузки файла вы получите URL загруженного файла. Вы можете использовать его для отображения содержимого в поддерживаемом виджете.

Вот пример отображения файла PDF в виджете PdfView.

1. Выберите виджет PdfViewer из дерева виджетов или из области холста.
2. Перейдите в Панель свойств (справа от вашего экрана) и прокрутите вниз до раздела PDF Viewer.
3. Найдите Сетевой путь и нажмите Задать из переменной.
4. Для медиафайлов, загруженных на Firebase или Supabase, выберите Источник как Состояние виджета > URL загруженного файла.
5. Для медиафайлов, загруженных через API, выберите Источник как Выходы действия > [Имя переменной выхода действия] (Ответ API). Это должен быть ответ API, который использовался для загрузки файла, и он должен содержать URL загруженного файла. Чтобы извлечь URL из ответа API, узнайте, как использовать путь JSON.
6. Вы можете отображать заполнитель, пока текущий файл загружается. Для этого щелкните Задать из переменной и укажите URL заполнителя в свойстве Значение по умолчанию.
7. Нажмите Подтвердить.

Показ файла, загруженного на Firebase/Supabase

Показ файла, загруженного через API

4.1 Доступ к файлу по байтам (в памяти/еще не загружен)

Если вы просто хотите отобразить PDF в своем приложении без его загрузки куда-либо или если хотите просмотреть PDF перед его отправкой на ваш сервер через API, это можно сделать, настроив Источник PDF как Загруженный файл и указав Источник загруженного файла как Состояние виджета -> Загруженный локальный файл.