jquery file upload throws an error

Question

I have an ASP.NET MVC app. This app requires jQuery 2.1 due to other jquery plugins in the app. I am trying to provide a way for my user's to upload pictures. In an attempt to do that, I was looking at the jQuery file uploader. My JavaScript looks like this:

$('#userPicture').fileupload({
  dataType: 'json',
  done: function (e, data) {
  }
});

The userPicture markup looks like this:

<input id="userPicture" type="file" name="userPicture" data-url="/pictures/User/@ViewBag.UserId">

The page initially loads without any errors. When I choose a picture though, I get an error that says:

Uncaught Error: no such method 'process' for fileupload widget instance       jquery-2.1.1.js:250

No image preview is shown. How can I choose a picture and show a client-side preview via a JQuery plugin that works in IE 8+

Answer 1

I had the same issue with Chrome, in my case the problem seem to be is missing jquery plugin "jquery.fileupload-process.js" as @jevgenig mentioned in his comments. hope this could help someone

Answer 2

From the specs I checked, jQuery 2.x supports IE9+.

Source: http://jquery.com/browser-support/

So jQuery 2.1 doesn't support IE8.

If you're using the jQuery plugin you mentioned, there's very few support for IE9-:

• You can only upload one file at a time.
• You can only upload using the normal "File Input".
• There's no image preview.
• There's no upload progress bar.
• etc.

If you're supporting modern browsers (Firefox, Chrome, IE10+):

• You can drag-and-drop files.
• You can upload multiple files.
• You can preview images.
• You can see the upload progress.
• etc.

Here's the full list:

https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

You're problem is most probably related to the jQuery 2.1 support for IE8.

Possible solutions:

1- use an older jQuery version. You can use any jQuery 1.6+ with the jQuery File Upload plugin (Source: https://github.com/blueimp/jQuery-File-Upload). jQuery 1.x has support for IE6+, so it supports IE8.

2- (RECOMMENDED) get rid of IE8. Upgrade your jQuery version to the latest stable version. Use the latest version of the jQuery File Upload plugin. Provide a simple HTML upload for the IE8 users.