Howto use chunkupload within FileManager ?

Hi,

i am trying to upload large Files up to 100GB with the Filemanager in our Blazor-Server-Side app.

Here is my razor code:

SfFileManager TValue="FileManagerDirectoryContent" AllowDragAndDrop="true" AllowMultiSelection="true">
    <FileManagerUploadSettings MaxFileSize=20000000000 AutoClose="true"> @
    </FileManagerUploadSettings>
    <FileManagerAjaxSettings
        Url="https://localhost:3000/api/app/filemanager/fileoperations"
        GetImageUrl="https://localhost:3000/api/app/filemanager/getimage"
        UploadUrl="https://localhost:3000/api/app/filemanager/upload"
        DownloadUrl="https://localhost:3000/api/app/filemanager/download">
    </FileManagerAjaxSettings>
</SfFileManager>


<SfUploader ID="UploadFiles" MaxFileSize=100000000000>
    <UploaderAsyncSettings SaveUrl="https://localhost:3000/api/app/filemanager/save" RemoveUrl="https://localhost:3000/api/app/filemanager/remove" ChunkSize=500000 RetryCount=5 RetryAfterDelay =3000>
</UploaderAsyncSettings>
</SfUploader>


i am able to upload small files
(till 30mb) without problems with the filemanager.with bigger files i get an error :Butif i upload the same file at same site with the Uploader below the filemanager it works perfectly.

tempsnip.png


How can i use chunkuploads withFilemanagerfor large files ?
i have tryd overriding the
UploadUrlfrom filemanager but this didn't work as expected.
Maybe there is a way i can directly access the file upload controller you use within filemanager to set these settings?

My app uses exactly your code from your site:
https://blazor.syncfusion.com/documentation/file-manager/getting-started
https://blazor.syncfusion.com/documentation/file-upload/chunk-upload

Here the controllerparts:


public IActionResult Upload(string path, IList uploadFiles, string action)

{
//Invoking upload operation with the required paramaters
// path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload)
FileManagerResponse uploadResponse;
uploadResponse = operation.Upload(path, uploadFiles, action, null);
if (uploadResponse.Error != null)
{
Response.Clear();
Response.ContentType = "application/json; charset=utf-8";
Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
Response.HttpContext.Features.Get().ReasonPhrase = uploadResponse.Error.Message;
}
return Content("");
}
public void Save(IList chunkFile, IList UploadFiles)
{
long size = 0;
try
{
// for chunk-upload
foreach (var file in chunkFile)
{
var filename = ContentDispositionHeaderValue
.Parse(file.ContentDisposition)
.FileName
.Trim('"');
filename = fullPath + $@"\{filename}";
size += file.Length;
if (!System.IO.File.Exists(filename))
{
using (FileStream fs = System.IO.File.Create(filename))
{
file.CopyTo(fs);
fs.Flush();
}
}
else
{
using (FileStream fs = System.IO.File.Open(filename, FileMode.Append))
{
file.CopyTo(fs);
fs.Flush();
}
}
}
}
catch (Exception e)
{
Response.Clear();
Response.StatusCode = 204;
Response.HttpContext.Features.Get().ReasonPhrase = "File failed to upload";
Response.HttpContext.Features.Get().ReasonPhrase = e.Message;
}
}









6 Replies 1 reply marked as answer

HU huskaner September 16, 2021 11:21 AM UTC

Mmmh, i did some testing.. It seems that the chunk upload sometimes is broken, and the saved file is corrupt..I did test with 500mb file multiple times..


I run my tests with visual studio and iisexpress and see during debugging and error in the Save Function which is used for chunk upload. i ll get :

"The process cannot access the file .... because it is being used by another process."

But that error doesn't seem to interrupt the upload ? i dont receive an error message in the upload ui..?

Any Ideas also on that ?



IL Indhumathy Loganathan Syncfusion Team September 16, 2021 03:08 PM UTC

Hi Hakan, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in File Manager component. Please find the answer for your queries. 
 
Query1: How can i use chunkupload with File Manager for large files 
 
We understand that you want to perform chunk upload inside File Manager by using external Uploader component. We have prevented the Upload operation in ToolbarItemClicked event and triggered the Upload operation by making an interop call. Refer to the below code snippet. 
 
[Index.razor] 
<SfUploader ID="UploadFiles" AutoUpload="false" MaxFileSize=100000000000> 
    <UploaderAsyncSettings SaveUrl="/api/FileManager/Save" ChunkSize=500000> 
    </UploaderAsyncSettings> 
    <UploaderEvents Success="OnSuccess" FileSelected="OnFileSelect"></UploaderEvents> 
</SfUploader> 
 
<SfFileManager TValue="FileManagerDirectoryContent" @ref="filemanager" AllowDragAndDrop="true" AllowMultiSelection="true"> 
    ... 
    <FileManagerEvents TValue="FileManagerDirectoryContent" ToolbarItemClicked="ToolbarClicked"></FileManagerEvents> 
