ASP MVC Image Upload Error “The input is not a valid Base-64 string”

Question

I have this form where I'm trying to upload an image. WhenI click the submit button, I get the following error:

"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."

The controller is never reached, as the error happens as soon as I upload the image. I'm at a loss what to do. Any help is appreciated!

@using (Html.BeginForm("Create", "Create", FormMethod.Post, new { enctype = "multipart/form-data"})) 
{
    @Html.AntiForgeryToken()

    <div class="form-group">
        <div class="col-md-10">
            @Html.LabelFor(model => model.ComponentModel.Image, htmlAttributes: new {@class = "control-label col-md-2"})
            <a class="btn" href="javascript:;">
                Choose File...
                <input type="file" name="Image" Size="40" style="position: absolute; z-index: 2; top: 0; left: 0; filter: alpha(opacity=0); opacity: 0; background-color: transparent; color: transparent"
                       onchange='$("#upload-file-info").html($(this).val());'/>
            </a>
            <span class="label label-info" id="upload-file-info"></span>
        </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>
}

UPDATE:

This is the Create controller:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create(Component component, HttpPostedFileBase image = null)
    {
        if (ModelState.IsValid)
        {
            if (image != null)
            {
                component.Image = new byte[image.ContentLength];
                image.InputStream.Read(component.Image, 0, image.ContentLength);
            }
            componentRepository.InsertComponent(component);
            componentRepository.Save();
            return RedirectToAction("Index", "Home");
        }
        return RedirectToAction("Index", component);
    }

Chris Pratt · Accepted Answer · 2015-11-12 14:23:08Z

5

You really haven't provided enough information here, but I'm going to take a wild guess based on the error message.

You say it's not hitting your controller, but it kind of has to be hitting your controller. The error comes from ASP.NET, so it's going back to the server.

You've bound the file input to Image, and my guess is that Image is a byte array on your model. You can't post directly to a byte array. You need to bind to a property of type HttpPostedFileBase, from which you can then read the byte array and set it on your other property.

answered Nov 12, 2015 at 14:23

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

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

4 Comments

Khaine775 Over a year ago

I've updated the OP with the controller. I've already been thinking about what you suggest, but unfortunately it didn't change anything. If I put a breakpoint in the controller, it never gets hit.

Chris Pratt Over a year ago

That's because the error is being generated by the modelbinder, before it actually gets to your action code. Because you have a property on Component called Image, the modelbinder attempts to bind the data there, which is what's causing the error. The fact that you have another parameter called image never comes into play. You need to use a name for the input (and parameter) that's distinct from anything on your model.

Khaine775 Over a year ago

I've added a HttpPostedFileBase property to the model which got rid of the error and allowed me to upload the file. What would be the next course of action here? Converting the HttpPostedFileBase parameter into a byte[] and storing that instead?

Chris Pratt Over a year ago

If the "model" is your entity, you shouldn't have the HttpPostedFileBase property on it. Either use a view model, or bind it to an additional parameter as you attempted to do previously. However, yes, once you have the the posted file, you need to read the bytes from the stream and set the appropriate property on your model with that.

suyash narhare · Accepted Answer · 2020-04-14 22:30:27Z

0

public HttpPostedFileBase image { get; set; } Use it on your model <input type="file" name="image" /> Use it on your View name prop should be same as HttpPostedFileBase image and catch it on post method and after convert it into byte

answered Apr 14, 2020 at 22:30

suyash narhare

111 bronze badge

Collectives™ on Stack Overflow

ASP MVC Image Upload Error “The input is not a valid Base-64 string”

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related