September 22, 2009 at 06:49

We fasten ajax-loading of files in asp.net mvc, using jQuery plugins

    In this article, we will figure out how to dynamically upload files to asp.net mvc using jQuery , its plugins, and such and such a mother. To do this, we will make a “proof of concept” and try to enjoy the process. =)

    To implement the plan, there are a lot of options. I will focus on two plugins:  Ajax upload and Multiple File Upload .


    Part One: Server Side


    Everything is trivial on the server. We will receive files from Request.Files. We communicate with client scripts through JSON. To do this, the return value in the controller will be JsonResult, or its descendants. But we leave the content type text / html, otherwise browsers will offer to save content like application / json.

    Simple Action:
    1. private readonly IFileService _fileService = new FileServiceStub ();
    2.  
    3. /// 
    4. /// Processing uploading files to the server.
    5. /// 
    6. /// Json Result containing a list of file names.
    7. [HttpPost]
    8. public JsonResult UploadFiles ()
    9. {
    10.     Icollection collection = _fileService.Upload (Request.Files);
    11.  
    12.     return new JsonResult
    13.                 {
    14.                    ContentType = "text / html", 
    15.                    Data = new {collection}
    16.                 };
    17. }
    18.  


    Part Two: Multiple File Upload Plugin


    This plugin works with jQuery.Form .

    HTML form:
    1.     
    2.         
    3.             File upload:
    4.             
  •         
  •     
  •  
  •     
  •     
  •  
  •     

    List of downloaded files

  •     


    • Plugin setup:
    1. // Executes code when the document is fully loaded.
    2. $ (document) .ready (function () {
    3.     var form = $ ('# upload-files'); // Download form.
    4.     var messages = $ ('# messages'); // Notification area.
    5.     var list = $ ('# file-list'); // List of already downloaded files.
    6.  
    7.     // Customize MultiFile.
    8.     $ ('. multi-file-upload'). MultiFile ({
    9.         max: 5, // Number of files downloaded at a time.
    10.         STRING: {// Line feed. You can embed html-code (pictures, for example).
    11.             remove: 'Remove',
    12.             selected: 'Selected: $ file',
    13.             denied: 'Invalid extension: $ ext!',
    14.             duplicate: 'This file is already selected: \ n $ file!'
    15.         }
    16.     });
    17.  
    18.     // Set up ajaxForm
    19.     form.ajaxForm ({
    20.         iframe: true, // Send using iframe.
    21.         dataType: "json", // We exchange using json.
    22.  
    23.         // Run before sending files.
    24.         beforeSubmit: function () {
    25.             // Uncomment the next line if submit is called from javascript.
    26.             // $. fn.MultiFile.disableEmpty ();
    27.  
    28.             // Display a download message. It’s better to screw jQuery.blockUI here, but I leave it for clarity.
    29.             messages.html (' Loading file (s) ... ');
    30.         },
    31.  
    32.         // Run after receiving a response about success.
    33.         success: function (result) {
    34.             // Uncomment the next line if submit is called from javascript.
    35.             // $. fn.MultiFile.reEnableEmpty ();
    36.  
    37.             // Clear the file upload form.
    38.             $ ('. multi-file-upload'). MultiFile ('reset');
    39.  
    40.             // Clear the download message.
    41.             messages.empty ();
    42.  
    43.             // Add new uploaded files to the general list of uploaded files.
    44.             if (result.collection.length> 0) {
    45.                 $ .each (result.collection, function (i) {
    46.                     list.append ('
    47. '+ this +'
      48. ');
    48.                 });
    49.             }
    50.         },
    51.  
    52.         // Run on error.
    53.         error: function (xhr, textStatus, errorThrown) {
    54.             // Clear the file upload form.
    55.             $ ('. multi-file-upload'). MultiFile ('reset');
    56.             alert ('An error occurred while downloading files:' + errorThrown);
    57.         }
    58.     });
    59. });


    Part Three: Ajax Upload Plugin 



    HTML form:
    1.     
    2.     
    3.         Add a new file.
  •      Downloading.

    • Also popular now: