Kendo UI chunk upload to Microsoft Azure

问题

I'm implementing the chunk upload functionality for the attachment upload feature of an ASP.Net Core website project. Currently the file upload is handled by the Kendo UI library but the current implementation does not support chunk upload. The attachments will be uploaded to an Azure blob.

I've followed the examples given by the library but my ASP.Net controller receives only the first chunk of the upload file, the chunks are not coming.

Clint side:

    $("#xyzUpload").kendoUpload({
    async: {
        saveUrl: fileUploadUrl,
        chunkSize: 1048576,
        removeUrl: "remove",
        autoUpload: true
    },
    multiple: true,
    upload: function (e) {
        e.data = { id: $("#fileUplpderParentObjectId").val() };
    },
    showFileList: false,
    dropZone: ".abc",
    success: onSuccess
});

Controller Action:

 [HttpPost]
    public async Task<JsonResult> ChunkUpload(IEnumerable<IFormFile> files, string metaData, Guid id)
    {
        MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(metaData));

        JsonSerializer serializer = new JsonSerializer();
        ChunkMetaData chunkData;

        var userId = _userManager.GetUserId(User);
        var fileList = new List<GeneralFileViewModel>();

        using (StreamReader streamReader = new StreamReader(ms))
        {
            chunkData = (ChunkMetaData)serializer.Deserialize(streamReader, typeof(ChunkMetaData));
        }

        if (files != null)
        {
            foreach (var file in files)
            {
                var extension = Path.GetExtension(chunkData.FileName);
                var fileName = Path.GetFileNameWithoutExtension(chunkData.FileName);
                var guid = Guid.NewGuid();
                var generalFile = new GeneralFileViewModel()
                {
                    FileId = guid,
                    FileName = fileName,
                    Extension = extension,
                    //FileType = _jobsservice.GetFileType(extension),
                    ParentId = id
                };

                var blockId = Convert.ToBase64String(BitConverter.GetBytes(chunkData.ChunkIndex));

                //Write chunk to azure blob block
                await _uploadService.UploadInBlocksToAzure(blockId, generalFile, file.OpenReadStream());

                //if last chunk is uploaded, commit the blob into azure
                //await _uploadService.CommitBlocksToAzure();

                fileList.Add(generalFile);
            }
        }
        return Json(fileList);
    }

UploadInBlocksToAzure() method

public async Task UploadInBlocksToAzure(string id, GeneralFileViewModel file, Stream stream)
    {
        try
        {
            var storageAccount = CloudStorageAccount.Parse(_connectionString);
            CloudBlobClient cloudBlobClient = storageAccount.CreateCloudBlobClient();

            var container = cloudBlobClient.GetContainerReference("test-video-in");
            var blob = container.GetBlockBlobReference(file.FileId + file.Extension);
            await blob.PutBlockAsync(id, stream, null);
        }
        catch (Exception e)
        {
            throw;
        }
    }

No exceptions are thrown from the code.

Any idea on why the action method does not receive the other chunks of the file?

回答1:

It is important to return JSON object with the uploaded and fileUid properties, which notifies the client what the next chunk should be as described here - https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/async.chunksize You could also see how it is working correctly in the this demo in the ChunkSave method - https://demos.telerik.com/kendo-ui/upload/chunkupload

来源：https://stackoverflow.com/questions/52328488/kendo-ui-chunk-upload-to-microsoft-azure