Upload an ASP.Net MVC 5 Image to a Folder

Question

I have a very simple MVC5 application that has a product page for a client that I also use the basic CRUD operations that were built in MVC 5.

I have a model called Cakes.cs because the client sells cakes. Pretty simple. Here is the code for this model:

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace TastyCakes.Models { public class Cakes { public int CakesID { get; set; } public string Name { get; set; } public string Description { get; set; } public decimal Price { get; set; } public string CakeImage { get { return Name.Replace(" ", string.Empty) + ".jpg"; } } } } 

As you can see, I use the computed property to create an image name for each cake. I need only 1 image for each cake. Now that I go to edit the cake on my CRUD pages. I would like to add a simple image upload that will upload the image (no resizing or thumbnails needed). But I would like to overlay the computed property name. In other words: no matter what user named his photo, my upload code will rename it to everything that has Cakes.Name (minus any spaces) + ". Jpg", and save it in "~ Images / Cakes".

All I need is for the download to be on the real edit page, so the cupcake has already been created at this point. All information necessary for renaming a file should be accessible and convenient for use on the editing page. Below is my page editing code:

Change page:

 @model TastyCakes.Models.Cakes <div class="row"> <div class="large-12 columns"> <hgroup class="title"> <h1>Edit Cakes</h1> </hgroup> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <hr /> @Html.ValidationSummary(true) @Html.HiddenFor(model => model.CakesID) <div class="medium-12 column"> @Html.LabelFor(model => model.Name) @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="medium-12 column"> @Html.LabelFor(model => model.Description) @Html.EditorFor(model => model.Description) @Html.ValidationMessageFor(model => model.Description) </div> <div class="medium-12 column"> @Html.LabelFor(model => model.Price) @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div> <div class="medium-12 column"> <input type="submit" value="Save" class="tiny button" /> @Html.ActionLink("Back to List", "Index", null, new { @class = "tiny button" }) </div> </div> } @section Scripts { @Scripts.Render("~/bundles/jqueryval") } </div> </div> 

I looked at several html5 and ASP.Net 4 solutions, but that is too much. I want it very simple. Any ideas or a hit in the right direction would be greatly appreciated. I use this code not only for the customers website, but also for posting on a fictitious website used to teach very simple MVC concepts.

Answer 1

You will need:

• add input type file to your form,
• have an attribute in the form element enctype = "multipart/form-data"

Then add the HttpPostedFileBase to your model with the same name as the input name. Then HttpPostedFileModelBinder will populate the model property from the downloaded file before the action is called. Note, I think you should probably add the model identifier somewhere, perhaps as an element of the path, to guarantee uniqueness in the image path, so that the images are not accidentally overwritten.

There is a fairly complete discussion of this issue at http://www.prideparrot.com/blog/archive/2012/8/uploading_and_returning_files

 public class Cakes { ... public HttpPostedFileBase UploadedFile { get; set; } } [HttpPost] public ActionResult Edit(Cakes cake) // I'd probably use a view model here, not the domain model { if (ModelState.IsValid) { if (cakes.UploadedFile != null) { cakes.UploadedFile.SaveAs(Path.Combine("path-to-images-for-this-cake", cakes.CakeImage)); } .... } } 

Answer 2

The code that was provided here ultimately went to create this small demo that allows you to upload images to the file system and use them dynamically without storing any values ​​in the database; however, you will have a string for the location of the image file as part of your Model class, which uses the convention and the name of the loaded file to display.

I would like to upload this to github and see if I can get some others to help me develop a better solution using this idea. Thinking that he worked with MongoDB too.

ASP.NET MVC 5 Load and delete images with a computed property