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

Необходимые условия (только для Firebase)
Для загрузки фотографий или видео в Firebase Storage необходимо, чтобы во FlutterFlow было настроено следующее:
- Firebase должен быть подключен к вашему проекту. Следуйте инструкциям на этой странице по интеграции Firebase с FlutterFlow.
- Аутентификация Firebase должна быть правильно настроена. Ознакомьтесь с этой страницей для настройки аутентификации.
- Хранилище Firebase должно быть установлено и правильно настроено. Это займет всего секунду! Следуйте инструкциям на этой странице.
- Для проекта должна быть настроена как минимум одна коллекция Firebase Collection, чтобы можно было хранить сгенерированный URL.
Добавление действия «Загрузить фото/видео
Выполните следующие шаги, чтобы добавить это действие к любому виджету.
- Выберите виджет (например, кнопку), на который вы хотите добавить действие.
- Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне. Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку «+» под плиткой предыдущего действия и выберите Добавить действие.
- Найдите и выберите действие Upload Photo/Video (в разделе Upload Media).
- Установите тип загрузки. Если вы еще не интегрировали Firebase, тип загрузки по умолчанию будет Local (Widget State).
- Используйте Media Type/Source, чтобы указать, хотите ли вы загрузить фотографию или видео, или и то, и другое с помощью этого действия.
- Используя выпадающий список Media Source, вы можете выбрать между Camera, Gallery и Either Camera or Gallery (эта опция вызовет нижний лист, в котором пользователь может выбрать источник медиафайлов Camera или Gallery).
- Если вы загружаете фотографию, вы можете задать для нее максимальную ширину и высоту с помощью свойств Max Width и Max Height соответственно. Это изменит размер изображения, сохранив соотношение сторон фотографии.
- Вы можете разрешить несколько изображений. Обратите внимание, что для этого Источник медиа должен быть установлен только на Галерею.
- Качество изображения можно регулировать с помощью ползунка или непосредственным вводом значения. Значение должно быть от 0 до 100, где 100 — исходное качество.
- Чтобы дать пользователям знать, что изображение все еще загружается, вы можете включить опцию Показывать полосу закуски.
- Если вы выбрали «Камера» или «Галерея», вам будет предложено еще несколько свойств для определения стиля Source Picker Style (оформление нижнего листа). Вы можете задать семейство шрифтов, цвет текста и цвет фона нижнего листа.
- На шаге 4:
- Если вы выбрали Firebase (в шаге 4), необходимо развернуть правила хранения.
- если вы выбрали Local (Состояние виджета), вы, вероятно, хотите загрузить медиа на ваш внутренний сервер через API. Для этого добавьте следующее действие как вызов API и выберите API, который будет загружать файл на ваш сервер. Обратите внимание, что тело запроса для этого API должно быть в формате Multipart. Смотрите, как настроить API для многочастного тела запроса.
- После того как вы загрузили медиафайл, посмотрите, как отобразить его на виджете в следующем разделе.


Отображение загруженных медиафайлов
Для отображения медиа на той же странице, с которой вызывается действие Upload Photo/Video Action, выполните следующие действия:
- Перетащите соответствующий виджет, который может отображать загруженное медиа. Например, для отображения загруженной фотографии вы можете использовать виджет Image. Аналогично для видео используйте виджет VideoPlayer.
- Перейдите на панель свойств, установите его Тип на Сеть и нажмите Установить из переменной.
- Для медиа, загруженных на Firebase, выберите Источник как Состояние виджета > URL загруженного файла.
- Для медиа, загруженных через API, выберите Источник как Action Outputs > [Имя переменной Action Output] (Api Response). Это должен быть ответ API, который использовался для загрузки медиафайла, и он должен содержать URL загруженного медиафайла. Чтобы получить URL из ответа API, смотрите, как использовать путь JSON.
- Чтобы показать изображение/видео в виде заполнителя, пока не будет загружено текущее, нажмите кнопку Установить из переменной и укажите URL-адрес изображения/видео в свойстве Значение по умолчанию.
- Нажмите кнопку Подтвердить.


Хранение URL загруженного медиафайла
Вы должны хранить URL загруженного медиа в вашей базе данных (коллекция Firebase или таблица базы данных), чтобы вы могли легко получить к нему доступ позже внутри приложения.
Сохранение URL в коллекции Firebase
Чтобы сохранить URL в коллекции Firebase:
- Убедитесь, что у вас есть поле, которое может хранить путь к фотографии или видео, например, photo_url (тип данных: путь к изображению) или video_url (тип данных: путь к видео).
- Теперь используйте действие Firebase Create/Update document для сохранения URL в поле.



Сохранение URL через API бэкенда
Вы можете использовать свой бэкенд AP для сохранения URL, как и для любых других данных. Вот пример обновления данных через API.
Добавление BlurHash
BlurHash — это новый инновационный способ создания компактных и визуально привлекательных держателей изображений. Когда вы прокручиваете веб-страницу или мобильное приложение, вы могли заметить, что некоторые изображения загружаются дольше. Это может расстраивать и нарушать пользовательский опыт. Именно здесь на помощь приходит BlurHash — он позволяет отображать размытую версию изображения, которая выглядит так же, как оригинал, пока настоящее изображение загружается в фоновом режиме.
С помощью BlurHash вы можете создавать более визуально привлекательные и контекстуально релевантные вставки, которые лучше отражают содержание загружаемого изображения. Его можно использовать в различных контекстах, от фотогалерей и приложений для социальных сетей до электронной коммерции и новостных приложений.
Вот как выглядит загрузка изображений с помощью BlurHash:

Ниже описаны шаги по созданию и использованию BlurHash:
- Сгенерировать BlurHash
- Сохранить BlurHash
- Использовать BlurHash
1. Генерирование BlurHash
Отдельного действия для создания Blurhash не существует. Вместо этого вы можете сгенерировать его с помощью действия Upload photo/video. На странице загрузки изображения воспользуйтесь этим действием и просто включите опцию Include Blur Hash. Это автоматически создаст Blurhash для загружаемого изображения.

2. Сохранить BlurHash
Сгенерированный BlurHash доступен через меню Widget State > Uploaded Local File > Media Blur Hash. Прежде чем использовать BlurHash, рекомендуется сохранить его в той же коллекции или таблице, где вы сохранили URL изображения, для удобства доступа.

Вот как получить доступ и сохранить BlurHash в коллекции Firebase с помощью действия create document:

Совет: Вы также можете создать пользовательский тип данных ‘image’, а затем добавить два поля, такие как ‘image_url’ и ‘image_blurhash’, следующим образом:

3. Используйте BlurHash
Чтобы использовать BlurHash, выберите виджет Image, перейдите на панель свойств, включите опцию Use Blur Hash, а затем установите значение Blur Hash String из переменной.
