Загрузить фото/видео

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

На этой странице вы узнаете, как настроить действие загрузки фото/видео, отобразить загруженное медиа и сохранить URL загруженного медиа.

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

1. Выберите виджет (например, кнопку), на который вы хотите добавить действие.
2. Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне. Если это первое действие, нажмите кнопку + Добавить действие. В противном случае нажмите кнопку «+» под плиткой предыдущего действия и выберите Добавить действие.
3. Найдите и выберите действие Upload Photo/Video (в разделе Upload Media).
4. Установите тип загрузки. Если вы еще не интегрировали Firebase, тип загрузки по умолчанию будет Local (Widget State).
5. Используйте Media Type/Source, чтобы указать, хотите ли вы загрузить фотографию или видео, или и то, и другое с помощью этого действия.
6. Используя выпадающий список Media Source, вы можете выбрать между Camera, Gallery и Either Camera or Gallery (эта опция вызовет нижний лист, в котором пользователь может выбрать источник медиафайлов Camera или Gallery).
7. Если вы загружаете фотографию, вы можете задать для нее максимальную ширину и высоту с помощью свойств Max Width и Max Height соответственно. Это изменит размер изображения, сохранив соотношение сторон фотографии.
8. Вы можете разрешить несколько изображений. Обратите внимание, что для этого Источник медиа должен быть установлен только на Галерею.
9. Качество изображения можно регулировать с помощью ползунка или непосредственным вводом значения. Значение должно быть от 0 до 100, где 100 — исходное качество.
10. Чтобы дать пользователям знать, что изображение все еще загружается, вы можете включить опцию Показывать полосу закуски.
11. Если вы выбрали «Камера» или «Галерея», вам будет предложено еще несколько свойств для определения стиля Source Picker Style (оформление нижнего листа). Вы можете задать семейство шрифтов, цвет текста и цвет фона нижнего листа.
12. На шаге 4:
    1. Если вы выбрали Firebase (в шаге 4), необходимо развернуть правила хранения.
    2. если вы выбрали Local (Состояние виджета), вы, вероятно, хотите загрузить медиа на ваш внутренний сервер через API. Для этого добавьте следующее действие как вызов API и выберите API, который будет загружать файл на ваш сервер. Обратите внимание, что тело запроса для этого API должно быть в формате Multipart. Смотрите, как настроить API для многочастного тела запроса.
13. После того как вы загрузили медиафайл, посмотрите, как отобразить его на виджете в следующем разделе.

Для отображения медиа на той же странице, с которой вызывается действие Upload Photo/Video Action, выполните следующие действия:

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

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

Чтобы сохранить URL в коллекции Firebase:

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

Вы можете использовать свой бэкенд AP для сохранения URL, как и для любых других данных. Вот пример обновления данных через API.

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

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

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

Ниже описаны шаги по созданию и использованию BlurHash:

1. Сгенерировать BlurHash
2. Сохранить BlurHash
3. Использовать BlurHash

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

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

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

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

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