How can I upload unlimited files to my controller?

lulu50
lulu50 used Ask the Experts™
on
Hello!!!

I have an input form and on that form the user should be able to upload multiple files.  

I have the UI / Jquery uploading multiple files and deleting multiple files working great.

the problem that I have is in my controller, I don't know how to get the files into my model with multiple unlimited files.

Let me show you what I have

//With this code user can upload and remove multiple files: 

    $(document).ready(function () {

        $("#FileCount").val("");

    });




//Begin multiple file upload
    var counter = 0;
    function AddFileUpload()
    {
        var div = document.createElement('DIV');

        div.innerHTML = '<button class="btn btn-default glyphicon glyphicon-remove" style="height:41px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; width:80px;border: 1px solid #BBB;cursor:pointer;" id="Button' + counter + '" type="button" ' +
          'value="Remove" onclick = "RemoveFileUpload(this)" >' +
          '</button>'  +

        '<input id="file' + counter + '" name = "file' + counter +
        '" type="file" class="fileStyle" />';

        document.getElementById("FileUploadContainer").appendChild(div);

        counter++;

        $('#FileCount').val(counter);

    }


    function RemoveFileUpload(div)
    {
        var el = document.getElementById("FileUploadContainer");
        el.removeChild(div.parentNode);
        var children = el.getElementsByTagName('input');
        counter = 0;
        for (var i = 0; i < children.length;i++) {
            if (children[i].type.toLowerCase() == 'file') {
                var newname = 'file' + counter++;
                children[i].setAttribute('name', newname);
                children[i].id = newname;
            }
        }

        $('#FileCount').val(counter);

    }



       <input type="hidden" name="FileCount" id="FileCount" value="0" />

                           <button name="Button1" id="Button1" type="button" style="border: 0; background: transparent;cursor:pointer;"
                                    onclick="AddFileUpload();">
                                Add a file: <img src="~/Content/images/add.png" alt="Add" />
                            </button>
                            <br /><br />
                            <div id="FileUploadContainer">
                                @*FileUpload Controls will be added here*@
                            </div>

Open in new window



now the problem is I don't know how to upload my file0 file1 file2 file3 ect.... into my model. 

here's what I have 

Controller: 

 [HttpPost]
        public ActionResult Rule(CABRRuleViewModel model, HttpPostedFileBase[] file)
        {
     
          //How can I get my unlimited multiple files to my controller?


            return View(model);
        }

____________________________________________________________

Model: 

 public class CABRRuleViewModel
    {
           public HttpPostedFileBase[] filesList { get; set; }
    }

Open in new window



Thank you so much for your help!!!!!!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Eduard GherguArchitect - Coder - Mentor

Commented:
Hi,

The files cannot be uploaded in your model. If you need the file names, you can retrieve them from the location where the files were uploaded.

Author

Commented:
Hi Eduard,

Thank you for taking the time to review my post.

I got it to loop thru the files but I don't know how to put it into the model. 

How can I put my files information into my model?

 public ActionResult Rule(CABRRuleViewModel model, IEnumerable<HttpPostedFileBase> files)
        {
                    var filescount = this.Request.Files.Count;
                    if (filescount > 0)
                    {
                        for (int i = 0; i < this.Request.Files.Count; i++)
                        {
                            HttpPostedFileBase file = Request.Files["file" + (i)];
                            String key1 = this.Request.Files.GetKey(i);
                            var FileName = Path.GetFileName(file.FileName);
                            var FilePath = Path.Combine(Server.MapPath("~/UploadedFiles/"), FileName);
                            var FileLength = file.ContentLength;
                            var FileType = file.ContentType;
                            var FileStream = file.InputStream;
                            file.SaveAs(FilePath);

                        }
                    }
}

Open in new window

Architect - Coder - Mentor
Commented:
Hi,
Add a List<FileInfo> FilesList{ get{…}}  property on your model that will contain the logic to fill the FileInfo objects. If there are also other files in the UploadedFiles folder, not related with the  current upload, you can create a function that will receive the names of your files from the action that you have presented.

Author

Commented:
Thank you for all your help
Eduard GherguArchitect - Coder - Mentor
Hi! My pleasure! Please, let me know if you need more help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial