未捕获的TypeError:无法调用undefined的方法'apply' - fineuploader v4.0.3

时间:2013-11-20 23:46:46

标签: jquery fine-uploader

从fineuploader v4.0.0升级到v4.0.3后,我收到此错误。我正在使用s3.jquery.fineuploader-4.0.3.js文件和jquery版本1.8.3。此功能在第9600行有错误 -

$.fn.fineUploaderS3 = function(optionsOrCommand) {
    if (typeof optionsOrCommand === 'object') {

        // This option is used to tell the plug-in wrapper to instantiate the appropriate S3-namespace modules.
        optionsOrCommand.endpointType = "s3";
    }

    return $.fn.fineUploader.apply(this, arguments);
};

它不喜欢我的dom选择器?不知道是什么导致了它。当我降级回4.0.0时,一切都很好。任何提示?

以下是我的js文件的所有荣耀 -

$(document).ready(function() {

    function check_for_uploads() {
        var uploads = $fineUploader.fineUploader("getUploads");
        var uploading = 0;
        $.each(uploads, function(index, val) {
            if (val.status == "uploading") {
                uploading++;
            }
        });

        console.log('check for uploads '+uploading);
        return uploading;
    }

    function get_net_uploads() {
        var totalUploads = $fineUploader.fineUploader("getNetUploads");
        console.log('get net uploads '+totalUploads);
        return totalUploads;
    }

    function uploads_done() {
        //close modal
        $("#uploadMediaModal").modal("hide");
        //refresh media index
        $('#mediaArea').load($('#mediaIndex').attr('href'));
        //clear upload modal
        $('#fineUploader').html("");
        //reset upload modal close button
        $(".upload-video-cancel-btn").prop("disabled", false);
        $(".upload-video-cancel-btn").button('reset');
        //show success banner
        $(".alert-success").remove();
        $(".alert-error").remove();
        $(".projects").prepend('<div id="flashMessage" class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button>Your videos have been uploaded successfully!</div>');

    }

    function check_file_size(id) {
        //check the file size and if over 500mb, throw a warning somewhere
        $filesize = $fineUploader.fineUploader("getSize", id);
        console.log('File size '+$filesize);
        return $filesize;
    }

    function video_submitted() {
        //file has been submitted to us
        console.log("Video submitted");
        //disable close button on the upload modal
        $(".upload-video-cancel-btn").prop("disabled", true);
        $(".upload-video-cancel-btn").button("loading");

        //open the upload modal. prevent user from closing it
        $('#uploadMediaModal').modal({
          backdrop: 'static',
          show: true
        });
    }

    function reset_upload_modal_button(showflash) {
        $(".upload-video-cancel-btn").prop("disabled", false);
        $(".upload-video-cancel-btn").button('reset');
        if (showflash) {
            //show success banner
            $(".alert-success").remove();
            $(".alert-error").remove();
            $(".projects").prepend('<div id="flashMessage" class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button>Your videos have been uploaded successfully!</div>');
        }
    }

    $fineUploader = $('.video-dropzone').fineUploaderS3({
        request: {
            endpoint: "*REMOVED*",
            accessKey: "*REMOVED"
        },
        listElement: document.getElementById('fineUploader'),
        signature: {
            endpoint: "/media/signs3url"
        },
        chunking: {
            enabled: true
        },
        resume: {
            enabled: true
        },
        failedUploadTextDisplay: {
            mode: 'custom'
        },
        retry: {
            enableAuto: true,
            showAutoRetryNote: false,
            maxAutoAttempts: 30
        },
        camera : {
            ios: true
        },
        validation: {
            allowedExtensions: ['3g2','3gp','3gp2','3gpp','3gpp2','aac','ac3', 'avi', 'eac3','ec3','f4a','f4b','f4v','flv','highwinds','m4a','m4b','m4r','m4v','mkv','mov','mp3','mp4','oga','ogg','ogv','ogx','ts','webm','wma','wmv'],
            sizelimit: 2147483648 //2gb
        },
        showMessage: function(message) {
            //show message in the upload modal if its open
            if ($('#fineUploader').hasClass("in")) {
                $('#fineUploader').prepend('<div id="flashMessage" class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>'+message+'</div>');
                //console.log('There was an error :'+message);
            } else {
                $('.projects').prepend('<div id="flashMessage" class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>'+message+'</div>');
            }
        },
        uploadSuccess: {
            endpoint: '/media/add/'+projectId+'' //projectId defined on media index
        },
        debug: true
    }).on('error', function (event, id, name, errorReason, xhrOrXdr) {
        //bomb the whole process
        //$fileItem = $(this).fineUploader("getItemByFileId", id);
        //$fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-error");
        //alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
        //$("#fineUploader").prepend('<div id="flashMessage" class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>Error on file <b>'+name+'</b>. Error: '+errorReason+'</div>');
        console.log('There was an error :'+errorReason);
    }).on('complete', function (event, id, name, response) {
        console.log('Complete callback called on id: '+id+'. Response was: '+JSON.stringify(response));
        //remove active class from progress bar. remove cancel button from filename
        $fileItem = $(this).fineUploader("getItemByFileId", id);
        $fileName = $fineUploader.fineUploader("getName", id);
        if (response.success) {
            $fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-success");
            $fileItem.find(".qq-upload-cancel").remove();
            $fileItem.find(".qq-upload-status-text").addClass("green-text");
            $fileItem.find(".qq-upload-status-text").html("- Completed");
        }

        if (response.error) {
            $fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-danger");
            $fileItem.find(".bar").removeClass("bar-success").addClass("bar-danger");
            $fileItem.find(".qq-upload-cancel").remove();
            $fileItem.find(".qq-upload-status-text").addClass("red-text");
            $fileItem.find(".qq-upload-status-text").html("- Upload failed!");
            $("#fineUploader").prepend('<div id="flashMessage" class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><p>Upload failed on <b>'+$fileName+'</b>! Please try uploading it again.</p></div>');
        }

        //check to see if there are any uploads happening still. if not, reload the page use getInProgress() API call
        $uploadingFiles = $(this).fineUploader("getInProgress");

        //close the modal if no uploads are in progress. refresh media index. pop up success banner.
        if ($uploadingFiles < 1) {
            uploads_done();
        }

    }).on('statusChange', function(event, id, oldStatus, newStatus) {
        console.log("ID: "+id+", old status "+oldStatus+", new status "+newStatus);

        var fileName = $fineUploader.fineUploader("getName", id);

        if (newStatus == "submitted") {
            video_submitted();
        }

        //if file size is larger than 500mb then throw an error inside the upload modal that tells them
        if (check_file_size(id) > 524288000 && newStatus == 'submitted') {
            console.log('File size is too big');
            $("#fineUploader").prepend('<div id="flashMessage" class="alert alert-info"><button type="button" class="close" data-dismiss="alert">&times;</button><p>Just a quick heads up! Your file <b>'+fileName+'</b> is super big (over 500mb). It may take a long time to upload.</p></div>');
        }

        if (newStatus == 'upload successful' && check_for_uploads() == 0 && get_net_uploads() > 0) {
            reset_upload_modal_button(showflash = true);
            //uploads_done();
        }

        if (newStatus == "canceled" && check_for_uploads() == 0 && get_net_uploads() == 0) {
            //reset close button
            reset_upload_modal_button(showflash = false);
            //clear any alerts
            $("#fineUploader").find('.alert-info').remove();
            $("#fineUploader").find('.alert-error').remove();
            $("#fineUploader").prepend("<p class='no-videos'>No videos to upload. :(</p>");
        } else if (newStatus == "canceled" && check_for_uploads() == 0 && get_net_uploads() > 0) {
            //uploads_done();
            reset_upload_modal_button(showflash = true);
           //clear any info alerts
            $("#fineUploader").find('.alert-info').remove();
        }
    }).on('autoRetry', function(event, id, name, attemptNumber) {
        console.log('auto retry fired. id: '+id+', name: '+name+', attempt number: '+attemptNumber);
    });

});

