jqueryjquery-file-upload

jQuery-File-Upload - TypeError: $(...).fileupload is not a function

I have my html/js code in my simple page JSP:

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.iframe-transport.js"></script>
<script type="text/javascript" src="jquery.fileupload.js"></script>
<body>

<form id="MyID" method="post" action="JSFPAGE" enctype="multipart/form-data">

<span class="btn btn-success fileinput-button">
   <i class="glyphicon glyphicon-plus"></i>
      <span>Select files...</span>
      <input id="fileupload" type="file" name="files[]" multiple>
</span><br><br>
<!-- The global progress bar -->
<div id="progress" class="progress">
    <div class="progress-bar progress-bar-success">
    </div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files">
</div>

<script type="text/javascript">
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'xUpload.xsp';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
</form>
</body>

this is very simple...and all the JS resource are OK. But in the console I see this error:

TypeError: $(...).fileupload is not a function $('#fileupload').fileupload({

Have you any suggest for my problem?

Solution

  • I fixed this for myself by going to the demo site BlueImp has online. The GitHub repo for this project can be found at https://github.com/blueimp/jQuery-File-Upload. If you look at their source code, it becomes apparent that you need two files to help this work on your project. 1. jquery.ui.widget.js and 2. jquery.fileupload.js.

    If you include these files in your app, the code for the fileupload will work. You'll need the UI widget document as a dependency for the fileupload file.

    In case you are looking for a working example of this, Heroku has a decent write up that will help guide you regardless of if you are using Heroku or not. Direct to S3 Image Uploads in Rails

    Happy coding!