How to upload multiple images in database in ASP.NET Core MVC using ADO.NET

Question

I create a form where I upload images in database with their individual property. I am using ASP.NET Core MVC and ADO.NET, but now I want to upload multiple images with a single click.

Any idea how to upload multiple images? I want to add all images url into one property then save it into database.

Controller:

public IActionResult aprent([Bind] RentModel ar, [FromForm] string value)
{
    try
    {
        if (ModelState.IsValid)
        {
            if (ar.imge1 != null)
            {
                string folder = "image/";
                folder += Guid.NewGuid().ToString() + "_" + ar.imge1.FileName ;
                ar.pic1 = "/" + folder;

                string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
                ar.imge1.CopyTo(new FileStream(serverFolder, FileMode.Create));
            }

            if (ar.imge2 != null)
            {
                string folder = "image/";
                folder += Guid.NewGuid().ToString() + "_" + ar.imge2.FileName;

                ar.pic2 = "/" + folder;
                string serverFolder = Path.Combine(_IWebHostEnvironment.WebRootPath, folder);
                ar.imge2.CopyTo(new FileStream(serverFolder, FileMode.Create));
            }

            string res = DB.Saverecord(ar);
            string pics = DB.imagedb(ar);

            TempData["msg"] = res;
        }
    }
    catch (Exception ex)
    {
        TempData["msg"] = ex.Message;
    }

    return View();
}

Model:

public IFormFile imge1 { get; set; }
public string? pic2 { get; set; }
public IFormFile? imge2 { get; set; }

Class in which SQL queries are contained:

public string imagedb(RentModel img)
{
    try
    {
        con.Open();

        SqlCommand cmd = new SqlCommand("INSERT INTO img (pic1, pic2, pic3, pic4, pic5 /*,pic6, pic7, pic8, pic9, pic10*/) VALUES (@pic1, @pic2, @pic3, @pic4, @pic5 /*@pic6, @pic7, @pic8, @pic9, @pic10*/)", con);

        cmd.Parameters.AddWithValue("@pic1", img.pic1);
        cmd.Parameters.AddWithValue("@pic2", img.pic2);

        cmd.ExecuteNonQuery();

        con.Close();

        return "ok";
    }
    catch (Exception ex)
    {
        if (con.State == ConnectionState.Open)
        {
            con.Close();
        }

        return ex.Message.ToString();
    }
}

Chen · Accepted Answer · 2022-11-02 09:40:01Z

1

It looks like you are storing your images in wwwroot.

Maybe you want to save the same batch of uploaded image paths in some field in your database. You can add image paths one by one in the corresponding fields, and separate them with commas or other symbols, so as to ensure that the multiple images you upload at the same time can be stored in the same database data.
Another way is adding another table related to the table(one to many relationships) eg GetImages table with imageurl property, copy the uploaded files to a folder of your choice and update the imageurl(s) of GetImages with strings pointing to the folder with images.

Please refer to this link: How to map database relationships.
If you want to store the image directly in the database, you can consider the FileUpload control, refer to this link.

Note that either way you use your database table structure is extremely important.So it is recommended that you add a new class and use the IFormFileCollection type and the multiple property to upload multiple images at the same time.

For example:

Model:

public class YourModel
{
    public IFormFileCollection Images { get; set; }
}

Controller:

[HttpPost]
public IActionResult UploadImages(YourModel model)
{
    //Use a for loop to store the image and add the corresponding path to the database field
}

View:

@model YourModel

<form asp-controller="controller" asp-action="action" enctype="multipart/form-data" method="post">
    <input asp-for="@Model.Images" type="file" multiple />
    <input type="submit" value="Upload"/>
</form>

Hope this can help you.

Update:

I found a jquery plugin that can achieve your requirement.

Add the necessary library files to your project:

<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />

View:

<form id="UploadImages" enctype="multipart/form-data">
    <input type="file" id="Images" multiple />
    <input value="Upload" type="submit" />
</form>
<script>
        var pond = FilePond.create(document.querySelector('#Images'), {allowMultiple: true});
        $("#UploadImages").submit(function (e) {
            e.preventDefault();
            var formdata = new FormData();
            pondFiles = pond.getFiles();
            for (var i = 0; i < pondFiles.length; i++) {
                formdata.append('Images', pondFiles[i].file);
            }

            $.ajax({
                method: "post",
                url: "/Home/Upload",
                data: formdata,
                processData: false,
                contentType: false
            });
        })
</script>

Controller:

[HttpPost]
public IActionResult Upload(IFormFile[] Images)
{
    return View();
}

This way you can pass it as an extra parameter to the controller without adding a new class or property. You can have a try.

edited Nov 2, 2022 at 9:40

answered Nov 2, 2022 at 5:45

Chen

5,2821 gold badge4 silver badges12 bronze badges

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

6 Comments

Creative Things Over a year ago

if i choose picture and after choosing picture i want to choose more picture instead of adding picture it replace those picture which i slected before

Creative Things Over a year ago

i just want to select picture one by one with single choose button

Chen Over a year ago

Do you want to upload one by one or all at the same time? @Creative Things

Creative Things Over a year ago

i want to upload all at same time but selection of picture one by one means when i hit select button i choose photo or group of photo and after that if i hit one more time choose button then it select more picture but replace those picture which i selectd before and after that when i hit the post button it upload all at same.

Chen Over a year ago

Hi, @Creative Things, I updated my answer, you can have a try.

|

Collectives™ on Stack Overflow

How to upload multiple images in database in ASP.NET Core MVC using ADO.NET

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related