How to upload file on button click using kendo file upload

Question

I have a kendo upload and a button and I want to upload a file using kendo file upload when click on button upload.

When I debug my action method httppostefile return null.

Here's my action method.

[HttpPost]
        public ActionResult UploadHactAssesmentAttachment(IEnumerable<HttpPostedFileBase> Files)
        {
            TBL_ASST_HACTA_ATTACHMENT obj = new TBL_ASST_HACTA_ATTACHMENT();

            foreach (var file in Files)
            {
                if (file.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/ProjectUploadedDocuments"), fileName);
                    obj.FilePath = path;
                    obj.CreatedDateTime = DateTime.Now;
                    obj.CreatedByID = Convert.ToInt32(Session["UserID"]);
                    dbcontext.TBL_ASST_HACTA_ATTACHMENT.Add(obj);
                    file.SaveAs(path);
                    dbcontext.SaveChanges();
                }
            }

            return RedirectToAction("Index");
        }

VIEW

@using (Ajax.BeginForm("UploadHactAssesmentAttachment", "Partner", null, new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "OnSuccessAttachment"
}))
{
<div class="row">
    <div class="col-lg-3">
        @Html.Label("key finding Add attachment:")
    </div>
    <div class="col-lg-3">
        @(Html.Kendo().Upload()
           .Name("Files")
        )

    </div>
</div>
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-3">

            @Html.Kendo().Button().Name("btnAddattachment").Content("Add").HtmlAttributes(new { style = "width: 20%" })
        </div>
    </div>

You cannot use `Ajax.BeginForm()` to upload files. If you want to use ajax, then you need to use `FormData`. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , May 08 '16 at 02:56

score 0 · Answer 1 · answered May 08 '16 at 06:19

To upload files async no need to wrap your @(Html.Kendo().Upload()) in form because the Upload uses HTML5 File API (w3,wiki) , also kendo team provided fallback for older browsers.So the easiest way is:

 <div class="row">
    <div class="col-lg-3">
      @(Html.Kendo().Upload()
          .Name("files")
          .Async(a => a
              .Save("UploadHactAssesmentAttachment", "Upload")
              .Remove("Remove", "Upload")//You need to implement it too
              .AutoUpload(true)
          )
      )
    </div>
 </div>

I think Looking at their docs could be helpful too.

Hope it hepls.

How to upload file on button click using kendo file upload

1 Answers1