Uploading multiple images + text fields in ASP.NET MVC

Question

I'm very new to ASP.net MVC, so please be as descriptive as possible in your answer :)

Let me simplify what I'm trying to do. Imagine I have a form where you want to enter some information about a car. The fields might be: Make, Model, Year, Image1, Image2.

On the bottom of the form is a "Save" button. The associated Controller method will save Image1 and Image2 to disk, obtain their filenames and associate them with the car model, which will then be saved to the database.

Any ideas?

Thanks guys!

Edit

winob0t got me most of the way there. The only outstanding issue is the following: Image1 and Image2 are not required fields, so I now I can save 0,1 or 2 images; but if the user only uploads 1 picture I have no way of knowing if it came from imageUpload1 or imageUpload2.

Again, any help is appreciated!

Answer 1

In your controller you can access the uploaded files as:

    if(Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) {
        HttpPostedFileBase postFile = Request.Files.Get(0);
        string filename = GenerateUniqueFileName(postFile.FileName);
        postFile.SaveAs(server.MapPath(FileDirectoryPath + filename));
    }

protected virtual string GenerateUniqueFileName(string filename) {

    // get the extension
    string ext = Path.GetExtension(filename);
    string newFileName = "";

    // generate filename, until it's a unique filename
    bool unique = false;

    do {
        Random r = new Random();
        newFileName = Path.GetFileNameWithoutExtension(filename) + "_" + r.Next().ToString() + ext;
        unique = !File.Exists(FileDirectoryPath + newFileName);
    } while(!unique);
    return newFileName;
}

The text fields will arrive at your controller action as per usual i.e. Request.Form[...]. Note that you will also need to set the enctype on the form to "multipart/form-data". It sounds like you understand enough about ASP.NET MVC to do the rest. Note also that you can declare your form tag in the aspx view as follows, though you can use the more traditional approach if you like.

<% using(Html.BeginForm<FooController>(c => c.Submit(), FormMethod.Post, new { enctype = "multipart/form-data", @id = formId, @class = "submitItem" })) { %> 

<% } %>

Answer 2

Here is my solution, the above answer didn't quite work for my situation. It cares nothing about the form specifics and will allow multiple uploads.

    for (int i = (Request.Files.Count - 1); i >= 0; i--)
    {
          if (Request.Files != null && Request.Files[i].ContentLength > 0)
          {
               string path = this.Server.MapPath("~/Content/images/");
               string filename = Path.GetFileName(Request.Files[i].FileName);
               string fullpath = Path.Combine(path, filename);
               Request.Files[i].SaveAs(fullpath);
           }
     }