MVC EF how to add image and other DB values at the same time

Question

I am looking for support in uploading an image (as byte!) into a DB along with other properties. I have to admit, being a newbie to programming I was struggling quite a bit to get this done, however, I kind of got it to work. Now my issue is that whenever I try to leverage the model, it would stop working with an error message popping up saying the following:

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.

ViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
using System.ComponentModel.DataAnnotations;

namespace errandomWeb.Models
{
    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")]
        //[CheckBoxRequired(ErrorMessage = "Please accept our Terms & Conditions to participate.")]
        public bool TermsAndConditionsAccepted { get; set; }

        public DateTime TimeStamp { get; set; }
    }
}

View:

@model errandomWeb.Models.PhotoCompetition
@{
    ViewBag.Title = "Become Our Model";
}

    
        
            @ViewBag.Title
        
        
        
            Hello
        
        
            @Html.TextBoxFor(m => m.FirstName, new { @id = "photoCompetitionHeaderUserName", @class = "manageHeaderUserName", @placeholder = "Stranger", @disabled = true })
        
    
    @Html.Partial("_ProfileLogout")
    
        
            Want to become our model?
        
    
    
        @Html.ValidationSummary("", new { @id = "photoCompetitionValidation", @class = "manageValidation" })
    
    
        @using (Html.BeginForm("UploadCompetitionPicture", "errandom", FormMethod.Post, new { @id = "photoCompetitionForm", @class = "form-horizontal", @role = "form", @enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            
                
                    Upload your picture and be selected as our model!
                
                @Html.HiddenFor(m => m.UserID)
                @Html.HiddenFor(m => m.Email)
                @Html.HiddenFor(m => m.FirstName)
                @Html.HiddenFor(m => m.TimeStamp)
                
                    @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" })
                    
                        select a file...
                    
                    @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", @type = "file", @style = "display: none" })
                
                
                    @Html.CheckBoxFor(m => m.TermsAndConditionsAccepted, new { @id = "photoCompetitionTermsAndConditionsField", @class = "photoCompetitionTermsAndConditionsField" })
                    @Html.LabelFor(m => m.TermsAndConditionsAccepted, new { @id = "photoCompetitionTermsAndConditionsLabel", @class = "photoCompetitionTermsAndConditionsLabel" })
                    @Html.ValidationMessageFor(m => m.TermsAndConditionsAccepted, "", new { @id = "photoCompetitionTermsAndConditionsValidation", @class = "manageValidation col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-4 col-md-7 col-lg-offset-5 col-lg-6" })
                
                
                
                
                    
                    
                
                
                    
                    
                    
                    
                    
                    
                    
                
            
        }
    
    
        @Html.ActionLink("Return to Menu", "Index", "", htmlAttributes: new { @id = "photoCompetitionReturnToMenuButton", @class = "manageReturnToMenuButton" })
    

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    
    
    
}

Controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
using errandomWeb.Models;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.Owin;

namespace errandomWeb.Controllers
{
    [Authorize]
    public class errandomController : Controller
    {
        private ApplicationDbContext DB = new ApplicationDbContext();

        // GET: /errandom/PhotoCompetition
        public ActionResult PhotoCompetition()
        {
            var model = new PhotoCompetition
            {
                UserID = User.Identity.GetUserId(),
                Email = User.Identity.GetUserName(),
                FirstName = User.Identity.Name,
                TimeStamp = DateTime.UtcNow.ToUniversalTime()
            };

            return View(model);
        }

        // POST: /errandom/PhotoCompetition
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult UploadCompetitionPicture()
        {
            string croppedImage = Request.Form["photoCompetitionCroppedPicture"];
            byte[] imageBytes = Convert.FromBase64String(croppedImage.Split(',')[1]);
            var userId = User.Identity.GetUserId();
            var participation = new PhotoCompetition
            {
                CompetitionPicture = imageBytes,
                UserID = User.Identity.GetUserId(),
                FirstName = "testcase",
                Email = User.Identity.GetUserName(),
                TermsAndConditionsAccepted = false,
                TimeStamp = DateTime.UtcNow.ToUniversalTime(),
            };
            DB.PhotoCompetition.Add(participation);
            DB.SaveChanges();
            return View("Edit");
        }
    }
}

I would like to include

TermsAndConditionsAccepted = model.TermsAndConditionsAccepted

so the value is actually being taken from the form a user would fill out, but for aforementioned reasons I am encountering issues.

Appreciate any help I am getting here, thx!

Ken-F · Accepted Answer

I finally got it done. Here's the updated controller code:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult UploadCompetitionPicture([Bind(Exclude = "CompetitionPicture")]PhotoCompetition model)
{
    string croppedImage = Request.Form["photoCompetitionCroppedPicture"];
    byte[] imageBytes = Convert.FromBase64String(croppedImage);
    var userId = User.Identity.GetUserId();
    var participation = new PhotoCompetition
    {
        UserID = User.Identity.GetUserId(),
        FirstName = "fuckingtest",
        Email = User.Identity.GetUserName(),
        TermsAndConditionsAccepted = true,
        TimeStamp = DateTime.UtcNow.ToUniversalTime(),
    };
    participation.CompetitionPicture = imageBytes;
    DB.PhotoCompetition.Add(participation);
    DB.SaveChanges();
    return View("Edit");
}

I guess, what made the difference is excluding the picture in the first place, then submitting all other fields and after that adding the picture separately. Not sure why, but glad I figured it out. Thx anyone who contributed!

MVC EF how to add image and other DB values at the same time

Answers (2)

Related Questions