</SfFileManager> 
 
 
@code{ 
    SfFileManager<FileManagerDirectoryContent> filemanager; 
    public void ToolbarClicked(ToolbarClickEventArgs<FileManagerDirectoryContent> args) 
    { 
        if (args.Item.Text == "Upload") 
        { 
            //Cancel the File Manager upload 
            args.Cancel = true; 
           //Trigger upload operation of Uploader 
            JS.InvokeAsync<string>("callUpload"); 
        } 
    } 
 
    public void OnSuccess(SuccessEventArgs args) 
    { 
        //Refresh the uploaded files 
        filemanager.RefreshFilesAsync(); 
    } 
    public void OnFileSelect(SelectedEventArgs args) 
    { 
        var p = filemanager.Path; 
        // add additional data as key-value pair. 
        args.CustomFormData = new List<object> { new { Path = p } }; 
    } 
} 
<style> 
    .e-file-select-wrap { 
        display: none; 
    } 
</style> 
 
[_Host.cshtml] 
<script> 
    window.callUpload = () => { 
        document.getElementById("UploadFiles").click(); 
    };  
</script> 
 
We saved the uploaded files in the corresponding path in server side. 
 
[FileManagerController.cs] 
// Upload save method for chunk-upload 
[Route("Save")] 
public void Save(IList<IFormFile> chunkFile, IList<IFormFile> UploadFiles, IFormCollection form) 
{ 
    var data = Request.Form["path"]; 
    var path = data.ToString().Replace("/", "\\"); 
    long size = 0; 
    try 
    { 
        // for chunk-upload 
        foreach (var file in chunkFile) 
        { 
            var filename = ContentDispositionHeaderValue 
                                .Parse(file.ContentDisposition) 
                                .FileName 
                                .Trim('"'); 
            filename = this.basePath + "\\" + this.root + path + "\\" + $@"{filename}"; 
            size += file.Length; 
            if (!System.IO.File.Exists(filename)) 
            { 
                using (FileStream fs = System.IO.File.Create(filename)) 
                { 
                    file.CopyTo(fs); 
                    fs.Flush(); 
                } 
            } 
            else 
            { 
               ……… 
               ……… 
}} 
 
Please find the sample from below link. 
 
 
Query 2: Facing error "The process cannot access the file .... because it is being used by another process" 
 
We suspect that this is a general issue during upload in your application. We suggest you to refer the below link for suggestions to resolve the issue. 
 
 
 
 
If the issue persists, please share the steps to replicate your issue or reproduce the issue in the provided sample to assist you promptly. 
 
Please let us know if you need further assistance. 
 
Regards, 
Indhumathy L

Marked as answer

HU huskaner September 16, 2021 08:18 PM UTC

Hi Indhumathy,

i thank you for your
comprehensive answer. Wow ! A really fast, good and detailed response.

And the best is you did include a working sample that looks like what i wanted to achieve.
I did try that sample and it works like a charm !


I hope you will integrate in future the chunk upload in Filemanager directly, 

so it uses chunk upload automatically if necessary for big files.


I will check your links you provide for the second error.

Could also be an issue with visual Studio 2022.


I hope your Support says as that sharp as it just is.

We did evaluate syncfusion for us, and now gonna purchase it.


Thank you.




KR Keerthana Rajendran Syncfusion Team September 17, 2021 07:36 AM UTC

Hi Hakan, 
 
Thanks for your interest with Syncfusion products and it’s always our pleasure to assist you. 
 
We are glad to hear that the provided sample helped you. We would like to let you know that “Provide chunk upload support for File Manager component” had already been considered as a feature from our end. This feature will be included in any of our upcoming releases. You can track the status through the below link. 
 
 
Please check the shared links for the second error(“The process cannot access the file”) and get back to us with details if you need any further assistance. 
 
Regards, 
Keerthana R. 



HU huskaner September 27, 2021 11:40 AM UTC

Hi Syncfusion Support,

i did face the second issue " The process cannot access the file .... because it is being used by another process" a few times.


We use two Components here in that example the Filemanager and a SfUploader.
After choosing files with the filemanager we cancel the upload through filemanager and start an upload with the sfuploader Componenent. But although we cancel the upload from filemanager it seems it tries to start the upload before it reaches the cancel statement and so it blocks the process..

If i use only the sfupload this error doesn't seem to occur. But i  will test further.

I am not sure why this happens. The code should avoid that. Maybe its an timming issue because of an async upload call from the filemanager. Can you please take a look at this again.. ?



IL Indhumathy Loganathan Syncfusion Team September 28, 2021 12:21 PM UTC

Hi Hakan, 
 
We have validated your reported query in the previous shared sample but we are unable to replicate the issue. For your reference, we have recorded the behavior in the below video. 
 
 
We also suggest you to try the below ways to resolve the issue. 
 
 
 
We understood that you have been facing some issue while cancelling the upload operation. But to replicate the issue at our end, we need exact steps to replicate the issue or a video footage. Also confirm, whether you are facing the same issue in our shared sample as well. These details would help us to assist you promptly. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Loader.
Up arrow icon