Uploading images from different input files in MVC - asp.net-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,
Furniture
MainFileDetails (1-1 relationship with Furniture) where store the main image
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)" />
X
</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
}