This is a migrated thread and some comments may be shown as answers.

HttpPostedFileBase is null

3 Answers 276 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Don
Top achievements
Rank 1
Don asked on 12 Sep 2017, 09:58 PM

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;
        });

3 Answers, 1 is accepted

Sort by
0
Don
Top achievements
Rank 1
answered on 13 Sep 2017, 03:43 PM
It appears to be an issue with me serializing the form on submit. I removed that manual triggering of serialization and it works now.
0
Don
Top achievements
Rank 1
answered on 13 Sep 2017, 04:33 PM

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);
                    }
                }
            });
        });
0
Dimitar
Telerik team
answered on 14 Sep 2017, 12:40 PM
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.
Tags
Upload
Asked by
Don
Top achievements
Rank 1
Answers by
Don
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or