HttpPostedFileBase is null

4 posts, 0 answers
  1. Don
    Don avatar
    4 posts
    Member since:
    Oct 2014

    Posted 12 Sep 2017 Link to this post

    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;
            });
  2. Don
    Don avatar
    4 posts
    Member since:
    Oct 2014

    Posted 13 Sep 2017 in reply to Don Link to this post

    It appears to be an issue with me serializing the form on submit. I removed that manual triggering of serialization and it works now.
  3. Don
    Don avatar
    4 posts
    Member since:
    Oct 2014

    Posted 13 Sep 2017 in reply to Don Link to this post

    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);
                        }
                    }
                });
            });
  4. Dimitar
    Admin
    Dimitar avatar
    677 posts

    Posted 14 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top