这是我的HTML -

<div class="media-thumbnail-view span3 stitched video-dropzone"></div>

<!-- upload video modal -->
<div id="uploadMediaModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel">Uploading your videos!</h3>
  </div>
  <div class="modal-body upload-video-dropzone" id="fineUploader">

  </div>
  <div class="modal-footer">
    <button class="btn upload-video-cancel-btn" data-dismiss="modal" aria-hidden="true" data-loading-text="Uploading videos...">Close</button>
  </div>
</div>

<!-- fineuploader template -->
<script type="text/template" id="qq-template">
    <div class="qq-uploader-selector qq-uploader">
        <div class="qq-upload-drop-area-selector qq-upload-drop-area text-center">
            <p style="margin-bottom:0px;"><small>Drop videos here</small></p>
            <p><small>or</small></p>
            <div class="qq-upload-button-selector btn btn-primary text-center">
                <div>click here to upload</div>
            </div>
        </div>
        <ul class="qq-upload-list-selector qq-upload-list" style="margin: 10px 0 0 0; list-style-type: none;">
            <li style="list-style-type: none; margin-bottom:10px;" class="upload-file-list">
                <div class="qq-progress-bar-container-selector progress progress-info progress-striped active">
                    <div class="qq-progress-bar-selector bar bar-success"></div>
                </div>
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <span class="qq-upload-size-selector qq-upload-size"></span>
                <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
    </div>
</script>

1 个答案:

答案 0 :(得分:1)

好抓。您似乎在我们的构建过程中发现了一个错误。发生的事情是jQuery模块没有被连接到S3 jQuery模块之前的最终构建(这取决于jQuery模块)。这已在'develop'中修复,而has been merged现已修复为'master'分支。

我建议您手动或通过customizer进行重建。

请注意,这不会影响自定义构建,只会影响通过grunt package任务构建的构建。构建生成器此时可能已关闭,我们可以使用grunt自己生成拉链。