Chunk Upload of Large Files from FileManager

[James Cullis]

We are trying to upload very large files (up to 10GB - our clients may need to upload CCTV footage) but are running into issues when using chunking from the FileManager component.

The first chunk appears to be sent to our API (which is hosted on Azure) but subsequent calls fail (see image in the attached zip using my test localhost API)

I have attached sample code files for the javascript that creates the FileManager component (sampleUpload.js) and for the endpoint in our API (sampleAPI.cs).  I have tried many different techniques for this but all seem to fail when chunking.  Also one issue was that the cunking settings were not being set unless I set the chunkSize and maxFileSize in the asyncSettings of the uploadObj in the FileManager  e.g.

fileObject.uploadObj.asyncSettings.chunkSize = 5242880; (this line is included in the sample code)

Any assistance would be greatly appreciated.

Attachment: sample_upload_5cc5bd3e.7z

[Praveen Sellappan]

Hi James,

Greetings from syncfusion support.

We have thoroughly tested the FileManager with chunk upload enabled using the configuration you provided. In our environment, the file uploads successfully without any issues.

To assist you in troubleshooting, we have attached a sample project that includes the provider we used for this testing. Please run this sample and verify that chunk uploading works as expected.

We have confirmed that using your specific chunk upload configuration within this sample produces the intended results. We have also attached the official documentation regarding chunk uploads for your reference:

 Upload in EJ2 JavaScript File Manager component | Syncfusion

Based on our analysis of your specific provider code, we have identified two key areas that are likely causing the issues you've encountered:

1. Array Index Mapping: In onBeforeSend function, the upload data JSON is located at index [3] rather than index [2]. This mismatch prevents your custom parameters from being correctly appended to the request.
2. Incorrect Field Mapping for File Size: In sampleAPI.cs, the code attempts to retrieve the file size using the key total-size. However, the FileManager component sends this value in the form field named size. Consequently, the totalSize variable defaults to 0, causing an invalid Content-Range header to be sent to Microsoft Graph (e.g., bytes 0-5242879/0). Microsoft Graph strictly validates this header and will return a 400 Bad Request for any chunk after the first one if the range is invalid.

To resolve this, please ensure that you are targeting index [3] in your client-side script and reading the size field directly from the request form in your API

Code Snippet:

[sampleAPI.cs]

long.TryParse(Request.Form["size"], out long totalSize);

 

Review the details above and let us know if you need any further assistance.

Regards,

Praveen Sellappan

Attachment: javascriptfilesample_9d7cd395.zip