How to Successfully Upload Files Over 200MB with DropzoneJS in ASP.NET Core

Описание: Learn how to resolve issues with uploading large files in DropzoneJS by implementing chunking in your ASP.NET Core application.
---
This video is based on the question https://stackoverflow.com/q/62450372/ asked by the user 'Izle' ( https://stackoverflow.com/u/7444481/ ) and on the answer https://stackoverflow.com/a/62465612/ provided by the user 'Izle' ( https://stackoverflow.com/u/7444481/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: DropzoneJS Upload 200+ MB File gets null

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Handling Large File Uploads with DropzoneJS

Uploading large files using DropzoneJS can sometimes be a challenge, especially when working with ASP.NET Core MVC applications. Users often encounter issues where the uploaded files exceed certain size limits, resulting in null values for the file object in the backend controller. In this article, we'll explore how to tackle the problem of uploading 200+ MB files effectively and how to implement chunking to resolve the upload issues you might be facing.

The Problem

In a specific case, a user was trying to upload a video file of 237MB using DropzoneJS with an ASP.NET Core 3.1 backend hosted on Kestrel. Despite configuring the server to allow uploads up to 520 MB, the user noticed that the file object and other parameters were null when the upload exceeded the size limit, leading to unexpected behavior without any error messages. Let’s delve into the configuration and what can be done to resolve this issue.

Key Configurations

Dropzone Configuration: The Dropzone is configured to handle file uploads to a specific action in the controller.

[[See Video to Reveal this Text or Code Snippet]]

Controller Setup: The controller action is designed to accept the uploaded file.

[[See Video to Reveal this Text or Code Snippet]]

Kestrel Configuration: The Kestrel server is configured to support large request bodies and hold connections longer.

[[See Video to Reveal this Text or Code Snippet]]

Despite these configurations, the problem remains that the file was not being recognized when exceeding certain sizes. So, what’s the solution?

The Solution: Implementing Chunking

After thorough investigation, the conclusion is that chunking the uploads is needed. Uploading a file in smaller parts (chunks) can help bypass server limits and ensure that larger files are handled correctly. Here’s how to implement chunked uploads with DropzoneJS.

Step-by-Step Guide to Implement Chunking

Update Dropzone Configuration: Enable chunking within your Dropzone setup.

[[See Video to Reveal this Text or Code Snippet]]

Modify Backend Logic: Ensure that your backend handles incoming chunks correctly and reassembles them once all parts have been uploaded. You should have logic in your controller to manage the saving of each chunk and merging them once the upload is complete.

Testing: After making these updates, conduct several tests with files both below and above 200MB to ensure everything works as expected. This will also help in identifying any issues with the merging process on the server side.

Conclusion

Handling file uploads in web applications is fundamental yet sometimes problematic, especially with larger files. With the right configurations in both your frontend (DropzoneJS) and backend (ASP.NET Core), you can successfully manage file uploads over 200MB by implementing chunking.

By following the steps outlined in this guide, you should be able to effectively handle large file uploads and avoid getting null values in your upload controllers. Happy coding!