Blazor Components - New Upload, Chart Rotation, and Month-Year Navigation in Calendar (v19.2.4)

ASP.NET Team Blog
26 February 2020

This post describes our new Upload component and enhancements made to the DevExpress UI for Blazor in our most recent release (v19.2.4). As you may know, we've released multiple updates over the last couple of months. You can read our last Blazor UI-related announcement here.

.NET Core 3.1.2 Support

Our Blazor components now support .NET Core 3.1.2 update.

New Blazor File Upload Component

This release includes a new Blazor Upload control. The Upload control allows your end users to upload files to your server via AJAX requests.

DevExpress Blazor Upload Component

Blazor File Upload Configuration

To configure the Upload control, the following client and server side properties must be set/specified:

Client-Side

  • Specify the Name property. This value is required to access uploaded files.
  • Set the UploadUrl property. Must be set to the server-side controller action that handles the upload requests.
    <DxUpload Name="myFile"
        UploadUrl="https://[doamin name]/api/Upload/UploadFile/">
    </DxUpload>

Server-Side

Use the following code to create a controller and action used to check the accepted file before saving it to the target location:

    [Route("api/[controller]")]
    public class UploadController : ControllerBase {
        [Route("UploadFile")]
        // "myFile" is the value of the Upload's "Name" property.
        public ActionResult UploadFile(IFormFile myFile) {
           // Process the uploaded file here.
        }
    }
To learn more, please review the Blazor Upload control's documentation.

Chunk Upload for Large Files

To help you upload large files, our Upload component provides the new chunk mode. In this mode, the Upload component splits large files into small packets and sends them to the server in multiple requests.

To enable, set the ChunkSize property to the desired upload packet size. Therefore, the maximum size of each chunk will be split into before uploading. For example, the following code will upload files in one-megabyte increments:

    <DxUpload ... ChunkSize="1000000">

    </DxUpload>
You'll need to configure your controller to accept file chunks, merge them to a single file, and save it. Please take a look at [this help topic](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxUpload#chunk-upload-for-large-files) for more information.

Drag and Drop

Our Blazor Upload control supports drag and drop operations. To activate drag and drop, set the external zones where end users can drop files.

Multiple File Upload

End users can upload multiple files. To activate multi-file upload, set the AllowMultiFileUpload property to true.

Instant Upload and Upload on a Button Click

The Upload component allows you to choose between two modes via the UploadMode property:

  • Instant (default) - to upload files immediately after a user selects or drops a file.
  • OnButtonClick - to only upload files once a user clicks the upload button.

DevExpress Blazor Upload On Button Click

File Validation

You can also validate files on the client before sending them to the server. Use the MaxFileSize property to limit the minimum and maximum file size and the AllowedFileExtensions property to restrict which file types can be uploaded:

    <DxUpload MaxFileSize="4000000"
         AllowedFileExtensions="@(new List<string> { ".jpg", ".jpeg", ".gif", ".png" })" ... >
    </DxUpload>

DevExpress Blazor Upload Validation

API Changes

We've made some changes to the API since our last release (v19.2.4-Preview). To learn more, please review our API change log.

Charts Rotation

Our Blazor Chart component now ships with a Rotated property. Set the property to true to swap axes and display the argument (X) axis vertically and the value (Y) axis horizontally.

DevExpress Blazor Chart Rotation

Calendar Navigation Enhancements

With this release, end users can quickly find any date in our Blazor Calendar. The Calendar now supports navigation between months, years, decades, and centuries.

DevExpress Blazor Calendar Navigation

Updated XAF's Blazor UI & Example with Security System APIs

For our XAF customers: We've updated our online XAF Blazor demo based on release versions of DevExpress Blazor components.

Even if you do not plan to use XAF's UI, you may find this new non-XAF Blazor Server demo and tutorial helpful. It demonstrates how to use DevExpress Blazor components with XAF's non-visual APIs for user authentication and group authorization. For more information on our business application framework for .NET developers, please follow the XAF Team blog.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
10 comment(s)
Gosha
Gosha
Good job!
26 February 2020
OK350
OK350
Awesome!!  Great stuff.  Can’t wait for more :) 
26 February 2020
Andrew Fraser
Andrew Fraser

Yes, please keep the Blazor features and updates coming :-)

Andy

27 February 2020
Tom Mcd
Tom Mcd
Nice!
28 February 2020
Tom Mcd
Tom Mcd
Nice!
28 February 2020
Customer5707
Josip
Keep up the good work.
29 February 2020
Nemo
Nemo
Nice! Please add more features to DxDataGrid, if you can get it on parity with Winforms/WPF grids soon that would be awesome! Thanks.
29 February 2020
Tomas Winston
Tomas
Looks great! I would second what Nemo said however. It would be great to see more features to the DataGrid control. For example, resizing a column in the grid should be possible - it is currently possible with one of your main competitors!
5 May 2020
Jaime Alvarez [VOLUNDAT]
Jaime Alvarez

How can I binding OData V4 with Blazor DxGrid

How can I add custom fields on Appoiment Scheduler


Regards!!!

11 May 2020
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Jamie,

I recommend contacting our support team and they can help you: https://supportcenter.devexpress.com/

12 May 2020

Please login or register to post comments.