Progress Telerik UI for Blazor has a slew of components available for file uploads and management capabilities in your app. See which one is right for your app.
One of the critical tasks in the world of software development is uploading and managing files. Although it may seem trivial, the needs of each application vary. From a button to select a single file to integrating a PDF file viewer, Progress Telerik UI for Blazor provides a set of specialized controls for this task. In this article, let’s examine the components created for this purpose so you have a better view of which to choose for your specific use case. Let’s get started!
The Blazor FileSelect Component
Let’s talk first about the Blazor FileSelect component, which is useful when you want a user to select one or several files and process them in memory or on the server. After the files have been selected, we obtain the stream for each file, which allows us to process them as we see fit.
This component is ideal, for example, if you need to validate files before uploading them, or when you want to process them in memory to display charts or interactive controls.
Some of the advantages of using the component are that it has built-in native validations that help configure a set of allowed extensions, as well as limit file size. Another feature is that it is possible to show preloaded files when the component renders, useful when you want to show the user the last files they selected or to store some kind of state in your application.
An example of using the component is shown below:
In the above code, you can notice that a list of files is managed, which are processed thanks to the events OnSelect and OnRemove as shown below:
Without a doubt, a component tailored to the needs of the .NET environment for file selection.
The Blazor Upload Component
The second component ideal for when we want to upload files is Blazor Upload. This component is very similar to Blazor FileSelect, with the difference that it was created to upload files from a local system to a web server. The component allows users to make asynchronous HTTP requests to the endpoints configured via the parameters SaveUrl and RemoveUrl, allowing uploading and deleting files.
The great advantage of this component is that it provides all the logic to perform file uploads to ASP.NET Core controllers that accept IFromFile. It lets us handle progress, perform basic client-side validation, supports drag and drop, among other features. Additionally, it is possible to configure whether to start the upload automatically or wait for the user to perform an action, such as pressing a button for this purpose.
To show its use, I have defined a couple of minimal APIs in Program.cs to save and delete files:
On a new page, we can implement the Upload component as follows:
In the previous code, you can see that the TelerikUpload component is configured with both the SaveUrl and RemoveUrl properties. The SaveUrl property points to the server endpoint responsible for saving uploaded files, while the RemoveUrl property specifies the server endpoint used to delete files.
Together, these properties allow the component to manage file upload and removal operations through server-side methods.
The result of the above execution is the following:
Although the visual behavior of the Upload and FileSelect components is similar, the first is ideal for files that must be received by a controller, while the second is ideal for WebAssembly-based applications if you want to receive and manipulate files directly in the browser.
The DropZone Component for Blazor
If you need a dedicated area where users can drag and drop their files linked to an existing FileSelect or Upload, you can use the Blazor DropZone component. When users drop files onto the area, processing will start automatically.
One of the great advantages of this component is that it allows you to fully customize the appearance of the displayed files. Here is an example of its use, considering the implementation of the endpoints used in the previous section:
In the code above, you can see how the TelerikDropZone component specifies a Id, which must be used in the Upload or FileSelect component via the DropZoneId parameter, in addition to controlling whether multiple uploads will be allowed through the Multiple parameter. The result is the following:
In the image above we can see that the component is geared toward providing a better user experience.
The Blazor File Manager Component
If you need a higher degree of customization for file management, the Telerik suite offers the Blazor FileManager component, which is an explorer-like control that allows browsing, viewing and managing files or folders. This component is very useful when you require applications with full control over file handling and a set of features for actions such as creating, sorting, searching or uploading.
It also supports drag-and-drop operations, executing actions via a context menu and even a customizable toolbar to add the best tools for your use case.
One thing to keep in mind is that the component supports two ways of providing data to the FileManager component, which are Flat data and Hierarchical data. In the first approach all items are in a single collection, while in hierarchical mode each folder contains a collection of children. To see it in action, we can define a class called DemoFileEntry:
In the model above, we have the lists Items and Directories within the same class, which allows us to recognize a Flat data approach. On the other hand, the component would look like the following:
There are some important points to highlight from the code above:
- Use TItem="DemoFileEntry" to indicate the data type that will be used to represent files and folders.
- The FileManagerToolBar section is used to specify the tools available in the toolbar.
- We create and initialize a list allItems to create the demo’s mock folders and documents.
- We handle some useful parameters when a change occurs, such as PathChanged and OnRead.
When running the application, we can see a nice graphical interface that allows file management in an easy way:
In the image above you can see the component in action, noting native features that can greatly help users, as well as a context menu to perform actions on the file.
The Blazor PDF Viewer Component
The last component we’ll discuss is the Blazor PDF Viewer. Although this component is different from the previous ones, it is very useful for integrating a PDF file viewer into your own application. The component includes functionalities such as showing pagination, zooming, printing, text search, among other features.
To integrate it into a Blazor application, you must load a PDF document as part of the viewer. In the following example, we read a document from the previously created uploads folder, from which we extract the byte array as follows:
You can see how in the previous code the TelerikPdfViewer component is used to configure the data source for the PDF document, as well as the height and width. This only shows a small part of the component’s configuration options. When tested, it appears as follows:
Without a doubt, the PDF Viewer component is an excellent option for having control over the PDF files displayed in your application.
Conclusion
Throughout this article, we have taken a tour of the Telerik components for Blazor that allow uploading and managing files. You have seen how each of them works and confirmed that there is a component for every use case, from simple scenarios where a single button is needed to select files, to a complete file manager to precisely control the options available for each.
I encourage you to try them out and enhance your users’ experience by adding them to your projects. The whole suite of components is available to try free for 30 days.
Try Now
