Chunked Upload

[AP]

I'm trying to set up an upload for some quite large files, which involves using chunked asynchronous uploads.

Once the file has been transferred, a record is saved to a database, with details of the file name, and an ID passed back to the web page.

I was able to get this working when the upload wasn't using chunks, but I'm now a bit stuck.

The example in your documentation (https://docs.telerik.com/aspnet-mvc/html-helpers/editors/upload/chunk-upload ) seems to be written for .later versions of the >NET framework (or .NET core), as I cannot find namespaces to include IFormFile or JsonSerializer . I'm using .NET Framework 4.7.2

I have got a version working (the file is saved to the upload folder), however, when the upload is complete, it does not call the Save procedure., which saves a record to a database, renames the file, and passes back a fileID.

The code is:-

public ActionResult ChunkSave(IEnumerable<HttpPostedFileBase> files, string metaData)
        {

           if (metaData == null)
            {
                return Save(files);
            }

            MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));
            var serializer = new DataContractJsonSerializer(typeof(ChunkMetaData));
            ChunkMetaData chunkData = serializer.ReadObject(ms) as ChunkMetaData;

            string path = String.Empty;
            string uploadFolder = SystemsPortal.Properties.Settings.Default.GLInterfaceUploadFolder;

            if (chunkData.chunkIndex == 0)
            {
               //1st chunk - check if file exists, and if so, delete before saving
                path = Path.Combine(uploadFolder, chunkData.fileName);

                if (System.IO.File.Exists(path))
                {
                    System.IO.File.Delete(path);
                }

            }

            path = String.Empty;
            // The Name of the Upload component is "files"
            if (files != null)
            {
                foreach (var file in files)
                {
                    path = Path.Combine(uploadFolder, chunkData.fileName);

                    AppendToFile(path, file.InputStream);
                }
            }

            Models.FileResult fileBlob = new Models.FileResult();
            fileBlob.uploaded = chunkData.totalChunks - 1 <= chunkData.chunkIndex;
            fileBlob.fileUid = chunkData.uploadUid;


           return Json(fileBlob);



        }

The control definition is:-

@(Html.Kendo().Upload()

.Name("files")

.Multiple(false)

.Events(e => e.Success("ulSuccess"))

 

.Async(a => a

    .Save("ChunkSave", "GLInterfaceUpload")

    .ChunkSize(250000)

     

   

    .AutoUpload(true)

)

 

)


function ulSuccess(e) {


var response = e.XMLHttpRequest.responseText;
fileID = response;
alert(fileID);
e.sender.enable(false);
$('#divButton').show();


}

 

 

The Success event does fire, but the data returned, but as the Save procedure has never been called, no fileID is passed back.

How can I get this working as it should?

 

Thanks

[Ivan Danchev]

Hello Andrew,

Check the ASP.NET MVC source section in this demos, where you can see how the controller actions are implemented: https://demos.telerik.com/aspnet-mvc/upload/chunkupload

HttpPostedFileBase is used in the demo:

public ActionResult Chunk_Upload_Save(IEnumerable<HttpPostedFileBase> files, string metaData)

instead of IFormFile.

We will update the documentation and show this server-side logic in the chunk upload section.

Regards,
Ivan Danchev
Progress Telerik

[shoaib]

Hi Ivan, 

 

I used the sample code provided in the above mentioned link, it did not work for me. There was nothing received in the memory stream object. 

>>            MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));

Could you please help me out.

 

[Ivan Danchev]

Hi shoaib,

Could you post your Upload declaration and the Save action?

Regards,
Ivan Danchev
Progress Telerik

[shoaib]

Hi Ivan,

 

I've used the sample code provided in the example & still it is not working.     

Thanks & Regards,

Shoaib

 

[Ivan Danchev]

Hello Shoaib,

I've attached a sample project that demonstrates the Upload configured for chunk upload. The uploaded file's data is received in the Save action and serialized as expected, see the attached screenshot.

Regards,
Ivan Danchev
Progress Telerik

[shoaib]

Hi Ivan,

The sample project shared by you is working fine. Thanks for the help!

Apologies for late response

Thanks,

Shoaib

[Ivan Danchev]

Hi Shoaib,

No problem. You are welcome.

Regards,
Ivan Danchev
Progress Telerik