Getting "The input is not a valid Base-64 string as it contains a non-base 64 character" when trying to upload an image

Question

I have no idea why I am getting this exception. I am trying to implement a simple upload image functionality.

I am getting the error when I am trying to save the image along with the rest of the data.

I suspect the the problem is in the view, because I used this code from my model and action method in another project and the code worked.

Can someone help with this. I believe I am close.

Model :

public class Company
{
    [Key]

    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]

    public int CompanyId { get; set; }
    public byte[] ImageData { get; set; }
    [NotMapped]
    public HttpPostedFileBase UploadImage { get; set; }
    [NotMapped]
    public string ImageBase64 => System.Convert.ToBase64String(ImageData);
    public string CompanyName { get; set; }
    public string CompanyAddress { get; set; }
    public string CompanyCountry { get; set; }
    public string CompanyCity { get; set; }
    public string CompanyPostalCode { get; set; }
    public string CompanyPhoneNumber { get; set; }
    public string CAId { get; set; }

}

Controller :

public ActionResult Create([Bind(Include = "CompId,ImageData,CompanyName,CompanyAddress,CompanyCountry,CompanyCity,CompanyPostalCode,CompanyPhoneNumber,EmailCA")] Company company, HttpPostedFileBase UploadImage)
    {
        if (ModelState.IsValid)
        {
            byte[] buf = new byte[UploadImage.ContentLength];
            UploadImage.InputStream.Read(buf, 0, buf.Length);
            company.ImageData = buf;

            db.Companies.Add(company);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(company);
    }

View :

@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Company</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.ImageData, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.ImageData, new { type = "file" })
                @*<input type="file" name="ImageData" class="input-files" />*@
            </div>

        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CompanyName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.CompanyName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CAId, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.CAId, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.CAId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

Please read the many possible duplicates for this question: http://stackoverflow.com/q/5125021/215552, http://stackoverflow.com/q/15114044/215552, http://stackoverflow.com/q/13835237/215552, http://stackoverflow.com/q/22783289/215552, etc. I just searched for the text of the error message and got that list... — Heretic Monkey, Jan 05 '17 at 22:45
So [edit] your question to indicate why the answers in those questions did not work for you. — Heretic Monkey, Jan 05 '17 at 22:46

score 0 · Answer 1 · answered Jan 05 '17 at 22:45

0

In your view your using @Html.TextBoxFor(model => model.ImageData, new { type = "file" }) where I think you should use @Html.TextBoxFor(model => model.UploadImage, new { type = "file" }) instead.

And in order to make that pass I think you need to add the UploadImage property to the Bind(Include) string as following:

public ActionResult Create([Bind(Include = "CompId,ImageData,CompanyName,CompanyAddress,CompanyCountry,CompanyCity,CompanyPostalCode,CompanyPhoneNumber,EmailCA,UploadImage")] Company company)

answered Jan 05 '17 at 22:45

Tha'er AlAjlouni ثائر العجلوني

14,069
7
33
38

thanks, but this can't work with the rest of the logic in my action method. – Robert Ross Jan 05 '17 at 22:53
Why not? I am not seeing anything that collides with this logic? – Tha'er AlAjlouni ثائر العجلوني Jan 05 '17 at 22:58
If I remove HttpPostedFileBase UploadImage, the rest of the code won't work the same. – Robert Ross Jan 05 '17 at 23:00
You already have the `UplaodImage` as a property on your model, just use `byte[] buf = new byte[company.UploadImage.ContentLength]` instead of `byte[] buf = new byte[UploadImage.ContentLength]`, and the same for all `UploadImage` references. – Tha'er AlAjlouni ثائر العجلوني Jan 05 '17 at 23:01

Getting "The input is not a valid Base-64 string as it contains a non-base 64 character" when trying to upload an image

1 Answers1