DevExtreme - File Uploader - Chunk Uploading and Client-Side Validation (v18.2)

DevExtreme Team Blog
09 November 2018

Two very useful new File Uploader features are coming your way in v18.2: Chunk Uploading and Client-Side Validation.

As usual, these features are available to you on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

Chunk Uploading

When users upload large files, it is not safe to do so in a single request. For instance,the server might go down during the process and lose data kept in memory. Of course large files uploaded in single requests can also cause resource issues on a server.

In v18.2 we implemented support for chunk uploading. You activate it by setting the chunkSize option like this:

$('#file-uploader').dxFileUploader({
  chunkSize: 200000,
  uploadUrl: '...'
});

As a result, your server will receive multiple requests to the uploadUrl, including details about the file and the chunk index (see the chunkSize documentation). The format is multipart/form-data, with the new chunk-specific information passed as an extra part in JSON format.

Chunk Uploading

Client-Side Validation

You can now configure the File Uploader with a maximum file size and a set of allowed file extensions:

$('#file-uploader-images').dxFileUploader({
  maxFileSize: 4000000,
  allowedFileExtensions: ['.jpg', '.jpeg', '.gif', '.png']
});

These validations are executed on the client, which means that the user receives instant feedback and unnecessary traffic to the server may be prevented. Note that this is not a mechanism to prevent abuse – you still need to perform server-side validation of uploaded data!

Client-Side Validation

Your Thoughts Count

If you have any thoughts or concerns about the new features, please get back to us by leaving a comment below or by opening a Support Center ticket or a GitHub issue. We appreciate your feedback!

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Jim Foye
Jim Foye

Both of these will be very useful features.

9 November 2018
Uwe Keim
Uwe Keim

Awesome extensions! Maybe it is time for me to throw out Fine Uploader and use the DevExpreme one instead.

11 November 2018
Robert Primorac
Robert Primorac

Nice. Now I can remove that bloated code from my application.

14 November 2018
South River Technologies
South River Technologies

This is working great! Do you have any recommendations for optimal Chunk Size?

1 December 2018
Andrew M (DevExpress)
Andrew M (DevExpress)

Hello,

Unfortunately, it is difficult to give an accurate number as it is different for every specific case. This depends on the available memory of the server and the throughput of your network. If server resources are limited, the chunk size shouldn't be set to a big value.

I suggest you experiment with the chunk size: for example, set the value to 200 kb (like in the example) and try to increase or decrease it. Additionally, control the efficiency of your server. In any case, the chunk size shouldn't be more than the available memory of your server.

3 December 2018

Please login or register to post comments.