asp.net-mvc-3 file-upload uploadify httppostedfilebase

working with multiple and single file upload

I'm using uploadify fileupload plugin for my MVC3 project.

I'm trying to use the uploading file to the controller.

How do i use multi file upload and single file upload together ?

I know to use IEnumerable<HttpPostedFileBase> files for multiple files and HttpPostedFileBase files for single file upload. How to combine these.

In my project, the user may select multiple files or only a single file to upload it to the controller.

so, if i use IEnumerable<HttpPostedFileBase> files in my controller action, i'm unable to get single files(files is null) and if i use HttpPostedFileBase files it doesnot show anything, files is always null here.

How to get work with single file upload, i can get the multiple file uploads but not the single files.

How to get this work ?

Here is my code:

HTML

    <body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
              <div id="fileupload" style="display:none">
                <div style="clear: none;">
                    File to Upload:
                    <input type="file" name="file_upload" id="file_upload" style="padding-left: 50px;"/><hr />
                </div>
                <p style="text-align: right;">
                    <input type="submit" id="selectimage" value="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"/>
                    <input type="submit" id="cancelimage" value="Cancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="cancelupload();" />
                </p>
            </div>
            <input type="button" id="btnImg" />
            <div id="filecontent">
              Added Images:
             </div>
            }
    </body>
    <script>
$(function(){
    $('#file_upload').uploadify({
            'checkExisting': 'Content/uploadify/check-exists.php',
            'swf': '/Content/uploadify/uploadify.swf',
            'uploader': '/Home/Index',
            'auto': false,
            'buttonText': 'Browse',
            'fileTypeExts': '*.jpg;*.jpeg;*.png;*.gif;*.zip',
            'removeCompleted': false,
            'onSelect': function (file) {
                $("#selectimage").click(function () {
                    $("#file_upload-queue").appendTo("#filecontent");
                });
            }
        });
});
</script>

Controller Action

public ActionResult Index(IEnumerable<HttpPostedFileBase> fileData)
        {
            foreach (var file in fileData)
                {
                    if (file.ContentLength > 0)
                    {
                        string currpath = Server.MapPath("~/Images/");

                        currpath = Path.Combine(Server.MapPath("~/Images/Admin"), file.FileName);

                        file.SaveAs(currpath);
                    }

                }
            return View();
        }

What should i change in controller action to get single file upload and multi file upload to work?

Update

Neither IEnumerable<HttpPostedFileBase> fileData nor HttpPostedFileBase fileData working

Solution

The controller action will be called multiple times for each file to be uploaded. But you seem to have hidden the upload form (you placed it in a div with display:none). Also you never use Uploadify to actually upload the files. You have set auto: false and you never trigger the file upload using the upload method. So I guess that you are somehow submitting the form and expecting to get something on the server side, but that's not gonna happen like this.

So, let's clean and simplify things up:

<div>
    <input type="file" name="file_upload" id="file_upload" />
</div>

<hr />

<div id="filecontent">
    Added Images:
</div>

<input type="button" id="upload" value="Upload selected files to the server" />

<script type="text/javascript" src="@Url.Content("~/Content/Uploadify/jquery.uploadify-3.1.min.js")"></script>
<script type="text/javascript">
    $('#file_upload').uploadify({
        'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',
        'uploader': '@Url.Action("index", "home")',
        'auto': false,
        'multu': true,
        'buttonText': 'Browse',
        'fileTypeExts': '*.jpg;*.jpeg;*.png;*.gif;*.zip',
        'removeCompleted': false,
        'onSelect': function (file) {
            $("#selectimage").click(function () {
                $("#file_upload-queue").appendTo("#filecontent");
            });
        }
    });

    $('#upload').click(function () {
        $('#file_upload').uploadify('upload', '*');
        return false;
    });
</script>

and your controller action could now become:

[HttpPost]
public ActionResult Index(HttpPostedFileBase fileData)
{
    if (fileData != null && file.ContentLength > 0)
    {
        var currpath = Path.Combine(
            Server.MapPath("~/Images/Admin"), 
            fileData.FileName
        );
        fileData.SaveAs(currpath);
    }
    return Json(new { success = true });
}