HttpPostedFile stays null when Kendo UI upload file is used. It works fine when using the select button but does not work when drag is used

Question

I am using Kendo UI upload. It works fine when using the select button but does not work when drag is used in the HttPostedFile; my viewModel property stays null.

I have made sure the property name and the Kendo Upload component names are same. Below is my JavaScript code:

$("#AvatarImageFile").kendoUpload({
            async: {
                autoUpload: true,
                saveUrl: "URL for temp"
            },
            multiple: false,
            showFileList: false,
            select: function (e) {
                var fileReader = new FileReader();
                fileReader.onload = function (event) {
                    var imagePath = event.target.result;
                    $("#uploadedAvatarImage").attr('src', imagePath);
                    $(".k-upload .k-upload-status-total").hide();
                }
                fileReader.readAsDataURL(e.files[0].rawFile);
                console.log(e.files[0]);
            }
        });.

I have used enctype = "multipart/form-data" as part of the header.

Answer 1

Alright I Got the answer. Basically you need to make the async false.

async: {
            autoUpload: false,
            saveUrl:'@Url.Action("SaveImage", "User", new { userId = Model.UserID })'
        },