Question

I have a view model that is displayed in a view that uses uploadify. I need pass back collection data back in the post. How can I do this?

ViewModel:

public class ViewModel
{
   string Name;
   IEnumerable<Junk> theJunk;
}

public Junk
{
   int id;
   string Name;
}

View:

@model ViewModel

@using (@Html.BeginForm())
{
  <input type="file" name="dr405" id="dr405" />

    <div>
        @Html.LabelFor(model => model.Name)
        @Html.EditorFor(model => model.Name)
    </div>        
    @Html.EditorFor(model => model.theJunk)

    <input type="submit" value="Upload Junk" /> 
}

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery("#dr405").uploadify({
            'uploader': '@Url.Content("~/Scripts/uploadify.swf")',
            'cancelImg': '/Content/themes/base/images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'home/upload',
            'folder': '/uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'sizeLimit': '38000',
            'multi': true,
            'auto': true,
        });
    }); 
    </script> 

Controller:

   [HttpPost]
    public ActionResult Upload(HttpPostedFileBase fileData, FormCollection collection)
    {
        // Get my view model here
        // ...get the main Name!
        // ...get the collection of Junk 

        return "ok";
    }

Answer 1

Here’s an article covering this scenario. You could use the scriptData parameter which allows you to pass additional values to the server. But since uploadify sends multiple requests for each file (assuming you have set the multi option to true) you could have 2 controller actions: the first one will be hit for each selected file so that it saves it somewhere and the second one will be hot once all files have been uploaded and send the form data. You should also set the auto option to false if you don’t want the upload to start immediately after selecting files.