Search code examples
javascriptasp.net-mvc-4fine-uploader

Manually Trigger Uploads with FineUploader on MVC 4


i'm trying to use FineUploader to be able to submit several files to the server on a single page using Asp-Net MVC 4. I'm using the code from the examples:

HTML:

<div id="manual-fine-uploader"></div>
<button id="triggerUpload" class="red text_only has_text" style="margin-top: 10px;">
       <span data-bind="text: 'Subir archivos'"></span>
</button>

JS:

$(document).ready(function() {
                var manualuploader = $('#manual-fine-uploader').fineUploader({
                    debug: true,
                    request: {
                        element: $('#manual-fine-uploader'),
                        endpoint: "SaveArchivos"
                    },
                    autoUpload: false,
                    text: {
                        uploadButton: "<i class=\"icon-plus icon-white\"></i>"+i18n.t('seleccionarArchivos')
                    }
                });

                $('#triggerUpload').click(function() {
                    manualuploader.fineUploader('uploadStoredFiles');
                });
            });   

Controller:

    public class CondicionesComercialesController : Controller
{
    ...
    [HttpPost]
    public FineUploaderResult SaveArchivos(FineUpload upload)
    {
        // asp.net mvc will set extraParam1 and extraParam2 from the params object passed by Fine-Uploader

        var dir = @"e:\upload\path";
        var filePath = Path.Combine(dir, upload.Filename);
        try
        {
            upload.SaveAs(filePath);
        }
        catch (Exception ex)
        {
            return new FineUploaderResult(false, error: ex.Message);
        }

        // the anonymous object in the result below will be convert to json and set back to the browser
        return new FineUploaderResult(true, new { extraInformation = 12345 });
    }
    ...
    }

The request gets to the server-side, but the upload parameter is always null. I guess i'm missing some id on the client-side but I can't find anything on the documentation that points out where to set it. Any ideas?


Solution

  • I found my error. I was missing the ModelBinder line in the FineUpload class (on server side):

        using System.IO;
        using System.Web.Mvc;
    
        namespace Vizion.Web.UI.Helpers
        {
    
          [ModelBinder(typeof(ModelBinder))]
    
          public class FineUpload
          {
            ...
    

    Now it works perfectly. Thanks to Ray Nicholus!