MVC save image to DB (with EF) - sql

Question

I am still new to MVC and am struggling with uploading an image to a DB in my web application. I've seen tons of articles on the subject, followed instructions but still I am stuck with the following error message:
The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.
Whenever I use [Bind(Exclude = "CompetitionPicture")], everything would work fine, except for, of course, the "CompetitionPicture" won't be included.
My ViewModel looks as follows:
public class PhotoCompetition
{
public int ID { get; set; }
public string UserID { get; set; }
public string FirstName { get; set; }
public string Email { get; set; }
public byte[] CompetitionPicture { get; set; }
[Required]
[Display(Name = "by checking this box I accept the Terms & Conditions")]
public bool TermsAndConditionsAccepted { get; set; }
public DateTime TimeStamp { get; set; }
}
Controller is as follows:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadCompetitionPicture(/*[Bind(Exclude = "CompetitionPicture")]*/ PhotoCompetition model)
{
string test = Request.Form["CompetitionPicture"];
byte[] bt = Convert.FromBase64String(test.Split(',')[1]);
var participation = new PhotoCompetition
{
CompetitionPicture = bt
};
// var participation = new PhotoCompetition
// {
// UserID = User.Identity.GetUserId(),
// Email = User.Identity.GetUserName(),
// TermsAndConditionsAccepted = model.TermsAndConditionsAccepted,
// TimeStamp = DateTime.UtcNow.ToUniversalTime()
// };
// participation.CompetitionPicture = competitionPicture;
// DB.PhotoCompetition.Add(model);
// DB.SaveChanges();
// return RedirectToAction("Index");
//}
return View(model);
}
and the View:
<section id="photoCompetition" class="manageForm">
#using (Html.BeginForm("UploadCompetitionPicture", "errandom", FormMethod.Post, new { #id = "photoCompetitionForm", #class = "form-horizontal", #role = "form", #enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div id="photoCompetitionSection" class="manageSection">
<p id="photoCompetitionSectionTitle" class="manageSectionTitle">
Upload your picture and be selected as our model!
</p>
#Html.HiddenFor(m => m.UserID)
#Html.HiddenFor(m => m.Email)
#Html.HiddenFor(m => m.FirstName)
#Html.HiddenFor(m => m.TimeStamp)
<div id="photoCompetitionProfilePictureArea" class="manageArea row">
#Html.LabelFor(m => m.CompetitionPicture, new { #id = "photoCompetitionProfilePictureLabel", #class = "manageLabel col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-3 col-lg-offset-1 col-lg-4" })
<a id="photoCompetitionProfilePictureSelectionButton" class="manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset0 col-md-7 col-lg-offset-0 col-lg-6" href="#">
select a file...
</a>
#Html.TextBoxFor(m => m.CompetitionPicture, new { #id = "photoCompetitionProfilePictureField", #class = "manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-7 col-lg-offset-0 col-lg-6", #name = "CompetitionPicture", #type = "file", #style = "display: none" })
</div>
<div id="photoCompetitionTermsAndConditionsArea" class="manageArea row">
#Html.CheckBoxFor(m => m.TermsAndConditionsAccepted, new { #id = "photoCompetitionTermsAndConditionsField", #class = "photoCompetitionTermsAndConditionsField" })
#Html.LabelFor(m => m.TermsAndConditionsAccepted, new { #id = "photoCompetitionTermsAndConditionsLabel", #class = "photoCompetitionTermsAndConditionsLabel" })
</div>
<script>
jQuery("#photoCompetitionProfilePictureSelectionButton").click(function () {
$("#photoCompetitionProfilePictureField").click();
});
</script>
<script>
$("#photoCompetitionProfilePictureField").change(function () {
var fullFileName = $("#photoCompetitionProfilePictureField").val()
$("#photoCompetitionProfilePictureSelectionButton").html(fullFileName.substr(fullFileName.lastIndexOf('\\') + 1));
});
</script>
<div id="photoCompetitionButtonArea" class="manageArea row">
<input id="photoCompetitionButtonUpload" class="manageButton col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10" type="submit" value="Save" />
</div>
</div>
}
</section>
Your support is highly appreciated!

Answer 1

I'm stuck in this issue for days before, i will put simple solving.
first: I save image path as string in DB not byte
and Image File as HttpPostedFileBase in model Like :`
public string ProductImage { get; set; }
[Required(ErrorMessage = "Image is required")]
public HttpPostedFileBase ImageFile { get; set; }
in view you will write :
<div class="form-group">
<div class="col-md-10">
<input type="file" name="ImageFile" required />
</div>
#Html.ValidationMessageFor(model => model.ImageFile, "", new { #class = "text-danger" })
</div>
name of input must be like the name in model and here I named it ImageFile
in controller will write
public void SaveImage(Product pro)
{
string fileName = Path.GetFileNameWithoutExtension(pro.ImageFile.FileName);
string exetention = Path.GetExtension(pro.ImageFile.FileName);
fileName = fileName + DateTime.Now.ToString("yymmssfff") + exetention;
pro.ProductImage = "~/ProductDropBox/" + fileName;
fileName = Path.Combine(Server.MapPath("~/ProductDropBox/"), fileName);
pro.ImageFile.SaveAs(fileName);
}
I use this function to save image in DB and in Folder created for images
finally in action result you will write :
public ActionResult AddProducts(Product pro)
{
if (ModelState.IsValid)
{
SetCategories();
SaveImage(pro);
pro.UPID = Guid.NewGuid();
using (db)
{
db.Products.Add(pro);
db.SaveChanges();
}
return RedirectToAction("Index");
}
else
{
return View("AddProducts",pro);
}
}
I hope this useful