This is a migrated thread and some comments may be shown as answers.

Using Upload with JQuery and MVC

6 Answers 1106 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Perry
Top achievements
Rank 1
Perry asked on 22 Aug 2012, 07:30 PM
I am trying to link a JQuery AJAX command to a MVC controller and having problems getting the files to the controller from the AJAX command.  What am I doing wrong?

HTML
<form id="createTireGroupFromExcelForm" class="form-horizontal">
            ...boilerplate...
                        <input name="files[]" id="files" type="file" data-role="upload" multiple="multiple" autocomplete="off">
           ...boilerplate... 
</form>

Javascript
$("#submitTireGroupExcel_btn").click(function () {
            $.validator.unobtrusive.parse($('#createTireGroupFromExcelForm'));
            if ($('#createTireGroupFromExcelForm').valid()) {
                var form = $('#createTireGroupFromExcelForm');
                $.ajax({
                    type: 'post',
                    enctype:"multipart/form-data",
                    url: "@Url.Action("CreateTireGroupFromExcel", "Events")",
                    data: form.serialize(),
                    success: function (result) {
                        if (!result.success) {
                            alert(result.error);
                        } else {
                            $('#createTireGroup').modal('hide');
                            $.pjax({
                                url: "@Url.Action("TireBuilder", "Events")" + "?tireSetGroupID=" + result.tireSetGroupID,
                                container: '#update_panel'
                            });
                        }
                    }
                });
            }
        });

MVC Controller
public ActionResult CreateTireGroupFromExcel(Guid eventID, Guid teamID, string name, IEnumerable<HttpPostedFileBase> files)
{
     throw new NotImplementedException();
}

6 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 23 Aug 2012, 08:10 AM
Hi,

Sending files with a plain AJAX request won't work. You need to use the async mode of the Upload itself.

The MVVM configuration would look like this:
<input name="files[]" id="files" type="file" data-role="upload" data-multiple="true" data-async='{"saveUrl":"/saveHandler", "autoUpload":true}'> 

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Perry
Top achievements
Rank 1
answered on 27 Aug 2012, 01:02 PM
What is the best way to include other data in the upload other than the file then?  i.e. If I wanted to include the following parameters to my controller method Guid eventID, Guid teamID, string name?
0
T. Tsonev
Telerik team
answered on 29 Aug 2012, 06:42 AM
Hello,

Metadata can be included by handling the upload event. Please see the Metadata help topic for detailed instructions.

Kind regards,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chirdeep
Top achievements
Rank 2
answered on 13 Jan 2013, 02:37 AM
Hi Tsvetomir,

According to your suggestion as below: 

<input name="files[]" id="files" type="file" data-role="upload" data-multiple="true" data-async='{"saveUrl":"/saveHandler", "autoUpload":true}'> 

Now, how do I define the success event or any other events here...I want to have methods on my viewmodel that "success" event should automatically bind to.

I tried doing this 

<input name="data" id="data" type="file" data-role="upload" data-multiple="true" data-async='{"saveUrl":"/upload", "autoUpload":true}' data-success='{"success":displayGreeting}' />

$(document).ready(function() {
    var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {        
        alert("Hello, " + "!!!");     }
    });
    kendo.bind($("#data"), viewModel);
});

I am getting Uncaught ReferenceError: displayGreeting is not defined

It would be nice to add MVVM sample with with each UI control. As I wouldnt know where to look for properties like data-role, data-multiple

Thanks
Chirdeep

0
T. Tsonev
Telerik team
answered on 17 Jan 2013, 12:23 PM
Hi,

The event can be bound using the following syntax:
data-bind='events: { success: displayGreeting }'

See http://jsbin.com/ujabov/1/edit

Generic examples are available here:
http://demos.kendoui.com/web/mvvm/event.html
http://demos.kendoui.com/web/mvvm/widgets.html

I hope this helps.

Greetings,
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chirdeep
Top achievements
Rank 2
answered on 17 Jan 2013, 08:39 PM
Thanks that worked.
Tags
Upload
Asked by
Perry
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Perry
Top achievements
Rank 1
Chirdeep
Top achievements
Rank 2
Share this question
or