Async file upload in MVC using kendoUpload

Question

I am using file uploader with MVC.

Following is my code :

<div class="demo-section k-content">
<input name="files" id="files" type="file" />
</div>


<script>
$(document).ready(function () {
            var data = JSON.stringify({
            'ReportID': '@(Model.ReportID)',
        });

    $("#files").kendoUpload({
        async: {
            saveUrl: '@Url.Action("save", "UserPage")',

            //removeUrl: "remove",
            autoUpload: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: data,
        }//,
    });
});

on ActionResult I am using following code :

string fileName = Path.GetFileName(files.FileName);
fileName = model.ReportID + "s" + Guid.NewGuid() + extension;

Everything is working fine except the value of model.ReportID its returning NULL every time.

I am missing something here?

pavemann · Accepted Answer · 2016-01-14 08:36:02Z

1

Try something like that:

 @(Html.Kendo().Upload()
        .Name("uploadFiles")
        .Async(a => a
            .Save("Save", "Upload")
            .Remove("Remove", "Upload")
            .AutoUpload(true)
            .SaveField("files")
            //.Batch(true)
            .RemoveField("fileNames")
        )
        .Multiple(true)
        .ShowFileList(true)
        .Events(events => events
        .Error("onUploadError")
        .Progress("onUploadProgress")
        .Complete("onUploadComplete")
        .Success("onUploadSuccess")
        .Select("onUploadSelect")
        .Upload("onUploadAdditionalData")
        .Remove("onUploadRemove"))
    )

inside the onUploadAdditionalData event you can pass parameters like:

function onUploadAdditionalData(e) {
e.data = { val1: val1, val2: val2 };

}

your controller action should look like this:

 public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string val1, string val2)
    {
    //do upload handling here
    }

answered Jan 14, 2016 at 8:36

pavemann

3841 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nurdyguy Over a year ago

Related: telerik.com/forums/…

Gene R · Accepted Answer · 2015-12-02 07:26:34Z

0

If you check documentation http://docs.telerik.com/kendo-ui/api/javascript/ui/upload#configuration-async async.data is undocumented and i am not sure if there is such property.

You can put it directly to saveUrl:

saveUrl: '@Url.Action("save", "UserPage", new { ReportID = Model.ReportID })'

answered Dec 2, 2015 at 7:26

Gene R

3,7442 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

Async file upload in MVC using kendoUpload

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related