@html.FileFor Returns Null MVC4

Question

Trying to upload a file with mvc4 and im getting null returned in my controller for the file upload. Can anyone see why please?

View Model

public class PostExtendedWithImage
{
    public Post post { get; set; }

    public HttpPostedFileBase file { get; set; }
}

View

@using (Ajax.BeginForm("CreatePost", "Wall", new AjaxOptions
{
    HttpMethod = "post",
    InsertionMode = System.Web.Mvc.Ajax.InsertionMode.InsertBefore,
    UpdateTargetId = "newPost"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)  


    <fieldset>
        <legend>Post</legend>

        <div class="editor-label">

        </div>
        <div class="editor-field">
            @Html.HiddenFor(model => model.post.Username, new { Value = User.Identity.Name })

        </div>

        @Html.FileFor(model => model.file)


            <div class="editor-label">
                @Html.LabelFor(model => model.post.PostContent)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.post.PostContent)
                @Html.ValidationMessageFor(model => model.post.PostContent)
            </div>

            @{
    TempData["returnURL"] = Request.Url.AbsoluteUri;
            }
            <p>
                <input type="submit" id="postStatus" value="Create" />
            </p>
</fieldset>
}

Controller

 [HttpPost]
        [ValidateAntiForgeryToken]
        public PartialViewResult CreatePost(PostExtendedWithImage VM)
        {

            if (ModelState.IsValid)
            {
                if (VM.file == null)
                {
                   // Do stuff     

                }

                else
                {
                    //Save file to DB
                }


                return PartialView("_NewStatusPartial",VM);

            }

            return PartialView("All",VM);
        }

You cannot upload a file via an ajax form. There are workarounds for this.. but you cannot do what you're trying to do. — Simon Whitehead, Dec 02 '13 at 02:49
Ok thanks for your reply. Could you please point me in the direction of the workarounds? — loveforfire33, Dec 02 '13 at 02:58
Jquery fileupload for example: http://plugins.jquery.com/blueimp-file-upload-jquery-ui/. The workarounds either use `iframe`s, or Flash objects to upload files asynchronously. A straight up ajax form in MVC cannot do this. — Simon Whitehead, Dec 02 '13 at 03:01

Subin Jacob · Answer 1 · 2013-12-02T03:55:55.227

Asynchronous File submission using Ajax.BeginForm may not be possible. You can use 3rd party plugins to do this ajax submission.

You can use jQuery Forms Plugin in this context. See how can you do this using this plugin.

// bind to the form's submit event 
    $('#myForm2').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 

        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    });

Its so simple to do. Give a try!

score 0 · Answer 2 · answered Dec 02 '13 at 02:42

0

I'm not too familiar with Ajax.BeginForm, however, if you are uploading a file, you usually need to add enctype="multipart/form-data" to the <form> tag.

Not really sure if this applies in AJAX.

answered Dec 02 '13 at 02:42

Andy T

10,223
5
53
95

Thanks for your reply. I have included it now but still produces the same error. – loveforfire33 Dec 02 '13 at 02:49
1

This isn't possible with an Ajax form. – Simon Whitehead Dec 02 '13 at 02:50

@html.FileFor Returns Null MVC4

2 Answers2