Uploading images from different input files in MVC

Question

I want to upload Images to a database. The database contains url images and images uploads to folder in file system. I have the following tables in the database,

1. Furniture
2. MainFileDetails (1-1 relationship with Furniture) where store the main image
3. FileDetails (1-Many relationship with Furniture) where we store other images associated with Furniture.

Here is my code:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Furniture furniture , HttpPostedFileBase fileTwo, HttpPostedFileBase file)
{
    if (ModelState.IsValid)
    {
        for (int i = 0; i < Request.Files.Count; i++)
        {
            fileTwo = Request.Files[i];
            if (fileTwo != null && fileTwo.ContentLength > 0)
            {
                var fileNameTwo = Path.GetFileName(fileTwo.FileName);
                MainFileDetails mainFileDetail = new MainFileDetails()
                {
                    FileName = fileNameTwo,
                    Extension = Path.GetExtension(fileNameTwo),
                    Id = Guid.NewGuid(),
                    FurnitureId = furniture.FurnitureId
                };
                var pathMain = Path.Combine(Server.MapPath("~/Upload/MainPage/"), mainFileDetail.Id + mainFileDetail.Extension);
                fileTwo.SaveAs(pathMain);
                db.Entry(mainFileDetail).State = EntityState.Modified;
                db.SaveChanges();
                FileDetail fileDetail = new FileDetail()
                {
                    NameFile = fileNameTwo, //or mainFileDetail.FileName
                    Extension = Path.GetExtension(fileNameTwo), //or mainFileDetail.Extension
                    Id = Guid.NewGuid(),
                    FurnitureId = furniture.FurnitureId //or mainFileDetail. FurnitureId
                };
                var path = Path.Combine(Server.MapPath("~/Upload/"), fileDetail.Id + fileDetail.Extension);
                file.SaveAs(path);
                db.Entry(fileDetail).State = EntityState.Added;
            }
        }
        db.Entry(furniture).State = EntityState.Modified;
        db.SaveChanges();
        TempData["message"] = string.Format("Changes in \"{0}\" has been saved", furniture.Name);
        return RedirectToAction("Index");
    }
    ViewBag.CategoryId = new SelectList(db.Categories, "CategoryId", "Name", furniture.CategoryId);
    return View(furniture);
}

My View:

