jQuery File Upload Cannot call method '_adjustMaxNumberOfFiles' of undefined

Question

I'm implementing the jQuery File Upload plugin in a Rails 3.2 app and I'm getting this error message:

Uncaught TypeError: Cannot call method '_adjustMaxNumberOfFiles' of undefined

Here is the code that calls _adjustMaxNumberOfFiles:

$(function () {
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload(
      {
        url: '/photos', // post to and retrieve from
        dataType: 'json'
      }
    );

    // Load existing files:
    $.getJSON($('#fileupload').prop('action'), function (files) {
      var fu = $('#fileupload').data('fileupload'), 
          files = jQuery.grep(files, function (a) { return a.gallery_id == <%= params[:id] %>; }), //filter the photos down to this gallery
          template;


      fu._adjustMaxNumberOfFiles(-files.length);
      template = fu._renderDownload(files).appendTo($('#fileupload .files'));

      // Force reflow:
      fu._reflow = fu._transition && template.length && template[0].offsetWidth;
      template.addClass('in');
      $('#loading').remove();
    });

  });

This was completely working. I had moved on to work on the rest of the application and as I deployed to a staging environment I noticed I was getting the error above. I went back to dev to see if it was happening there and sure enough it was. I'm using the jquery-fileupload-rails gem to load the necessary files into the asset pipeline. I've tried not using the gem and loading all of the assets manually and that doesn't help.

I try to step through this in the console, setting fu and fu._adjustMaxNumberOfFiles, and still get the error message Cannot call method '_adjustMaxNumberOfFiles' of undefined. If I comment out the line with _adjustMaxNumberOfFiles I get the same error on the next line, instead telling me _renderDownload is undefined. It's as if I can't access any of the methods set in the jquery-file-upload plugin, even thought the scripts are all loaded. Here are the scripts being loaded, in order. I've excluded the js files that don't apply here.

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/vendor/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/vendor/load-image.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/vendor/canvas-to-blob.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/vendor/tmpl.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/jquery.iframe-transport.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/jquery.fileupload.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/jquery.fileupload-fp.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/jquery.fileupload-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/locale.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-fileupload/index.js?body=1" type="text/javascript"></script>

I'm having a real hard time figuring this out. Any help would be appreciated. I can post more code snippets if necessary, but what I posted is the only JavaScript that isn't part of the jQuery File Upload plugin.

Answer 1

In uploads_controller create action:

format.json { render json: {files: [@upload.to_jq_upload]}, status: :created, location: @upload }

In your js:

var fu = $('#fileupload').data('blueimpFileupload');