upload multiple images asp.net core 6

Question

i have three model the parnt model named books and child model named charts and BookImage

the realtionship one to many the books model have multiple images come from charts and BookImage, the proplem i am facing when upload the image and displaying in my view, its same

for example i heve filde name Cover , GallaryImage and Charts, ok on this filds images its same,

in the my screenshot you can notice the images repeat in the fields,

my code:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Books books, IFormCollection multiple, IFormCollection multipleChart )
{
    if (ModelState.IsValid)
    {

        Uploadsimage(books.File , books);

       
        


        books.Images = new List<BookImage>();
        books.Charts = new List<Charts>();

        UploadMultipleImages(multiple.Files, books);


        UploadMultipleImagesCharts(multipleChart.Files , books);


        _context.Add(books);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    return View(books);
}

my method:
//for single image
 void Uploadsimage(IFormFile singleImage, Books book)
 {
     if (book.File != null)
     {
         string uploadsFolders = Path.Combine(_webHostEnvironment.WebRootPath, "Books/Cover");
         string uniqeFileName = Guid.NewGuid().ToString() + Path.GetExtension(book.File.Name) + ".png"; ;
         string filePath = Path.Combine(uploadsFolders, uniqeFileName);
         using (var FileStream = new FileStream(filePath, FileMode.Create))
         {
             book.File.CopyTo(FileStream);
         }
         book.CoverTitle = uniqeFileName;
     }
 }



//for Chars gallary:


void UploadMultipleImagesCharts(IFormFileCollection filecharts, Books books)
{
    foreach (var file in filecharts)
    {
        if (books.ChatrsFile != null)
        {
            string uploadsFolder = Path.Combine(_webHostEnvironment.WebRootPath, "Books/Mukkatat");
            string uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName) + ".png";
            string filePath = Path.Combine(uploadsFolder, uniqueFileName);


        using (var fileStream = new FileStream(filePath, FileMode.Create))
        {
            file.CopyTo(fileStream);
        }

        string filePathInDatabase = uniqueFileName;

        var chart = new Charts
        {
            FileChars = filePathInDatabase,
            Book = books
        };



        // Add the chart to the Books object's collection
        books.Charts.Add(chart);


        _context.Charts.Add(chart);
    }
}

}
 

//for Images Gallery

 void UploadMultipleImages(IFormFileCollection multi, Books books)
 {
     foreach (var file in multi)
     {
         if (books.ImageFile != null)
         {
             string uploadsFolder = Path.Combine(_webHostEnvironment.WebRootPath, "Books/Gallary");
             string uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName) + ".png";
             string filePath = Path.Combine(uploadsFolder, uniqueFileName);


         using (var fileStream = new FileStream(filePath, FileMode.Create))
         {
             file.CopyTo(fileStream);
         }

         string filePathInDatabase = uniqueFileName;

         var image = new BookImage
         {
             FilePath = filePathInDatabase,
             Book = books
         };



         // Add the image to the Books object's collection
         books?.Images?.Add(image);



         _context.Gallarey.Add(image);
     }
 }

 }

and my view:

<td>

    

    <img src="~/Books/Cover/@item.CoverTitle" alt="@item.CoverTitle" style="width:50%;height:11em;border-radius:1rem;" />

</td>
<td>
   @*  @Html.DisplayFor(modelItem => item.ImageGallry) *@
        <div class="gallery-images">
            @if (item.Images != null)
            {
                @foreach (var image in item.Images)
                {
                    <img src="~/Books/Gallary/@image.FilePath" alt="@image.FilePath" style="width:50%; height:11em; border-radius:1rem;" />
                }
            }
            else
            {
                <p>no image</p>
            }
        </div>
</td>
    <td>
       

    <div class="gallery-images">

        @foreach (var x in item.Charts)
        {
            <img src="~/Books/Mukkatat/@x.FileChars" alt="@x.FileChars" style="width:50%;height:11em;border-radius:1rem;" />
        }
    </div>
</td>