ASP MVC 5 - Image Upload Error "The input is not a Valid Base-64 string"

Question

I am trying to solve this error in all the ways I found suggested in forums, but all the solutions I tried none solved my problem. Whenever I perform a Ubmit my View shows this error and does not receive anything in my controller method with Httppost.

Controller

    [HttpPost]
    public ActionResult Alterar(Produto produto, HttpPostedFileBase imagem = null)
    {
        if (ModelState.IsValid)
        {
            _repositorio = new ProdutosRepositorio();
            _repositorio.Salvar(produto);

            return RedirectToAction("Index");
        }

        return View(produto);
    }

Model Class

[Table("Produto")]
public class Produto
{
    [Key]
    [HiddenInput(DisplayValue = false)]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    [Display(Name = "ID")]
    public int ProdutoId { get; set; }

    [Required(ErrorMessage = "Campo nome obrigatório")]
    [Column(TypeName = "varchar")]
    [StringLength(60, MinimumLength = 4, ErrorMessage = "Tamanho máximo permitido {1} e mínimo {0}.")]
    [Display(Name = "Nome")]
    public string Nome { get; set; }

    [Required(ErrorMessage = "Campo primeiro nome obrigatório")]
    [Column(TypeName = "varchar")]
    [StringLength(60, MinimumLength = 4, ErrorMessage = "Tamanho máximo permitido {1} e mínimo {0}.")]
    [DataType(DataType.MultilineText)]
    [Display(Name = "Descrição")]
    public string Descricao { get; set; }

    [Required(ErrorMessage = "Campo preço obrigatório")]
    [Range(0.01, double.MaxValue, ErrorMessage = "Valor inválido")]
    [Display(Name = "Preço")]
    public decimal Preco { get; set; }

    [Display(Name = "Imagem")]
    public byte[] Imagem { get; set; }

    [MaxLength(50)]
    [Column(TypeName = "varchar")]
    public string ImagemMimeType { get; set; }

    [Required(ErrorMessage = "Campo categoria obrigatório")]
    [Column(TypeName = "varchar")]
    [StringLength(40, MinimumLength = 4, ErrorMessage = "Tamanho máximo permitido {1} e mínimo {0}.")]
    [Display(Name = "Categoria")]
    public string Categoria { get; set; }
}

View

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

        <div class="panel-body">
            <hr />
            @Html.HiddenFor(model => model.ProdutoId)

            <div class="form-group">
                @Html.LabelFor(model => model.Nome)
                @Html.TextBoxFor(model => model.Nome, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Descricao)
                @Html.TextAreaFor(model => model.Descricao, new { @class = "form-control", rows = 5 })
                @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Preco)
                @Html.EditorFor(model => model.Preco, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Preco, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Categoria)
                @Html.EditorFor(model => model.Categoria, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Categoria, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                <div style="position:relative;">
                    <label>Imagem</label>
                    <a href="javascript:;" class="btn">
                        Selecione a imagem...
                        <input type="file" name="imagem" size="40" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;" />
                    </a>
                    <span id="upload-file-info" class="label label-info"></span>
                </div>

            </div>

            <div class="panel-footer">
                <input type="submit" value="Salvar" class="btn btn-primary" />
                @Html.ActionLink("Cancelar", "Index", null, new { @class = "btn btn-default" })
            </div>
        </div>
    }

Script

        $("input[name='imagem']").change(function () {
            var file = $(this).val().replace("C:\\fakepath\\", "");;

            $('#upload-file-info').html(file);
        });

Answer 1

Try changing the name of the input image for "image" and so receive in controller.

I think what happens is that you must be conflicting with property:

public byte[] Imagem { get; set; }"

with the input name:

<input type="file" name="imagem" size="40" style="position:absolute;z-index:2;top:0;left:0;filter:alpha(opacity=0);opacity:0;background-color:transparent;color:transparent;" />