0

I'm using the Bootstrap File Input plugin to upload an image in my ASP.Net MVC 5 application form. I'm not sure what I need to see on the controller or what I need to do in javascript to get this to work. Currently there is an error that is being thrown when I submit my data in the form that says

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

Here is my StudentController.

[HttpPost]
    public ActionResult Edit(EditStudentViewModel studentViewModel)
    {
        if (ModelState.IsValid)
        {
            ...other code left out

Here is my javascript

$("#input-20").fileinput({
'type': 'POST',
'cache': false,
'browseClass': 'btn btn-primary btn-block',
'showCaption': false,
'showRemove': false,
'showUpload': false,
'uploadAsync': false,
'maxFileCount': 1,
'allowedFileExtensions': ['jpg', 'png', 'gif'],
'allowedFileTypes': ['image']
'uploadUrl': '@Url.Action("Edit", "Student")'

});

*Are these the correct 'uploadUrl' parameters Here is my form that submits the data to the controller. You can see I'm submitting what in the ViewModel as well as the image. The byte[] that represents the iamge is in the view model

@model YogaBandy.DomainClasses.ViewModels.Student.EditStudentViewModel

@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Partial("_MenuPartial")

<div class="row submenurow">
    @Html.Partial("_StudentTeacherProfilePartial")
    <div class="col-md-9 submenucol2">
    @using (Html.BeginForm("Edit", "Student", new { ReturnUrl =    ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        @Html.AntiForgeryToken()
        @Html.HiddenFor(model => model.StudentId)
        @Html.HiddenFor(model => model.AspNetUserRefId)    
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Student Picture</h3>
            </div>
            <div class="panel-body">
                @Html.TextBoxFor(model => model.TestImage, new { @type = "file", @id = "input-20" })
            </div>
        </div>
        <br/>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Student Profile</h3>
            </div>
            <div class="panel-body">

                <div class="form-group">
                    @Html.LabelFor(model => model.CatchPhrase, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-sm-10">
                        @Html.EditorFor(model => model.CatchPhrase, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.CatchPhrase, "", new { @class = "text-danger" })
                    </div>
                </div>
                ...other form-group's left out below to save space  
            </div>
        </div>
        <br />
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    }
</div>

Here is my ViewModel being submitted to the controller

public class EditStudentViewModel
{
    public byte[] TestImage { get; set; }
    ...other values left out
}
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 1
    You form should have the attribute `enctype = "multipart/form-data"` (or does the plugin add that anyway?). And I think your property needs to be ` HttpPostedFileBase TestImage` –  Feb 11 '15 at 04:16
  • just 'HttpPostedFileBase TestImage' ? what about my viewmodel and all its data? – chuckd Feb 11 '15 at 04:35
  • 1
    I mean the property `TestImage` should be typeof `HttpPostedFileBase` not `byte[]` if your posting back your model –  Feb 11 '15 at 04:41
  • this worked THANKS! one last question, if this is a profile pic and I can limit the size or manipulate the size to under varbinary(max) then should I keep them in my DB? or should I still storethem in the app_data folder? – chuckd Feb 11 '15 at 06:06
  • I have seen arguments for and against. You really need to make that assessment yourself - too opinion based for SO :) –  Feb 11 '15 at 06:09
  • in your opinion, when would you justify using just a db vs storing profile pics on local storage? – chuckd Feb 11 '15 at 06:22
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/70682/discussion-between-user1186050-and-stephen-muecke). – chuckd Feb 11 '15 at 06:49
  • Too many variables to give you an opinion, but suggest you look at [this answer](http://stackoverflow.com/questions/3748/storing-images-in-db-yea-or-nay) for some pros and cons. –  Feb 11 '15 at 06:52

0 Answers0