File Upload using recent Bootstrap file upload and mvc asp.net

Question

I looked over some other answers and the solutions there were not working. And I couldn't seem to figure out why. This is using Bootstrap 3.0. All I am trying to do is use that to upload a new avatar image. The problem is it always comes up null and I cannot seem to figure out why.

Here is my HTML:

@using (Html.BeginForm("EditAvatar", "Profile", new { userID = @Model.ProPit_User.userID }, FormMethod.Post, new { }))
{
    <div class="form-group">
        <div class="fileinput fileinput-new" data-provides="fileinput">
            <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
            </div>
            <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
            </div>
            <div>
                <span class="btn default btn-file">
                    <span class="fileinput-new">Select image
                    </span>
                    <span class="fileinput-exists">Change
                    </span>
                    <input id="avatar_image" type="file" name="..." runat="server">
                </span>
                <a href="#" class="btn default fileinput-exists" data-dismiss="fileinput">Remove
                </a>
            </div>
        </div>
        <div class="clearfix margin-top-10">
            <span class="label label-danger">NOTE!
            </span>
            <span>Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only
            </span>
        </div>
    </div>
    <div class="margin-top-10">
        <button type="submit" class="btn green">
            Save Changes
        </button>
        <button type="reset" class="btn default">Cancel</button>
    </div>
}

I have given the file input the ID of avatar_image

Here is the controller:

[HttpPost]
        public ActionResult EditAvatar(HtmlInputFile avatar_image)
        {

            if (avatar_image.PostedFile != null)
            {
                //do whatever you want with the file
            }

            return View();
        }

When looking at the break point the avatar_image.PostedFile is always null. Anyone have any idea what I am missing?

What does the request look like in Fiddler? Also, add the enctype="multipart/form-data" attribute to the form. — Steve Andrews
– Steve Andrews, Commented Mar 24, 2014 at 23:23
@SteveAndrews Not sure never used Fiddler, I'll have to download it and see if it can provide anything. I'll add the Enctype and see if that helps. — James Wilson
– James Wilson, Commented Mar 25, 2014 at 14:16
@SteveAndrews it was the enttype. that made it work. Thank you. — James Wilson
– James Wilson, Commented Mar 25, 2014 at 16:12

Steve Andrews · Accepted Answer · 2014-03-25 20:31:02Z

3

You might check the request in Fiddler. More importantly though, you need to add the enctype="multipart/form-data" attribute to the form.

answered Mar 25, 2014 at 20:31

Steve Andrews

5593 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

File Upload using recent Bootstrap file upload and mvc asp.net

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related