#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,246
    Rep Power
    220

    Error: cannot call methods on fileupload prior to initialization; attempted to call..


    Hi;

    I am using fileupload.js and when I wanna upload the file I get this in the console:

    Error: cannot call methods on fileupload prior to initialization; attempted to call method 'disable'
    Here is my code (looks like the error is at $("#logo_upload").fileupload('disable'); ) :

    Code:
    $('#cover_photo_upload').fileupload(
                {
                    dropZone: $("#page_drop"),
                    url: '/upload/image',
                    paramName: 'file',
                    dataType: 'json',
                    formData: {
                        type: 'sharetape'
                },
            start: function () {
                $('#cover_photo_progress').show();
                $('#cover_photo_progress').children('.progress-bar').css('width', 0);
                $('#cover_photo_message').hide();
                $("#logo_upload").fileupload('disable');
                $("#logo_upload").attr('disabled','true');
                $("#bg_image").fileupload('disable');
                $("#bg_image").attr('disabled','true');
            },
            done: function (e, data) { 
                if (data && data.result) {
                    if (data.result.msg.url) {
                        $('#cover_photo_message').show().removeClass('alert-danger').addClass('alert-success').text('Uploaded successfully.');
    //                $('#company_logo_crop').attr('src', data.result.msg.url);
                        type = 'page';
                        url = data.result.msg.url;
                        filename = data.result.msg.file_name;
    
                        maxWidth = 588.0;
                        maxHeight = 500.0;
                        width = parseFloat(data.result.msg.image_width);
                        height = parseFloat(data.result.msg.image_height);
    
                        image_cropper.open(width, height, url, filename, maxWidth, maxHeight, "Crop Cover Photo");
                    } else if (data.result.status === "error") {
                        $('#cover_photo_message').show().removeClass('alert-success').addClass('alert-danger').text(data.result.msg);
                    }
                }
                $('#page_loading').hide();
                $('#cover_photo_progress').fadeOut().children('.progress-bar').css('width', 0);
                $("#cover_photo_upload").fileupload('enable');
                $("#cover_photo_upload").removeAttr('disabled');
                $("#bg_image").fileupload('enable');
                $("#bg_image").removeAttr('disabled');
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#cover_photo_progress').show().children('.progress-bar').css('width', progress + '%');
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    I use this to load the libraries:
    Code:
    $this->carabiner->js(array( array('3rd_party/colpick.js'),
                                        array('3rd_party/bootstrap_datepicker.js'),
                                        array('3rd_party/bootstrap-timepicker.js'),
                                        array('3rd_party/crop.js'),
                                        array('3rd_party/jquery.ui.core.js'),
                                        array('3rd_party/jquery.ui.widgets.js'),
                                        array('3rd_party/jquery.ui.mouse.js'),
                                        array('3rd_party/iframetransport.js'),
                                        array('3rd_party/bootstrap-select.min.js'),
                                        array('3rd_party/jquery.ui.sortable.js'),
                                        array('3rd_party/fontawesome-iconpicker.min.js'),
                                        array('jquery-ui.js'),
                                        array('../colorpicker/jquery.colorpicker.js'),
                                        array('../colorpicker/i18n/jquery.ui.colorpicker-nl.js'),
                                        array('../colorpicker/parts/jquery.ui.colorpicker-rgbslider.js'),
                                        array('../colorpicker/parts/jquery.ui.colorpicker-memory.js'),
                                        array('3rd_party/fileupload.js'),
                                        array('design_sharetape.js')
                                        ));
    I thought maybe the library is not being loaded. So I added alert('Its loaded') to fileupload.js and I see it does the alert.

    This is the detail of the error.

    How come I get that error?

    Thanks
    Last edited by English Breakfast Tea; July 27th, 2017 at 08:35 AM.
  2. #2
  3. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,110
    Rep Power
    4103
    The error means you cannot do something like
    Code:
    $("#logo_upload").fileupload('disable');
    until after you've first initialized the element as a file upload control by doing something like
    Code:
    $("#logo_upload").fileupload();
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud

IMN logo majestic logo threadwatch logo seochat tools logo