Перейти к основному содержимому

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

Эта функция позволяет легко загружать фото или видео в ваше приложение. Вы можете хранить файл в Firebase, Supabase или на своем сервере через API. После загрузки файла можно получить доступ к нему через сгенерированный URL. Этот URL можно использовать для мгновенного отображения содержимого или для сохранения в базе данных для дальнейшего использования.

Требования для Firebase
  1. Firebase должен быть подключен к вашему проекту. Следуйте инструкциям на этой странице для интеграции Firebase с FlutterFlow.
  2. Firebase Аутентификация должна быть правильно настроена. Подробности можно найти на этой странице.
  3. Firebase Storage должен быть настроен и корректно сконфигурирован. Это занимает всего несколько секунд! Следуйте инструкциям на этой странице.
  4. В проекте должна быть настроена как минимум одна Firebase Collection, чтобы сохранить сгенерированный URL.
Требования для Supabase
  1. Убедитесь, что Supabase интегрирован в ваше приложение.
  2. Создайте контейнер для хранения в Supabase. Совет: Чтобы любой пользователь мог скачать загруженные медиафайлы, можно включить "Публичный контейнер".

img.png

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

Добавление действия загрузки/сохранения медиафайлов​

Следуйте шагам ниже, чтобы добавить это действие на любой виджет.

  1. Выберите Виджет (например, кнопку), на который хотите добавить действие.
  2. Выберите Действия в Панели свойств (правое меню) и нажмите Открыть. Это откроет Редактор потоков действий в новом всплывающем окне. Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку "+" под предыдущим действием и выберите Добавить действие.
  3. Найдите и выберите Загрузка/Сохранение медиафайлов (в разделе Утилиты > Загрузка данных).
  4. Если вы еще не интегрировали Firebase или Supabase, тип загрузки по умолчанию будет Сохранить медиафайл для загрузки. После интеграции можно выбрать Тип загрузки как Firebase, Supabase или Локально (Состояние виджета).
  5. Используйте Тип/Источник медиафайла, чтобы указать, хотите ли вы загружать фото, видео или оба типа.
  6. В выпадающем меню Источник медиафайла можно выбрать Камера, Галерея или Камера или Галерея (эта опция вызовет нижнюю панель, где пользователь сможет выбрать источник медиафайла как Камера или Галерея) и Загруженный медиафайл. Если выбран Загруженный медиафайл, добавьте еще одно действие такого же типа перед этим, указав Тип загрузки как Локальная загрузка (Состояние виджета).
  7. Если вы загружаете фото, можно задать максимальную ширину и высоту изображения, используя параметры Макс. ширина и Макс. высота соответственно. Это изменит размер изображения с сохранением его пропорций.
  8. Контролируйте Качество изображения с помощью ползунка или путем прямого ввода значения от 0 до 100, где 100 — исходное качество.
  9. Чтобы получить размеры загруженного медиафайла, т.е. ширину и высоту, включите Включить размер медиафайла. Это вычисление ресурсоемкое, поэтому включайте его только при необходимости.
  10. Используйте Стиль выбора источника для настройки интерфейса нижней панели при выборе источника Камера или Галерея.
  11. Разрешите загрузку нескольких изображений, отметив Разрешить несколько изображений. Для этого Источник медиафайла должен быть установлен на Галерея.
  12. Чтобы информировать пользователя о процессе загрузки изображения, включите Показать уведомление.
  13. В Тип загрузки:
    1. Если выбран Firebase, необходимо развернуть правила хранения.
    2. Если выбран Supabase, укажите Имя контейнера и установите Путь к загружаемой папке (например, pics/uploaded).
    3. Если выбран Локально (Состояние виджета), скорее всего, вы хотите загрузить медиафайл на свой сервер через API. В этом случае добавьте следующее действие как API вызов и выберите API, который загрузит файл на ваш сервер. Примечание: тело запроса для этого API должно быть в формате Multipart.
  14. После загрузки медиафайла, узнайте, как отобразить его на виджете в следующем разделе.

Отображение загруженных медиафайлов​

Чтобы отобразить медиафайл на той же странице, с которой выполнялось действие Загрузка/Сохранение медиафайлов, выполните следующие шаги:

  1. Перетащите виджет, подходящий для отображения загруженного медиафайла. Например, для отображения фото можно использовать Image виджет. Для видео — VideoPlayer виджет.
  2. Перейдите в панель свойств, установите Тип на Сеть, и нажмите Установить из переменной.
  3. Для медиафайлов, загруженных на Firebase или Supabase, выберите Источник как Состояние виджета > URL загруженного файла.
  4. Для медиафайлов, загруженных через API, выберите Источник как Результаты действий > [Имя переменной результата действия] (Ответ API).
  5. Чтобы установить временное изображение/видео до полной загрузки, используйте Значение по умолчанию для указания URL-заполнителя.
подсказка

Для корректной работы рекомендуется указать Значение по умолчанию. Это предотвратит ошибки в приложении, вызванные пустым URL.