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

Question

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?

do you have any solution ? I have same problem

Mehmet S.
– Mehmet S.

2017-09-28 22:41:04 +00:00
Commented Sep 28, 2017 at 22:41 — Mehmet S.
– Mehmet S., Commented Sep 28, 2017 at 22:41

rom · Accepted Answer · 2016-02-13 16:45:47Z

7

I had the same problem, I just moved the js files before closing the body tag and it worked:

<script type="text/javascript" src="jquery-2.1.1.min.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>

...

<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');
            });
        },
       ...
});
</script>

</form>
<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>

answered Feb 13, 2016 at 16:45

rom

3,6828 gold badges46 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehmet S. Over a year ago

I made same thing but still not stable :(

calicanadian · Accepted Answer · 2019-08-14 21:28:11Z

4

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!

answered Aug 14, 2019 at 21:28

calicanadian

564 bronze badges

1 Comment

fmelan Over a year ago

For anyone who has still issues with this - check if you download correctly the .js files. I did download the html page with the file by mistake. Then it is good idea to clear the browser cache and reload your page.

Xcode · Accepted Answer · 2022-08-11 20:39:27Z

For anyone who had to go through this issue again, so you don't have to use up to around 3 days like i did on this problem:

-You should make sure you don't have multiple jquery plugins on your project, even if it doesn't load and you shouldn't use a block tag to load the js files on your page.

-You should move all the files to your base html if you are extending the page and you should follow the order of the documents

<script src="{% static 'js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js' %}"></script>
    <script src="{% static 'js/jQuery-File-Upload/js/jquery.iframe-transport.js' %}"></script>
    <script src="{% static 'js/jQuery-File-Upload/js/jquery.fileupload.js' %}"></script>
    <script src="{% static 'js/customUploader.js' %}"></script>

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related