Загрузка файлов

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

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

Типы загрузки медиафайлов

FlutterFlow предлагает три метода загрузки медиафайлов, каждый из которых подходит для разных сценариев:

Firebase

Медиафайлы можно загружать непосредственно в Firebase Storage — надежное облачное решение. После завершения загрузки вы можете использовать Widget State > Uploaded File URL для предварительного просмотра медиафайла или сохранения URL файла для последующего использования.

Supabase

Вы можете загружать медиафайлы в Supabase bucket в указанном расположении. После загрузки URL файла становится доступным через Widget State > Uploaded File URL, что позволяет предварительно просмотреть медиафайл или сохранить URL для последующего использования в приложении.

Local Upload (Widget State)

Этот метод сначала сохраняет медиафайл на устройстве, делая его доступным через Widget State > Uploaded Local File. Вы можете предварительно просмотреть, отредактировать или обработать файл перед его загрузкой в облачное хранилище.

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

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

Предварительные требования для Firebase

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

Предварительные требования для Supabase

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

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

Чтобы создать рабочий процесс загрузки медиафайла, добавьте действие Upload/Save Media к виджету (например, кнопке или любому интерактивному элементу), где пользователи должны инициировать загрузку файла. Затем настройте тип загрузки. В разделе Media Type/Source укажите тип медиафайла для загрузки: фото, видео или оба. Затем используйте выпадающий список Media Source, чтобы выбрать источник медиафайла:

• Camera: Прямой захват медиафайла с помощью камеры устройства.
• Gallery: Выбор существующего медиафайла из галереи устройства.
• Either Camera or Gallery: Позволяет пользователям выбрать источник через нижнюю панель, где они могут выбрать камеру или галерею в качестве источника медиафайла.

После загрузки медиафайла см. раздел о его отображении на виджете.

к сведению

При установке Upload Type в:

• Firebase: Вы должны развернуть правила хранилища.
• Supabase: Укажите Bucket Name и настройте Uploaded Folder Path (например, pics/uploaded). Это путь, куда будет загружен медиафайл.

Действие Upload Media предлагает различные настройки для контроля способа загрузки, изменения размера и обработки медиафайлов в вашем приложении. Ниже приведен разбор всех доступных свойств.

• Max Width и Max Height: Если вы загружаете фото, вы можете установить максимальную ширину и высоту с помощью этих свойств. Это изменит размер изображения, сохраняя его исходное соотношение сторон.
• Image Quality: Управляйте качеством изображения, регулируя ползунок или вводя значение от 0 до 100, где 100 сохраняет исходное качество.
• Include Media Dimensions: Включите эту опцию, чтобы получить размеры (ширину и высоту) загруженного медиафайла. Учтите, что эта операция ресурсоемкая, поэтому включайте ее только при необходимости.
• Include Blur Hash: Автоматически генерирует BlurHash для загруженного изображения, что позволяет отображать размытое заполнители во время загрузки полного изображения. Подробнее см. в разделе BlurHash.
• Source Picker Style: Настройте внешний вид нижней панели интерфейса, которая появляется при выборе источника медиафайла (например, Camera или Gallery).
• Allow Multiple Images: Включите эту опцию, чтобы позволить пользователям выбирать несколько изображений. Обратите внимание, что для этого Media Source должен быть установлен в Gallery. После загрузки нескольких изображений вы можете получить доступ к их URL через Set from Variable menu > Widget State > Uploaded File URLs (List<String>).
• Show Snackbar: Включите эту опцию, чтобы уведомлять пользователей о прогрессе загрузки с помощью сообщения в snackbar.

Ознакомьтесь с нашим видео на YouTube для подробного объяснения действия Upload or Save Media [Action] в FlutterFlow.

Временное хранение медиафайла для загрузки

Вы также можете временно сохранить медиафайл на устройстве перед его загрузкой в облачное хранилище, установив Upload Type в Local Upload. Это сохраняет файл в формате Bytes, что позволяет предварительно просмотреть, отредактировать или обработать его перед окончательной загрузкой.

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

• Предварительный просмотр или проверка медиафайла: Покажите пользователю предварительный просмотр в приложении, прежде чем он решит завершить или отменить загрузку.

• Редактирование перед отправкой: В приложениях для социальных сетей пользователи загружают фото для постов или сторис. Приложение временно сохраняет изображение на устройстве, пока пользователи редактируют или применяют фильтры, а затем загружает окончательное изображение в облачное хранилище.

• Выполнение операций с данными: В приложениях для сканирования документов пользователи захватывают изображения документов, которые временно сохраняются на устройстве. Приложение получает доступ к байтам файла, чтобы применить OCR (оптическое распознавание символов), улучшить контраст или преобразовать изображение в PDF перед загрузкой окончательного обработанного файла в облачное хранилище.

• Функциональность в автономном режиме: Сохраните медиафайл локально и отложите загрузку до восстановления доступа к интернету.

• Загрузка на сервер: Когда вы хотите сохранить файл внешне, вы можете выполнить вызов API (например, multipart form data) для передачи локального файла. Обязательно получите и сохраните результирующий URL файла в базе данных, если планируете отображать его позже.

Вот несколько примеров загрузки файла на устройство и его использования в разных сценариях:

Пример 1: Загрузка на собственный сервер через API

Сначала настройте действие Upload/Save Media с типом загрузки Local Upload (Widget State). Затем добавьте следующее действие как API call и выберите API, который загрузит файл на ваш сервер. После завершения вызова API убедитесь, что сервер возвращает URL загруженного файла. Используйте этот URL для сохранения в базе данных или отображения загруженного изображения.

к сведению

Тело запроса для API должно быть в формате Multipart. См., как настроить API для тела запроса multipart.

Пример 2: Сжатие изображения с помощью пользовательского действия

Сначала настройте действие Upload/Save Media с типом загрузки Local Upload (Widget State). Это временно сохранит медиафайл на устройстве.

Далее создайте и добавьте пользовательское действие (например, compressImageAction), которое принимает локально сохраненный файл как входные данные и сжимает его с использованием данных bytes. Убедитесь, что пользовательское действие обрабатывает изображение и возвращает сжатый файл. После сжатия файл можно загрузить в облачное хранилище с помощью другого действия Upload/Save Media.

Пример 3: Загрузка в Firebase или Supabase

Сначала настройте действие Upload/Save Media с типом загрузки Local Upload (Widget State). После модификации или обработки файла добавьте еще одно действие Upload/Save Media к виджету, который подтверждает окончательную загрузку. Установите Upload Type в Firebase или Supabase, выберите File Type как Uploaded File и укажите File to Upload из Widget State > Uploaded Local File.

Действие «Загрузка или сохранение файла»

Вы можете загружать любой тип файла в ваше приложение, такой как PDF, MP3 и другие. Процесс загрузки файлов почти идентичен действию «Загрузка или сохранение медиафайла».

Веб-доступ для PDF-файлов

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