working with multiple and single file upload

Question

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

score 1 · Accepted Answer · answered Dec 27 '12 at 06:51

1

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 });
}

answered Dec 27 '12 at 06:51

Darin Dimitrov

1,023,142
271
3,287
2,928

Thank you Darin. I also have form data along with the file upload. If i use form to submit, the fileupload data is lost. If i dont use `@Html.BeginForm` fileupload works well. How to get fileupload data to controller action along with form data ? – Karthik Chintala Dec 27 '12 at 07:16
You could pass additional form data parameters to the uploadify plugin using the [`formData`](http://www.uploadify.com/documentation/uploadify/formdata/) setting. – Darin Dimitrov Dec 27 '12 at 09:06
Is there any other way to pass it to the controller,because i have about 20 textboxes and it becomes cubersome – Karthik Chintala Dec 27 '12 at 09:08
1

As I said, you could serialize the entire form: `scriptData: $('#yourForm').serializeObject()`. This way no matter how many input fields you have in your form, all of them will be serialized and passed along with the request. – Darin Dimitrov Dec 27 '12 at 09:09
The problem has started again. If i use the form tag, again the `fileData` is becoming null. Why is this happening. – Karthik Chintala Dec 27 '12 at 09:27
1

I don't know, I guess you are submitting the form, and you haven't subscribed to the `.submit()` event of this form in order to trigger the `uploadify('upload', '*')` method. In my answer I have done this in the .click event of a button. But if you are using a form you need to do this inside the .submit event of the form. And most importantly, do not forget to return false from this callback to ensure that the form is never normally submitted but it goes through uploadify. If you don't do this you will always get null. – Darin Dimitrov Dec 27 '12 at 09:29
Thanks, but i dont see the form data in controller its all empty and file upload data is not null – Karthik Chintala Dec 27 '12 at 09:49
here is my code to submit event `$("form").submit(function () { $("#file_upload").uploadify('upload', '*'); return false; });` – Karthik Chintala Dec 27 '12 at 09:49
You need to set the `scriptData` parameter inside the `.submit` handler because the data could change between the time you have setup uploadify at page load and the time the form is submitted. Also inspect the actual request that's being sent to the server (by looking at the Request.Form collection inside your controller action) and analyze if the names of the input fields match your view models properties, ... – Darin Dimitrov Dec 27 '12 at 10:41
This is how i did in `.submit` `$('#file_upload').uploadify('settings', 'scriptData', $("form").serialize());` is it correct way of giving ? The names of the input fields are matching with the properties of viewmodel. I could only see two keys in Request.Form() – Karthik Chintala Dec 27 '12 at 10:51
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/21759/discussion-between-karthik-and-darin-dimitrov) – Karthik Chintala Dec 27 '12 at 10:51
No, that's not the correct way. You should use `$("form").serializeObject()` as shown in my comment instead of `.serialize()`. – Darin Dimitrov Dec 27 '12 at 10:52
But I dont find `.serializeObject()` in the intellisense – Karthik Chintala Dec 27 '12 at 10:55
Oh sorry, here's the function: http://stackoverflow.com/q/8900587/29407 It's not a standard jQuery function. You could define it yourself. – Darin Dimitrov Dec 27 '12 at 11:10
Sorry i dont know where to place this. I kept it at the beginning of the ` – Karthik Chintala Dec 27 '12 at 11:21

score 0 · Answer 2 · answered Dec 27 '12 at 06:37

0

try it plugin: works with html5 + flash + silverligth according: client browser. http://des.delestesoft.com:8080/?go=2

answered Dec 27 '12 at 06:37

toto

1,180
2
13
30

Is it an opensource and can be used for commercial purposes ? – Karthik Chintala Dec 27 '12 at 06:41
And also the question is not regarding plugin, its regarding HttpPostedFileBase – Karthik Chintala Dec 27 '12 at 06:42

working with multiple and single file upload

2 Answers2