Reputation: 983

Can't figure why "jQuery File Upload " plugin isn't working

For the past hour I am trying to get jQuery plugin to work.

What i can't resolve is this js error Uncaught TypeError: $(...).fileupload is not a function, I tried a lot of things.. i even downloaded the js files from the demo site and still this error appear,

How can i solve it? this is my js file(as you can see the pluging is getting called only when dom is loaded:

$(document).ready(function () {
    $('#fileUpload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

this is my .cshtml (i am using asp.net mvc) code file:

<h2>Index</h2>

<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload.css" rel="stylesheet" />
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-ui.css" rel="stylesheet" />
<!-- CSS adjustments for browsers with JavaScript disabled -->
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-noscript.css" rel="stylesheet" />
<link href="~/Assets/plugins/jqueryFileUpload/css/jquery.fileupload-ui-noscript.css" rel="stylesheet" />


<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="~/Assets/plugins/jqueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="~/Assets/plugins/jqueryFileUpload/js/jquery.fileupload-ui.js"></script>

<script src="~/Assets/scripts/js.js"></script>

Upvotes: 1