@model FurnitureStore.Entities.Furniture
....
@using (Html.BeginForm("Edit", "Furnitures", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
    ....
    @Html.HiddenFor(model => model.FurnitureId)
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
    @Html.ValidationMessageFor(model => model.Name)
    .... // more inputs for properties of the model
    @Html.LabelFor(model => model.CategoryId, "Category")
    @Html.DropDownList("CategoryId", null)
    @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = 
    // Main file
    <input type="file" name="fileTwo" />
    @if(Model.MainFileDetails.Id == null)
    {
        <div class="form-control-static">No image</div>
    }
    else
    {
        <img src="~/Upload/MainPage/@(Model.MainFileDetails.Id + Model.MainFileDetails.Extension)"  width="240" height="240" />
    }
    // Other files
    <input type="file" name="file" multiple="multiple" />
    <ul class="attachment">
        @foreach (var item in Model.FileDetails)
        {
            <li style="list-style-type:none; display:inline;">
                <img src="~/Upload/@(item.Id + item.Extension)" />
                <a href="javascript:void(0);" data-id="@item.Id" class="deleteItem">X</a>
            </li>
        }
    </ul>
    <input type="submit" value="Save" class="btn btn-primary"  />
}

But I have a problem. All photo just uploads to the Upload/MainPage folder. I want to upload photo separately to MainPage in one table and separately to gallery (other table).

How can I fix my code, because last uploaded photo in gallery table replaces photo in MainPage?

Answer 1

The foreach loop in your controller method is looping through every file you have uploaded, and then you create a new MainFileDetails for each file and save it. You need to get the 'main file' from the first file input and save it to MainFileDetails and then loop through the files in the second file input and save each of them to FileDetails.

To solve the immediate problem, change your method to

public ActionResult Edit(Furniture furniture , HttpPostedFileBase fileTwo, IEnumerable<HttpPostedFileBase> file)

and those parameters will be bound with the values for the file inputs. Then its simply

if (ModelState.IsValid)
{
    if (fileTwo != null && fileTwo.ContentLength > 0)
    {
        // create an instance of MainFileDetails and set its properties based on
        // the values of fileTwo and save
    }
    foreach (HttpPostedFileBase image in file)
    {
        // create an instance of FileDetails and set its details based on 
        // the values of image and save
    }
    db.Entry(furniture).State = EntityState.Modified;
    db.SaveChanges();
    ....

---

There are however numerous other potential issues with your code.

• Rule 1. Your editing data, so always use a view model. What is ViewModel in MVC?
• Its unclear why you need a separate 1 to 1 table for the main image. The properties for that could be stored in the Furniture table. Alteratively you could just have the 1 to Many table, and have a bool IsMainImage property which would allow you to easily swap which is the main image.
• You images table (FurnitureImages would be a more appropriate name) should include a auto-incremented int ID for the PK and properties for the file path and file display name
• If ModelState is invalid, you return the view, but all the files are lost and the poor user needs to re-select them all again

Your view models should be

public class FurnitureVM
{
    public int? ID { get; set; }
    [Required( ... )]
    public string Name { get; set; }
    .... // other properties of Furniture that you need in the view
    [Required( ... )]
    public int? Category { get; set; }
    public IEnumerable<SelectListItem> CategoryList { get; set; }
    public HttpPostedFileBase MainFile { get; set; }
    public IEnumerable<HttpPostedFileBase> SecondaryFiles { get; set; }
    public ImageVM  MainImage { get; set; }
    public List<ImageVM> SecondaryImages { get; set; }
}
public class ImageVM
{
    public int? ID { get; set; }
    public string Path { get; set; }
    public string DisplayName { get; set; }
}

And the view

@model yourAssembly.FurnitureVM
....
@using (Html.BeginForm("Edit", "Furnitures", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
    // Note: no need for a hidden input for the ID property assuming your using the default routing
    @Html.LabelFor(m => m.Name)
    @Html.EditorFor(m => m.Name)
    @Html.ValidationMessageFor(m => m.Name)
    .... // more inputs for properties of the model
    @Html.LabelFor(m => m.Category)
    @Html.DropDownListFor(m => m.Category, Model.CategoryList, "Please select")
    @Html.ValidationMessageFor(m => m.Category)
    // Main file
    @Html.TextBoxFor(m => m.MainFile, new { type = "file" })
    @Html.ValidationMessageFor(m => m.MainFile)
    if (Model.MainImage != null)
    {
        @Html.HiddenFor(m => m.MainImage.ID)
        @Html.HiddenFor(m => m.MainImage.Path)
        @Html.HiddenFor(m => m.MainImage.DisplayName)
        <img src="@MainImage.Path" alt="@MainImage.DisplayName" />
    }
    // Secondary files
    @Html.TextBoxFor(m => m.SecondaryFiles, new { type = "file", multiple = "multiple" })
    @Html.ValidationMessageFor(m => m.SecondaryFiles)
    for (int i = 0; i < Model.SecondaryImages.Count; i++)
    {
        @Html.HiddenFor(m => m.SecondaryImages[i].ID)
        ...
    }
    <input type="submit" value="Save" />
}

And the controller POST method

public ActionResult Edit(FurnitureVM model)
{
    // Save the files
    if (model.MainFile != null && model.MainFile.ContentLength > 0)
    {
        string displayName = model.MainFile.FileName;
        string extension = Path.GetExtension(displayName)
        string fileName = string.Format("{0}{1}", Guid.NewGuid(), extension)
        string path = Path.Combine("~/Images/", fileName);
        model.MainFile.SaveAs(Server.MapPath(path));
        model.MainImage = new ImageVM() { Path = path, DisplayName = displayName };
    }
    foreach (HttpPostedFileBase file in model.SecondaryFiles)
    {
        ....
    }
    if (!ModelState.IsValid)
    {
        model.CategoryList = new SelectList(....); // repopulate the SelectList
        return View(model);
    }
    // Get the data model from the database
    Furniture furniture = db.Furniture.Where(x => x.FurnitureId == model.ID).FirstOrDefault()
    // Update properties based on view model
    furniture.Name = modell.Name;
    ...
    // Update the main image
    if (model.MainImage != null && !model.MainImage.ID.HasValue)
    {
        FurnitureImages image = new FurnitureImages()
        {
            image.Path = model.MainImage.Path;
            image.DisplayName = model.MainImage.DisplayName;
            image.IsMainImage = true;
            furniture.Images.Add(image);
    }
    // Update secondary images
    IEnumerable<ImageVM> newImages = model.SecondaryImages.Where(x => x.ID == null);
    foreach (ImageVM image in newImages)
    {
        .... // add to the collection
    }
    // Save and redirect
}