Add FileUpload dynamically with a different name field

Question

I need the ability to add multiple file downloads based on the needs of the user, but the user should be able to assign a name for the download for later use. As you can see, I am just dynamically adding more file downloads, but assigning a name to these downloads seems to be my problem. Is there any way to achieve this?

Code in my view:

@using Microsoft.Web.Helpers @model MusicNews.Web.Models.ViewModel.ArticleCreateModel @{ ViewBag.Title = "Create"; } @section content { @using (Html.BeginForm("Create", "Article", FormMethod.Post, new { enctype = "multipart/form-data" })) { ... @FileUpload.GetHtml("Files",2,true,false,"Add more") <p> <input type="submit" value="Create" /> </p> } } 

The code in my controller looks like this:

 [Authorize] public ActionResult Create() { ViewBag.ArticleTypes = new SelectList(ArticleTypes, "Type"); return View(); } [HttpPost] [Authorize] public ActionResult Create(ArticleCreateModel article) { var files = Request.Files; if (ModelState.IsValid) { ... } return View(article); } 

Answer 1

You may have to create additional downloads yourself. This can be done using jQuery, for example:

Here's the HTML:

 <div id="uploads"> <div id="uploadtemplate"> <input type="file" name="upload" /> <input type="text" name="FileName" /> <div> <a href="#" id="addFile">Add file</a> </div> 

At boot, we will clone the "template" in a variable for later use. When we click, we clone the template and add it to the document.

 $(function() {/ $('#addFile').data('uploadtemplate', $('#uploadtemplate').attr('id', '').clone()); $('#addFile').click(function(e) { $(this).data('uploadtemplate').clone().insertBefore( $this) ); e.preventDefault(); }); }); 

Your model will be:

 public class Foo { public string[] FileName { get; set; } // will contain all file names given by the user } 

Then analyze Request.Files and do the magic that you know :-) The Foo.FileName field will contain the file name set by the user for each uploaded file. You can use this as the first file in Request.Files will be displayed in Foo.FileName [0], etc.

Answer 2

Your answer is very helpful when adding multiple file upload controls. But can you post the functionality, how can the user also remove the added (cloned) control. Thank you in advance.