blueimp jquery file upload error .fileupload is not a function

Question

I'm using blueimp jquery file upload plugin. But I see an error sometimes (not for every refresh) How can I fix this ?

Uncaught TypeError: $(...).fileupload is not a function at HTMLFormElement. (72:348) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest. (jquery.min.js:4) (anonymous) @ 72:348 i @ jquery.min.js:2 fireWith @ jquery.min.js:2 A @ jquery.min.js:4 (anonymous) @ jquery.min.js:4

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="bower_components/blueimp-tmpl/js/tmpl.min.js"></script>
<script src="bower_components/blueimp-load-image/js/load-image.all.min.js"></script>
<script src="bower_components/blueimp-canvas-to-blob/js/canvas-to-blob.min.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-ui.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-process.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload-image.js"></script>

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<div class="template-upload fade  col-md-2 text-center">
    <div style="max-width:100%; max-height:75px; margin-top:10px">
        <span class="preview"></span>
    </div>

    <div>
        <strong class="error text-danger"></strong>
    </div>

    <div>
        <p class="size">Yükleniyor...</p>
        <div class="progress progress-striped active" role="progressbar"
        aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
        <div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
    </div>

    <div>
        {% if (!i && !o.options.autoUpload) { %}
            <button class="btn btn-primary start" disabled>
                <i class="glyphicon glyphicon-upload"></i>
                <span>Yükle</span>
            </button>
        {% } %}
        {% if (!i) { %}
            <button class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>İptal</span>
            </button>
        {% } %}
    </div>
</div>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<div class="template-download fade col-md-2 text-center" >
    <div style="max-width:100px; max-height:100px; margin:0 auto;  margin-top:10px">
        <span class="preview">
            {% if (file.thumbnailUrl) { %}
                <a href="{%=file.url%}" title="{%=file.name%}"
                download="{%=file.name%}" data-gallery>
                <img src="{%=file.thumbnailUrl%}" style="max-width:100%; max-height:75px;"></a>
            {% } %}
        </span>
    </div>
    <div>
        {% if (file.error) { %}
            <div><span class="label label-danger">Error</span> {%=file.error%}</div>
        {% } %}
    </div>
    <div>
        <span class="size">{%=o.formatFileSize(file.size)%}</span>
    </div>
    <div class="mt10 text-center">
        {% if (file.deleteUrl) { %}
            <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="glyphicon glyphicon-trash"></i>

            </button>
        {% } else { %}
            <button class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>

            </button>
        {% } %}
    </div>
</div>
{% } %}
</script>

<script type="text/javascript">
    $(function () {
        $('#fileupload').fileupload({
            url: 'my.php'
        });
        $('#fileupload').fileupload(
            'option',
            'redirect',
            window.location.href.replace(
                /\/[^\/]*$/,
                '/cors/result.html?%s'
            )
        );
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            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});
        });
    });
</script>

Mehmet Soylu Mehmet Soylu · Accepted Answer · 2017-09-29T02:45:59

I fixed with extra jQuery code users problem. But error is still same. Here is who want to use this solution.

$('#fileupload').bind('fileuploaddone', function (e, data) {
    loadImages(data);
});

function loadImages(data) {
    $.getJSON('my.php', function (data) {
       var result = tmpl('show-template', data);
          $('#houseImagesDiv').html(result).fadeIn();
       });
}

loadImages();

$(document).on('click','.delete',function(event){
    event.preventDefault();
    $.getJSON($(this).data('url')).done(function () {
        loadImages();
    });
});

and I added over the form

<div id="houseImagesDiv"></div>

I made empty download js template.

<script id="template-download" type="text/x-tmpl">
  // need empty row here 
</script>

I create new template for new div.

<script id="show-template" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-download col-md-2 text-center" >
        <div>
            <span class="preview">
                <img src="{%=file.thumbnailUrl%}">
            </span>
        </div>
        <div class="mt10 text-center">
            <button class="btn btn-danger delete"
                    data-type="{%=file.deleteType%}"
                    data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %}
                    data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="glyphicon glyphicon-trash"></i>
            </button>
        </div>
    </div>
{% } %}
</script>

blueimp jquery file upload error .fileupload is not a function

1 Answers