Screwing ajax file uploads in asp.net mvc using jQuery plugins

In this article we will figure out how to dynamically load files into asp.net mvc using jQuery , its plug-ins, and such and such mother. For this we will do the “proof of concept” and try to enjoy the process. =)

To implement the conceived there are lots of options. I will focus on two plugins: Ajax upload and Multiple File Upload .

Part One: Server Side

On the server, everything is trivial. We will receive files from Request.Files . We communicate with client scripts via JSON. For this, the return value in the controller will be JsonResult , or its heirs. But the content type is text / html, otherwise browsers will offer to save the content like application / json.
')

Simple Action:

1. private readonly IFileService _fileService = new FileServiceStub ( ) ;
3. /// <summary>
4. /// Processing upload files to the server.
5. /// </ summary>
6. /// <returns> Json Result containing the list of file names. </ returns>
7. [ HttpPost ]
8. public JsonResult UploadFiles ( )
9. {
10. ICollection < string > collection = _fileService. Upload ( Request. Files ) ;
12. return new JsonResult
13. {
14. ContentType = "text / html" ,
15. Data = new { collection }
16. } ;
17. }

Part Two: Multiple File Upload Plugin

This plugin works together with jQuery.Form .

Html form:

1. < form id = "upload-files" action = "/ File / UploadFiles" method = "post" enctype = "multipart / form-data" >
2. < div >
3. Upload files:
4. < input class = "multi-file-upload" type = "file" name = "file" / > < / div >
5. < input type = "submit" value = "Download" > < / input >
6. < / form >
8. <! - Download message output location ->
9. < div id = "messages" > < / div >
11. < h3 > List of uploaded files < / h3 >
12. < ol id = "file-list" > < / ol >

Plugin configuration:

1. // Executes the code when the document is fully loaded.
2. $ ( document ) . ready ( function ( ) {
3. var form = $ ( '# upload-files' ) ; // Download form.
4. var messages = $ ( '#messages' ) ; // The notification area.
5. var list = $ ( '# file-list' ) ; // List of files already uploaded.
7. // Configure MultiFile.
8. $ ( '.multi-file-upload' ) . MultiFile ( {
9. max : 5 , // Number of files uploaded at once.
10. STRING : { // String Translation. You can insert 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. } ) ;
18. // Set up ajaxForm
19. form. ajaxForm ( {
20. iframe : true , // Ship using iframe.
21. dataType : "json" , // Exchange is conducted using json.
23. // Perform before sending files.
24. beforeSubmit : function ( ) {
25. // Uncomment the next line, if submit is called from javascript.
26. // $. fn.MultiFile.disableEmpty ();
28. // Display a download message. It is better to tie jQuery.blockUI here, but I leave it for clarity.
29. messages. html ( '<img src = "/ Content / busy.gif" /> Load file (s) ...' ) ;
30. } ,
32. // Execute 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 ();
37. // Clear the file upload form.
38. $ ( '.multi-file-upload' ) . MultiFile ( 'reset' ) ;
40. // Clear the boot message.
41. messages. empty ( ) ;
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 ( '<li>' + this + '</ li>' ) ;
47. } ) ;
48. }
49. } ,
51. // Execute on error.
52. error : function ( xhr , textStatus , errorThrown ) {
53. // Clear the file upload form.
54. $ ( '.multi-file-upload' ) . MultiFile ( 'reset' ) ;
55. alert ( 'An error occurred while loading files:' + errorThrown ) ;
56. }
57. } ) ;
58. } ) ;

Part Three: Ajax Upload Plugin

Html form:

1. <! - File upload form. May be arbitrary. ->
2. < div id = "file_upload_button" >
3. <a href = "#"> Add < / a > a new file. < / div >
4. < div id = "uploading" style = "display: none" > < img src = "/Content/busy.gif" alt = "Download" align = "left" / > Loading. < / div >
5. <! - List of downloaded files ->
6. < ol class = "files" > < / ol >

Plugin configuration:

1. $ ( document ) . ready ( function ( ) {
2. new AjaxUpload ( $ ( '#file_upload_button' ) ,
3. {
4. // Whether to send the file immediately after selection
5. autoSubmit : true
6. // Where to send
7. action : '/ File / UploadFiles' ,
8. // Variable name to store the file.
9. name : 'myfile' ,
10. // Type of server response.
11. response : 'json' ,
13. // Fires before file upload
14. // You can also return false to cancel.
15. onSubmit : function ( file , extension ) {
16. // Hide the file select button.
17. $ ( '#file_upload_button' ) . hide ( ) ;
18. // Show the download message.
19. $ ( '#uploading' ) . show ( ) ;
20. // If you need to load only one file:
21. //this.disable ();
22. } ,
24. // Run after receiving a response from the server.
25. // file is the name of the file specified by the client.
26. // response - server response.
27. onComplete : function ( file , response ) {
28. $ ( '#file_upload_button' ) . show ( ) ;
29. $ ( '#uploading' ) . hide ( ) ;
31. // Get the javascript object.
32. var resultObject = eval ( '(' + response + ')' ) ;
34. // Add new uploaded files to the general list.
35. if ( resultObject. collection . length > 0 ) {
36. $. each ( resultObject. collection , function ( i ) {
37. $ ( '.files' ) . append ( '<li>' + this + '</ li>' ) ;
38. } ) ;
39. }
40. }
41. } ) ;
42. } ) ;

Instead of conclusion

MultiFile can send multiple files at once, but it is placed only in standard form ( <input type="file"... ). Size: MultiFile (~ 20Kb) + jQuery.Form (~ 22Kb) = ~ 42Kb.

AjaxUpload sends files one by one, but you can flexibly customize its presentation - it is not attached to the form. Plugin size: 14Kb, i.e. three times less than MultiFile + Form.

Both have a “restriction”: files are selected one by one. If you want to select several (tens) files at once, look towards the flash technology.

Sample sources are online. You can merge them entirely , but you can immediately see .