Uploading gallery images using filesystem in Entity Framework - image

Question

I want to upload gallery images to ASP.NET MVC 5 application using filesystem upload. I added
public IEnumerable<string> GalleryImages { get; set; }
to my ProductModel, built solution and performed update-database in the package manager console. But, the property is not added to the Product table and when I try to add and then edit a product, I get this error:
System.ArgumentNullException: 'Value cannot be null.
Parameter name: source'
Also, I added this piece of code to Edit.cshtl:
#if (!Model.GalleryImages.Any())
{
<h4>There are no gallery images for this product.</h4>
}
<form action="/AdminPanel/Product/SaveGalleryImages" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
<div class="fallback">
<input type="file" name="file" multiple />
<input type="submit" value="Upload" />
</div>
</form>
<br /><br />
#foreach (var image in Model.GalleryImages)
{
<div style="display: inline-block">
<img src="/Images/Uploads/Products/#Model.Id/Gallery/Thumbs/#image" />
#Html.ActionLink("delete", "DeleteImage", "Product", new { #class = "deleteimage", data_name = image })
</div>
}
<link href="~/Scripts/dropzone/basic.css" rel="stylesheet" />
<link href="~/Scripts/dropzone/dropzone.css" rel="stylesheet" />
#section Scripts{
<script src="~/Scripts/dropzone/dropzone.js"></script>
<script>
$(function () {
//preview image
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("img#imgpreview").attr("src", e.target.result).width(200).height(200);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#ImageUpload").change(function () {
readURL(this);
});
//dropzone js
Dropzone.options.dropzoneForm = {
acceptedFiles: "image/*",
init: function () {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
location.reload();
}
});
this.on("sending", function (file, xhr, formData) {
formData.append("id", #Model.Id);
});
}
};
//dropzone js
$("a.deleteimage").click(function (e) {
e.preventDefault();
if (!confirm("confirm deletion"))
return false;
var $this = $(this);
var url = "/admin/shop/DeleteImage";
var imageName = $this.data("name");
$.post(url, { id: #Model.Id, imageName: imageName }, function (data) {
$this.parent().fadeOut("fast");
});
});
});
</script>
}

Answer 1

UPDATE:
What exactly do you expect as a column datatype when you model it as List<string>? SQL Server doesn't have any column data type to handle an arbitrary list of strings....
If you have an 1:n relationship between ProductModel and gallery images, you should really have a separate model class that holds the image information - e.g. MyImages. Then you could add a collection-style property
public virtual ICollection<MyImages> GalleryImages
to your ProductModel class.
SQL Server can't really handle List<string> as a column type .....
The steps needed to get this done are:
Change your C# model class (you've done this already)
Run add-migration migration-name so that an EF migration is added to your project (you seem to have skipped this step)
Run update-database to actually apply that migration to the database.
Only if you've completed ALL 3 steps in exactly this order are changes from your C# model class actually applied to the database - you CANNOT simply skip step #2 ....