How to use the plupload package with ASP.NET MVC?

Question

I am using plupload version 1.3.0

More specifically how I have to define my controller action to support chunking? Can I use the HttpPosteFileBase as a parameter?

At the moment I am using the following code to initialize the plugin

In the HEAD tag

<link type="text/css" rel="Stylesheet" media="screen" href="<%: Url.Content( "~/_assets/css/plupload/jquery.ui.plupload.css" )%>" />
<link type="text/css" rel="Stylesheet" media="screen" href="<%: Url.Content( "~/_assets/css/plupload/gsl.plupload.css" )%>" />
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/plupload/gears_init.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/plupload/plupload.full.min.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/plupload/jquery.ui.plupload.min.js" )%>"></script>

On document ready

$("#uploader").pluploadQueue({
    runtimes: 'html5,html4,gears,flash,silverlight',
    url: '<%: Url.Content( "~/Document/Upload" ) %>',
    max_file_size: '5mb',
    chunk_size: '1mb',
    unique_names: true,
    filters: [
        { title: "Documenti e Immagini", extensions: "doc,docx,xls,xlsx,pdf,jpg,png" }
    ],
    multiple_queues: false
});

Just wondering why 'multiple_queues' is declared twice with opposite values? (typo?) — Geovani Martinez, Jun 27 '11 at 20:49

score 43 · Accepted Answer · edited Feb 13 '14 at 14:05

43

Here you go:

[HttpPost]
public ActionResult Upload(int? chunk, string name)
{
    var fileUpload = Request.Files[0];
    var uploadPath = Server.MapPath("~/App_Data");
    chunk = chunk ?? 0;
    using (var fs = new FileStream(Path.Combine(uploadPath, name), chunk == 0 ? FileMode.Create : FileMode.Append))
    {
        var buffer = new byte[fileUpload.InputStream.Length];
        fileUpload.InputStream.Read(buffer, 0, buffer.Length);
        fs.Write(buffer, 0, buffer.Length);
    }
    return Content("chunk uploaded", "text/plain");
}

This method will be called multiple times for each chunk and for each file being uploaded. It will pass as parameter the chunk size and the filename. I am not sure as to whether you could use a HttpPostedFileBase as action parameter because the name is not deterministic.

edited Feb 13 '14 at 14:05

Odys

8,951
10
69
111

answered Dec 15 '10 at 07:35

Darin Dimitrov

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

2

Small bug - line 7 should be name not fileName – Colin Asquith Feb 02 '11 at 16:01
In my implementation, the Url to my controller and action does not execute. How is the above able to work, whereas I point mine to my relevant "~/Document/Upload" post action and it doesn't even execute (breakpoint not hit). – Forer Oct 12 '11 at 12:49
4

SO Posting Comment Algorithm: 1. Try something for days. Get frustrated. 2. Post SO comment. Hoping. 3. Figure it out immediately after SO Comment posting. Murphy's Law Thanks Darin – Forer Oct 12 '11 at 13:12
1

`chunk == 0 ? FileMode.Create : FileMode.Append` What happens if plupload tries something to the effect of chunk 0, 1, 1, 2 (e.g. perhaps it did not get a response to chunk `1` and tries again). Assuming plupload will never do this (now or into the future) what does differentiating between `Create` and `Append` achieve? `Append` is [documented thus](http://msdn.microsoft.com/en-us/library/system.io.filemode(v=vs.110).aspx): *Opens the file if it exists and seeks to the end of the file, or creates a new file* – ta.speot.is Dec 08 '14 at 00:08

score 1 · Answer 2 · answered Dec 29 '11 at 07:28

Look here:

$("#uploader").pluploadQueue({
         // General settings
         runtimes: 'silverlight',
         url: '/Home/Upload',
         max_file_size: '10mb',
         chunk_size: '1mb',
         unique_names: true,
         multiple_queues: false,

         // Resize images on clientside if we can
         resize: { width: 320, height: 240, quality: 90 },

         // Specify what files to browse for
         filters: [
            { title: "Image files", extensions: "jpg,gif,png" },
            { title: "Zip files", extensions: "zip" }
        ],

         // Silverlight settings
         silverlight_xap_url: '../../../Scripts/upload/plupload.silverlight.xap'
      });

      // Client side form validation
      $('form').submit(function (e) {
         var uploader = $('#uploader').pluploadQueue();

         // Files in queue upload them first
         if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function () {
               if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                  $('form')[0].submit();
               }
            });

            uploader.start();
         } else {
            alert('You must queue at least one file.');
         }

         return false;
      });

And in Controller:

[HttpPost]
public string Upload(  ) {
          HttpPostedFileBase FileData = Request.Files[0];

          if ( FileData.ContentLength > 0 ) {
             var fileName = Path.GetFileName( FileData.FileName );
             var path = Path.Combine( Server.MapPath( "~/Content" ), fileName );
             FileData.SaveAs( path );
          }

          return "Files was uploaded successfully!";
       }

That's all...No chunk is needed in Controller...

It won't work unless image size is really small - because, I guess, only first chunk gets saved and if image is larger than that it won't be saved properly. — Miha Markic, Nov 16 '12 at 09:39
`No chunk is needed in Controller` !! How? plupload will send the chunk to action for each chunk. so every chunk will overwrite the previous one. Am I right? — Mahmood Dehghan, Oct 01 '13 at 14:59
Chunking is needed if the file is larger than 1mb. .NET will throw `Maximum request length exceeded.` — Piotr Kula, May 15 '14 at 19:46
This is incorrect, test a file that is large than your Plupload chunk size setting, you will see your controller method multiple times for each chunk — Brian Ogden, Jun 27 '16 at 20:04

How to use the plupload package with ASP.NET MVC?

2 Answers2

Linked