1

I have an ASP.NET MVC 3 application that needs the ability to upload multiple files to the server.

Here are the features I'd like for it to have:

  • A JQuery Grid to show uploaded files
  • JQuery upload modal dialog (which has FileUpload controls in it)
  • Asynchronous upload (the upload window will show the files in the process of uploading)
  • Dont want to use flash plugins.

Nice to haves:

  • The File upload modal should be resuable.

Questions:

  • Does Jquery has option of sending the files asynchronusly to action method and saving the same in folder and session variable?

  • Since I am using this component in many views, should I follow the PRG pattern, or asynchronously upload the file with JQuery?

1
  • I tried to distill your question down, most of the stuff you mentioned made your question way too localized to be of any use to anyone else, so I tried to generalize it. Commented Apr 18, 2012 at 12:52

2 Answers 2

2

Use Jquery file upload pluging.

I usually use plupload.

http://www.plupload.com/

My Sample To Use PlUpload:

in View:

<div id="file-upload-continer">
    <div id="btnInsertFile" style="display: inline-block; width: 100px; border: 1px solid gray;">Choose File</div>
</div>

<table class="file-upload-box">
<tr>
     <th>Title</th><th></th><th></th>
</tr>
</table>

<script type="text/javascript">
$(function () {
    var uploader = new plupload.Uploader({
        url: '@Url.Action("Upload")',
        multipart : true,
        multipart_params: { },
        runtimes: 'html5,html4',
        container: 'file-upload-continer',
        button_browse_hover : true,
        browse_button: 'btnInsertFile'
    });

    uploader.bind('Init', function (up, params) {
        $('.select-document, .file-upload-box').removeClass("hidden");
        $('.upload-support').addClass("hidden");
    });

    uploader.init();

    uploader.bind('FilesAdded', function (up, files) {
        $.each(files, function (i, file) {
            var newRow = 
                "<tr class='file-row' id='" + file.id + "'>" +
                    "<td class='title'>" + file.name + " (" + formatFileSize(file.size) + ") </td>" +
                    "<td class='cancel' id='cancel" + file.id + "'></td>" +
                    "<td class='status' id='cancel" + file.id + "'></td>" +
                "</tr>";

            $('.file-upload-box').append(newRow);

            //Bind cancel click event
            $('#cancel'+file.id).click(function(){
                $('#' + file.id).remove();
                uploader.removeFile(file);
                $(this).unbind().remove();
            });                 

        });

        uploader.start();
    });

    uploader.bind('BeforeUpload', function (up, file) {
        $(".status", ".file-row#" + file.id).addClass('throbber');
    });

    uploader.bind('FileUploaded', function (up, file) {
        $(".throbber", ".file-row#" + file.id).addClass('success').removeClass('throbber');
        $(".cancel", ".file-row#" + file.id).removeClass('cancel');
    });

    uploader.bind('Error', function (up, err) {
            $(".throbber", ".file-row#" + err.file.id).addClass('error').removeClass('throbber');
            $(".cancel", ".file-row#" + err.file.id).removeClass('cancel');
    });

});

</script>

and in My Controller:

public ActionResult Upload(string name = "", int chunk = 0)
{
    if (Request.Files.Count < 1)
        return Json(false);

    HttpPostedFileBase fileUpload = Request.Files[0];

    // Save file

    return Json(true, "text/html");
}
Sign up to request clarification or add additional context in comments.

2 Comments

This thing will use Html5 where available with fallbacks to flash, silverlight, and gears. It seems to work very well.
What about this link aspzone.com/tech/…
0

If you would like to use jQuery to upload your files, i will recommend you this library:

http://www.uploadify.com/

It can upload multiple files asynchronusly. There are enough examples on their website.

http://www.uploadify.com/demos/

1 Comment

I dont want to use flash plugins.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.