HttpPostedFileBase value is always null in controller method - asp.net-mvc

Question

I want to be able to upload an image using a view.
So far here's what I've done based on this blog here:
I have a model extension that contains the following item:
[FileSize(10240)]
[FileTypes("jpg,jpeg,png")]
public HttpPostedFileBase mCardImage { get; set; }
FYI: the FileSize and FileTypes attributes are shaped like this:
public class FileSizeAttribute : ValidationAttribute
{
private readonly int mMaxSize;
public FileSizeAttribute(int _maxSize)
{
mMaxSize = _maxSize;
}
public override bool IsValid(object _value)
{
if (_value == null)
{
return true;
}
return mMaxSize > (_value as HttpPostedFile).ContentLength;
}
public override string FormatErrorMessage(string _name)
{
return string.Format("The file size shoud not exceed {0}", mMaxSize);
}
}
public class FileTypesAttribute: ValidationAttribute
{
private readonly List<string> mTypes;
public FileTypesAttribute(string _types)
{
mTypes = _types.Split(',').ToList();
}
public override bool IsValid(object _value)
{
if (_value == null)
{
return true;
}
var fileExt = System.IO.Path.GetExtension((_value as HttpPostedFile).FileName).Substring(1);
return mTypes.Contains(fileExt, StringComparer.OrdinalIgnoreCase);
}
public override string FormatErrorMessage(string _name)
{
return String.Format("Invalid file type. Only the following types: {0} are supported.",
String.Join(", ", mTypes));
}
}
And my view is rendered like this:
#model MyApp.Utilities.ModelExtensions.CardInfoExtension
<h2>Create new Card</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="formStyle">
<div class="float-right baseMargin">
#Html.Image(Model.mCardImageLink, Model.mCardName, null)<br/>
#Html.TextBoxFor(_item => _item.mCardImage, new { #type = "file" } )
#Html.ValidationMessageFor(_item => _item.mCardImage)
</div>
#Html.HiddenFor(_item => _item.mCardImageLink)
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardName)
</div>
<div class="baseFontSize">
#Html.EditorFor(_item => _item.mCardName)
#Html.ValidationMessageFor(_item => _item.mCardName)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardNumber)
</div>
<div class="baseFontSize">
#Html.EditorFor(_item => _item.mCardNumber)
#Html.ValidationMessageFor(_item => _item.mCardNumber)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardColor)
</div>
<div>
#Html.Image("~\\Images\\Functional\\blueColor.jpeg", "Blue", null) #Html.CheckBoxFor(_item => _item.mBlueColor, Model.mBlueColor)
#Html.Image("~\\Images\\Functional\\redColor.jpeg", "Blue", null) #Html.CheckBoxFor(_item => _item.mRedColor, Model.mRedColor)
#Html.Image("~\\Images\\Functional\\greenColor.jpeg", "Blue", null) #Html.CheckBoxFor(_item => _item.mGreenColor, Model.mGreenColor) <br/>
#Html.Image("~\\Images\\Functional\\blackColor.jpeg", "Blue", null) #Html.CheckBoxFor(_item => _item.mBlackColor, Model.mBlackColor)
#Html.Image("~\\Images\\Functional\\whiteColor.jpeg", "Blue", null) #Html.CheckBoxFor(_item => _item.mWhiteColor, Model.mWhiteColor)<br/>
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardManaCost)
</div>
<div class="baseFontSize">
#Html.EditorFor(_item => _item.mCardManaCost)
#Html.ValidationMessageFor(_item => _item.mCardManaCost)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardManaConverted)
</div>
<div class="baseFontSize">
#Html.EditorFor(_item => _item.mCardManaConverted)
#Html.ValidationMessageFor(_item => _item.mCardManaConverted)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardType)
</div>
<div class="baseFontSize">
#Html.DropDownListFor(_item => _item.mCardType, Model.mCardTypeList, String.Empty)
#Html.ValidationMessageFor(_item => _item.mCardType)<br/>
<span class="baseFontSize">Additional Type</span>
#Html.TextBoxFor(_item => _item.mAdditionalCardType)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardPower)
</div>
<div class="baseFontSize">
#Html.DropDownListFor(_item => _item.mCardPower, Model.mCardPowerList, "--- Select a value---")
#Html.ValidationMessageFor(_item => _item.mCardPower)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardToughness)
</div>
<div class="baseFontSize">
#Html.DropDownListFor(_item => _item.mCardToughness, Model.mCardToughnessList, "--- Select a value---")
#Html.ValidationMessageFor(_item => _item.mCardToughness)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardRarity)
</div>
<div class="baseFontSize">
#Html.DropDownListFor(_item => _item.mCardRarity, Model.mCardRarityList, String.Empty)
#Html.ValidationMessageFor(_item => _item.mCardRarity)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardTextAbilities)
</div>
<div class="baseFontSize">
#Html.TextAreaFor(_item => _item.mCardTextAbilities, new { #class = "textAreaWide" } )
#Html.ValidationMessageFor(_item => _item.mCardTextAbilities)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardTextFlavor)
</div>
<div class="baseFontSize">
#Html.TextAreaFor(_item => _item.mCardTextFlavor, new { #class = "textAreaWide" } )
#Html.ValidationMessageFor(_item => _item.mCardTextFlavor)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardArtistName)
</div>
<div class="baseFontSize">
#Html.EditorFor(_item => _item.mCardArtistName)
#Html.ValidationMessageFor(_item => _item.mCardArtistName)
</div>
<div class="baseFontSize">
#Html.LabelFor(_item => _item.mCardSet)
</div>
<div class="baseFontSize">
#Html.DropDownListFor(_item => _item.mCardSetID, ViewBag.List as SelectList, "--- Select Card Set ---", new { #class = "CardSetInfo"} )
#Html.ValidationMessageFor(_item => _item.mCardSet)
</div>
<div id="buttonField">
<input type="submit" value="Create" onclick="needToConfirm = false"/>
</div>
</div>
}
Finally, my controller action receives the model in which the file is located:
[HttpPost]
public ActionResult CreateCard(CardInfoExtension _card)
{
// Do some code here...
}
My question is: why does the mCardImage is ALWAYS null? I've tried uploading the whole thing manually with an input:
<input type="file" name="_file">
But, once again, in my controller method, the value is null. Why? Can anybody help me out?

Answer 1

I was missing this line in my view:
#using (Html.BeginForm("CreateCard", "Card", FormMethod.Post, new { enctype = "multipart/form-data" }))
Seems like by default Html views are not able to upload without this line. Adding this instead of the classic Html.BeginForm() solved the case!

Answer 2

You need to set the name of the <input> to match the name of the model property you want it to bind to.