Uploading Multiple images to a SQL database -

Question

I am trying to upload multiple images to a SQL database. 1 image is working fine, but not sure how to do multiple images. My database has 2 varbinary images columns, Image and Image2.

I am getting a message when posting:

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 what I am trying:

Controller:

[HttpPost]
public ActionResult Create(SwapShop model, HttpPostedFileBase image1, HttpPostedFileBase image2)
{
        if (image1 != null)
        {
            model.Image = new byte[image1.ContentLength];
            image1.InputStream.Read(model.Image, 0, image1.ContentLength);
        }

        if (image2 != null)
        {
            model.Image2 = new byte[image2.ContentLength];
            image2.InputStream.Read(model.Image2, 0, image2.ContentLength);
        }

        //if (image3 != null)
        //{
        //    model.Image3 = new byte[image3.ContentLength];
        //    image3.InputStream.Read(model.Image3, 0, image3.ContentLength);
        //}

        db.SwapShops.Add(model);
        db.SaveChanges();
        return RedirectToAction("Index"); 
}

And the Create view:

@model Intranet.Models.Swap

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

<!-- jQuery UI CSS Reference -->
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
        $(function () {
            $(".date-picker").datepicker({
                dateFormat: 'mm/dd/yy',
                buttonText: "<i class='fa fa-calendar'></i>"
            });

        });

    </script>
}

<h2>Create</h2>

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

<div class="form-horizontal">
    <h4>Swap Shop</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Item, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Item, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Item, "", new { @class = "text-danger" })
        </div>
    </div>

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


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

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

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

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

    <div class="form-group">
        @Html.LabelFor(model => model.Image, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="file" id="image1" name="image1" />
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Image2, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="file" id="image2" name="image2" />
        </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>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

Storing pictures on a sql server is a very troublesome process. So I suggest you. Keep the path to the file. This is both less costly and easier. I'm adding the necessary examples to do this.

• https://www.c-sharpcorner.com/article/asp-net-mvc5-upload-imagefile-into-database/
• https://www.youtube.com/watch?v=5L5W-AE-sEs

Alternatively, you can import multiple images with the help of a plugin. Dropzone.js

• http://sampathloku.blogspot.com/2014/02/dropzonejs-with-aspnet-mvc-5.html

I hope I knew you were the solution. If you have problems, write again.