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

На этой странице вы узнаете, как настроить Firebase Storage, загрузить файл, получить доступ к загруженному содержимому и получить доступ к файлу в Интернете.

Необходимые условия для загрузки файлов в Firebase

  • Firebase должен быть подключен к вашему проекту. Следуйте инструкциям на этой странице по интеграции Firebase с FlutterFlow.
  • Аутентификация Firebase должна быть правильно настроена. Ознакомьтесь с этой страницей для настройки аутентификации.
  • Хранилище Firebase должно быть установлено и правильно настроено. Это займет всего секунду! Следуйте инструкциям на этой странице.

Построение функции загрузки файла

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

за 1

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

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

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

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

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

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

3. Построение пользовательского интерфейса

Ниже приведен пример построения пользовательского интерфейса, позволяющего загружать и отображать содержимое файла:

  • Сначала перетащите виджет Button в виджет Column с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов и настройте его по необходимости.
  • Добавьте PdfViewer под виджетом кнопки для отображения загруженного файла.
за 2

4. Добавление действия Upload File

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

  1. Выберите виджет (например, кнопку), на который вы хотите добавить действие.
  2. Выберите Actions на панели свойств (правое меню) и нажмите Open. Это откроет редактор потока действий в новом всплывающем окне. Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку «+» под плиткой предыдущего действия и выберите Добавить действие.
  3. Найдите и выберите действие Upload File (в разделе Upload Media).
  4. Установите тип загрузки. Если вы еще не интегрировали Firebase, тип загрузки по умолчанию будет Local (Widget State).
  5. Используйте выпадающий список Тип файла, чтобы указать, хотите ли вы загрузить PDF, аудио (MP3) или любой другой тип файла. Для данного примера выберите PDF.
  6. На шаге 4, если вы выбрали Local (Widget State), вы, вероятно, хотите загрузить файл на ваш внутренний сервер через API. Для этого добавьте следующее действие как вызов API и выберите API, который будет загружать файл на ваш сервер. Обратите внимание, что тело запроса для этого API должно быть в формате Multipart. Смотрите, как настроить API для многочастного тела запроса.
за 3
за 4

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

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

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