'Can't load existing files using the jquery-filupload examples

I am using the code provided by the blueimp jquery-file-upload site from the basic-plus demo example. I have modified it enough to fit my requirements and works great to upload images. The problem I am having is implementing the pre-load of existing images using the following snippet found in main.js:

$.ajax({
           // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });

When the above code gets called, the result actually contains the json required but I am getting the following null error:

Uncaught TypeError: Cannot read property 'call' of null

Has anyone encountered this before? Any hints as to why this is happening?

Thank you in advance.

jqueryfile-uploadblueimp


Solution 1:[1]

This happens when you remove the file jquery.fileupload-ui.js

Solution 2:[2]

I just got this issue. It came because I didn't respect the right order in javascript declaration. Here is the right order I did (using jinja template):

{% block javascript %}
  {% upload_tmpl_js %}
  <script src="{% static "/js/vendor/jquery/jquery.min.js" %}"></script>
  <script src="{% static "/js/vendor/jquery.ui.widget.js" %}"></script>
  <script src="{% static "/js/tmpl/tmpl.min.js" %}"></script>
  <script src="/static/js/load-image.min.js"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  <script src="{% static "/js/jquery.iframe-transport.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload-process.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload-image.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload-audio.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload-video.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload-validate.js" %}"></script>
  <script src="{% static "/js/jquery.fileupload-ui.js" %}"></script>
  <script src="{% static "/js/locale.js" %}"></script>
  <script src="{% static "/js/main.js" %}"></script>
{% endblock %}

{% upload_tmpl_js %} is a simple template tag that returns js templates used by blueimp code.

Solution 3:[3]

I know this is an old post, so this is probably not the same situation, but just so you guys know... I get a very similar problem when using the latest PHP version. This app doesn't support PHP 8.XX . I get an ajax error when I use it under PHP 8, but if I down my PHP version to 7, then everything works good.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Luvias
Solution 2
Solution 3 Bidzey

Related Questions