Progress Telerik UI for Blazor предлагает множество компонентов для загрузки файлов и управления ими в вашем приложении. Узнайте, какой из них лучше всего подходит для ваших задач.
Одной из важнейших задач в разработке программного обеспечения является загрузка файлов и управление ими. Хотя это может показаться тривиальным, потребности каждого приложения различаются. От кнопки для выбора одного файла до интеграции средства просмотра PDF-файлов — Progress Telerik UI for Blazor предоставляет набор специализированных элементов управления для этой цели. В этой статье мы рассмотрим компоненты, созданные для этих задач, чтобы вы могли лучше понять, что выбрать для вашего конкретного случая. Давайте начнем!
Компонент Blazor FileSelect
Сначала поговорим о компоненте Blazor FileSelect, который полезен, когда вы хотите, чтобы пользователь выбрал один или несколько файлов для обработки в памяти или на сервере. После выбора файлов мы получаем поток для каждого из них, что позволяет обрабатывать их по своему усмотрению.
Этот компонент идеально подходит, например, если вам нужно проверить файлы перед их загрузкой или если вы хотите обработать их в памяти для отображения диаграмм или интерактивных элементов управления.
К преимуществам использования этого компонента можно отнести встроенные нативные проверки, которые помогают настроить набор разрешенных расширений, а также ограничить размер файла. Еще одна особенность заключается в возможности отображения предварительно загруженных файлов при рендеринге компонента, что полезно, если вы хотите показать пользователю последние выбранные им файлы или сохранить определенное состояние в вашем приложении.
Пример использования компонента показан ниже:
В приведенном выше коде можно заметить, что управление списком файлов осуществляется благодаря событиям OnSelect и OnRemove, как показано ниже:
Без сомнения, это компонент, адаптированный к потребностям среды .NET для выбора файлов.
Компонент Blazor Upload
Второй компонент, идеально подходящий для загрузки файлов, — это Blazor Upload. Этот компонент очень похож на Blazor FileSelect, с той разницей, что он был создан для загрузки файлов с локальной системы на веб-сервер. Компонент позволяет пользователям выполнять асинхронные HTTP-запросы к конечным точкам, настроенным с помощью параметров SaveUrl и RemoveUrl, что позволяет загружать и удалять файлы.
Большим преимуществом этого компонента является то, что он предоставляет всю логику для выполнения загрузки файлов в контроллеры ASP.NET Core, которые принимают IFromFile. Он позволяет нам отслеживать прогресс, выполнять базовую проверку на стороне клиента, поддерживает перетаскивание (drag and drop) и другие функции. Кроме того, можно настроить автоматический запуск загрузки или ожидание действий пользователя, например, нажатия кнопки.
Чтобы продемонстрировать его использование, я определил пару минимальных API в Program.cs для сохранения и удаления файлов:
На новой странице мы можем реализовать компонент Upload следующим образом:
В предыдущем коде видно, что компонент TelerikUpload настроен с использованием свойств SaveUrl и RemoveUrl. Свойство SaveUrl указывает на конечную точку сервера, отвечающую за сохранение загруженных файлов, а свойство RemoveUrl указывает на конечную точку сервера, используемую для удаления файлов.
Вместе эти свойства позволяют компоненту управлять операциями загрузки и удаления файлов с помощью методов на стороне сервера.
Результат выполнения вышеуказанного кода выглядит следующим образом:
Хотя визуальное поведение компонентов Upload и FileSelect схоже, первый идеально подходит для файлов, которые должны быть получены контроллером, в то время как второй идеален для приложений на базе WebAssembly, если вы хотите получать и обрабатывать файлы непосредственно в браузере.
Компонент DropZone для Blazor
Если вам нужна выделенная область, куда пользователи могут перетаскивать свои файлы, связанные с существующим FileSelect или Upload, вы можете использовать компонент Blazor DropZone. Когда пользователи перетаскивают файлы в эту область, обработка начнется автоматически.
Одним из больших преимуществ этого компонента является то, что он позволяет полностью настроить внешний вид отображаемых файлов. Вот пример его использования с учетом реализации конечных точек, примененных в предыдущем разделе:
В приведенном выше коде видно, как компонент TelerikDropZone задает Id, который должен использоваться в компоненте Upload или FileSelect через параметр DropZoneId, а также управляет тем, будет ли разрешена множественная загрузка через параметр Multiple. Результат выглядит следующим образом:
На изображении выше мы видим, что компонент ориентирован на улучшение пользовательского опыта.
Компонент Blazor File Manager
Если вам требуется более высокая степень настройки управления файлами, пакет Telerik предлагает компонент Blazor FileManager — элемент управления, похожий на проводник, который позволяет просматривать, отображать и управлять файлами или папками. Этот компонент очень полезен, когда вам нужны приложения с полным контролем над обработкой файлов и набором функций для таких действий, как создание, сортировка, поиск или загрузка.
Он также поддерживает операции перетаскивания, выполнение действий через контекстное меню и даже настраиваемую панель инструментов для добавления наиболее подходящих инструментов для вашего случая использования.
Важно помнить, что компонент поддерживает два способа предоставления данных для FileManager: плоские данные (Flat data) и иерархические данные (Hierarchical data). В первом подходе все элементы находятся в одной коллекции, тогда как в иерархическом режиме каждая папка содержит коллекцию дочерних элементов. Чтобы увидеть это в действии, мы можем определить класс под названием DemoFileEntry:
В модели выше у нас есть списки Items и Directories внутри одного класса, что позволяет нам распознать подход с плоскими данными. С другой стороны, компонент будет выглядеть следующим образом:
Есть несколько важных моментов, которые стоит выделить в приведенном выше коде:
- Используйте TItem="DemoFileEntry", чтобы указать тип данных, который будет использоваться для представления файлов и папок.
- Раздел FileManagerToolBar используется для указания инструментов, доступных на панели инструментов.
- Мы создаем и инициализируем список allItems для создания фиктивных папок и документов для демонстрации.
- Мы обрабатываем некоторые полезные параметры при возникновении изменений, такие как PathChanged и OnRead.
При запуске приложения мы видим приятный графический интерфейс, который позволяет легко управлять файлами:
На изображении выше вы можете увидеть компонент в действии, отметив нативные функции, которые могут значительно помочь пользователям, а также контекстное меню для выполнения действий над файлом.
Компонент Blazor PDF Viewer
Последний компонент, который мы обсудим, — это Blazor PDF Viewer. Хотя этот компонент отличается от предыдущих, он очень полезен для интеграции средства просмотра PDF-файлов в ваше собственное приложение. Компонент включает в себя такие функциональные возможности, как отображение пагинации, масштабирование, печать, поиск текста и другие функции.
Чтобы интегрировать его в приложение Blazor, необходимо загрузить PDF-документ как часть средства просмотра. В следующем примере мы считываем документ из ранее созданной папки загрузок, из которого мы извлекаем массив байтов следующим образом:
Вы можете увидеть, как в предыдущем коде компонент TelerikPdfViewer используется для настройки источника данных для PDF-документа, а также его высоты и ширины. Это лишь малая часть параметров конфигурации компонента. При тестировании он выглядит следующим образом:
Бесспорно, компонент PDF Viewer — это отличный вариант для управления PDF-файлами, отображаемыми в вашем приложении.
Заключение
На протяжении этой статьи мы совершили обзор компонентов Telerik для Blazor, которые позволяют загружать файлы и управлять ими. Вы увидели, как работает каждый из них, и убедились, что для любого сценария использования найдется подходящий компонент: от простых задач, где для выбора файлов нужна всего одна кнопка, до полноценного файлового менеджера для точного контроля доступных параметров каждого файла.
Я призываю вас попробовать их в деле и улучшить пользовательский опыт, добавив их в свои проекты. Весь набор компонентов доступен для бесплатного тестирования в течение 30 дней.
Попробовать сейчас
