HttpPostedFileBase is null

[Don]

I am unable to figure out why the HttpPostedFileBase is always null in my upload widget. Sample Project showing the issue.

View

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

    <div class="row row-spacing-bottom">

        <div class="col-md-12">

            @(Html.Kendo().Upload()

                  .Name(Html.IdFor(model => model.HttpPostedFileBase).ToString())

                  .Multiple(false)

                  .Messages(m => m.Select("Select a File"))

                  .Events(e => e.Select("uploadHelper.checkFileSize"))

                  .Deferred())

        </div>

    </div>

 

    <div class="row">

        <div class="col-md-12">

            @(Html.Kendo().Button()

                  .Name("Submit")

                  .Content("Upload File")

                  .HtmlAttributes(new {type = "submit"})

                  .Deferred())

        </div>

    </div>

}

 

Controller:

public class FileUploadController : Controller

    {

        public ActionResult FileUpload()

        {

            return View();

        }

 

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult FileUpload(Models.FileUpload fileUpload)

        {

            var result = fileUpload.HttpPostedFileBase != null;

 

            return Json(new {success = result});

        }

    }

 

Submit function:

$('form').submit(function () {
            layout.showLoadingScreen(true);

            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        layout.showNotification("Save Successful", "success");
                        layout.showLoadingScreen(false);
                    } else {
                        layout.showNotification("Error Saving Record", "error");
                        layout.showLoadingScreen(false);
                    }
                }
            });
            return false;
        });

[Don]

It appears to be an issue with me serializing the form on submit. I removed that manual triggering of serialization and it works now.

[Don]

In order to fix the serialization so that I can use result notifications, I had to change the submit function a bit. Had to change .serialize to new FormData() and also add the contentType and processData attributes to the ajax request.

 

$('form').submit(function (event) {
            event.preventDefault();
            layout.showLoadingScreen(true);

            $.ajax({
                url: this.action,
                type: this.method,
                data: new FormData(this),
                contentType: false,
                processData: false,
                success: function (result) {
                    if (result.success) {
                        layout.showNotification("Save Successful", "success");
                        layout.showLoadingScreen(false);
                    } else {
                        layout.showNotification("Error Saving Record", "error");
                        layout.showLoadingScreen(false);
                    }
                }
            });
        });

[Dimitar]

Hello Don,

Thank you for sharing the solution.

I am glad to hear that you have managed to successfully resolve the issue faced. In case you need further assistance with configuring the Upload widget or using the built-in API, please do not hesitate to contact us.

Regards,
Dimitar
Progress Telerik