Ajax upload plugin throwing jQuery.handleError not found

Question

Am using the ajax file upload plugin from PHP Letter and am using jQuery 1.6.2.The files upload properly, but am unable to user the JSON data returned from the php script, w

Answer 1

I also use this plugin and there is some incompability with new versions of jQuery. I use jquery-1.9.1.js on my project.

The plugin is used with jquery-1.2.1.js .

I have found a solution on a Chinese website : http://chen-h.iteye.com/blog/1769457 I have tested this version and it works. Callbacks are now okay.

I don't speak Chinese but I imagine the developer has converted this plugin for new version of Jquery.

jQuery.extend({
handleError: function( s, xhr, status, e )      {
    // If a local callback was specified, fire it
            if ( s.error ) {
                s.error.call( s.context || s, xhr, status, e );
            }

            // Fire the global callback
            if ( s.global ) {
                (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
            }
},
createUploadIframe: function(id, uri)
{

    var frameId = 'jUploadFrame' + id;

    if(window.ActiveXObject) {
        if(jQuery.browser.version=="9.0")
        {
            io = document.createElement('iframe');
            io.id = frameId;
            io.name = frameId;
        }
        else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0")
        {

            var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
            if(typeof uri== 'boolean'){
                io.src = 'javascript:false';
            }
            else if(typeof uri== 'string'){
                io.src = uri;
            }
        }
    }
    else {
        var io = document.createElement('iframe');
        io.id = frameId;
        io.name = frameId;
    }
    io.style.position = 'absolute';
    io.style.top = '-1000px';
    io.style.left = '-1000px';

    document.body.appendChild(io);

    return io;      
},
ajaxUpload:function(s,xml){
    //if((fromFiles.nodeType&&!((fileList=fromFiles.files)&&fileList[0].name)))

    var uid = new Date().getTime(),idIO='jUploadFrame'+uid,_this=this;
    var jIO=$('<iframe name="'+idIO+'" id="'+idIO+'" style="display:none">').appendTo('body');
    var jForm=$('<form action="'+s.url+'" target="'+idIO+'" method="post" enctype="multipart/form-data"></form>').appendTo('body');
    var oldElement = $('#'+s.fileElementId);
    var newElement = $(oldElement).clone();
    $(oldElement).attr('id', 'jUploadFile'+uid);
    $(oldElement).before(newElement);
    $(oldElement).appendTo(jForm);

    this.remove=function()
    {
        if(_this!==null)
        {
            jNewFile.before(jOldFile).remove();
            jIO.remove();jForm.remove();
            _this=null;
        }
    }
    this.onLoad=function(){

        var data=$(jIO[0].contentWindow.document.body).text();


        try{

            if(data!=undefined){
               data = eval('(' + data + ')');
                try {

                    if (s.success)
                        s.success(data, status);

                    // Fire the global callback
                    if(s.global)
                        jQuery.event.trigger("ajaxSuccess", [xml, s]);
                    if (s.complete)
                        s.complete(data, status);
                    xml = null;
                  } catch(e) 
                     {

                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                  }

                  // The request was completed
                  if(s.global)
                      jQuery.event.trigger( "ajaxComplete", [xml, s] );
                  // Handle the global AJAX counter
                  if (s.global && ! --jQuery.active )
                      jQuery.event.trigger("ajaxStop");

                  // Process result

            }
     }catch(ex){
         alert(ex.message);
     };
    }
    this.start=function(){jForm.submit();jIO.load(_this.onLoad);};
    return this;

},
createUploadForm: function(id, url,fileElementId, data)
{
    //create form   
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = jQuery('<form  action="'+url+'" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 
    if(data)
    {
        for(var i in data)
        {
            jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
        }           
    }   

    var oldElement = jQuery('#' + fileElementId);
    var newElement = jQuery(oldElement).clone();
    jQuery(oldElement).attr('id', fileId);
    jQuery(oldElement).before(newElement);
    jQuery(oldElement).appendTo(form);

    //set attributes
    jQuery(form).css('position', 'absolute');
    jQuery(form).css('top', '-1200px');
    jQuery(form).css('left', '-1200px');
    jQuery(form).appendTo('body');      
    return form;
},
ajaxFileUpload: function(s) {
    // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout    
    // Create the request object
    var xml = {};
    s = jQuery.extend({}, jQuery.ajaxSettings, s);
    if(window.ActiveXObject){
        var upload =  new jQuery.ajaxUpload(s,xml);
        upload.start();

   }else{
    var id = new Date().getTime();
    var form = jQuery.createUploadForm(id,s.url, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
    var io = jQuery.createUploadIframe(id, s.secureuri);
    var frameId = 'jUploadFrame' + id;
    var formId = 'jUploadForm' + id;        
    // Watch for a new set of requests
    if ( s.global && ! jQuery.active++ )
    {
        jQuery.event.trigger( "ajaxStart" );
    }            
    var requestDone = false;

    if ( s.global )
        jQuery.event.trigger("ajaxSend", [xml, s]);
    // Wait for a response to come back
    var uploadCallback = function(isTimeout)
    {           
        var io = document.getElementById(frameId);

        try 
        {               
            if(io.contentWindow)
            {
                 xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                 xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

            }else if(io.contentDocument)
            {
                 xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                 xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
            }                       
        }catch(e)
        {
            jQuery.handleError(s, xml, null, e);
        }
        if ( xml || isTimeout == "timeout") 
        {               
            requestDone = true;
            var status;
            try {
                status = isTimeout != "timeout" ? "success" : "error";
                // Make sure that the request was successful or notmodified
                if ( status != "error" )
                {
                    // process the data (runs the xml through httpData regardless of callback)
                    var data = jQuery.uploadHttpData(xml, s.dataType);    
                    // If a local callback was specified, fire it and pass it the data

                    if (s.success)
                        s.success(data, status);

                    // Fire the global callback
                    if(s.global)
                        jQuery.event.trigger("ajaxSuccess", [xml, s]);
                    if (s.complete)
                        s.complete(data, status);

                } else
                    jQuery.handleError(s, xml, status);
            } catch(e) 
            {
                status = "error";
                jQuery.handleError(s, xml, status, e);
            }

            // The request was completed
            if(s.global)
                jQuery.event.trigger( "ajaxComplete", [xml, s] );
            // Handle the global AJAX counter
            if (s.global && ! --jQuery.active )
                jQuery.event.trigger("ajaxStop");

            // Process result
            jQuery(io).unbind();

            setTimeout(function()
                                {   try 
                                    {
                                        jQuery(io).remove();
                                        jQuery(form).remove();  

                                    } catch(e) 
                                    {
                                        jQuery.handleError(s, xml, null, e);
                                    }                                   

                                }, 100);

            xml = null;

        }
    };
    // Timeout checker
    if (s.timeout>0) 
    {
        setTimeout(function(){
            // Check to see if the request is still happening
            if( !requestDone ) uploadCallback("timeout");
        }, s.timeout);
    }

        try 
            {

                var form = jQuery('#' + formId);
                jQuery(form).attr('action', s.url);
                jQuery(form).attr('method', 'POST');
                jQuery(form).attr('target', frameId);

                if(form.encoding)
                {
                    jQuery(form).attr('encoding', 'multipart/form-data');               
                }
                else
                {   
                    jQuery(form).attr('enctype', 'multipart/form-data');            
                }   


                jQuery(form).submit();

            } catch(e) 
            {   
                jQuery.handleError(s, xml, null, e);
            }

            jQuery('#'+ frameId).load(uploadCallback);
            return {abort: function () {}}; 

   }
},

uploadHttpData: function( r, type ) {

    var data = !type;
    data = type == "xml" || data ? r.responseXML : r.responseText;
    // If the type is "script", eval it in global context
    if ( type == "script" )
        jQuery.globalEval( data );
    // Get the JavaScript object, if JSON is used.
    if ( type == "json" ){

        eval( "data = " + $(data).html() );
    }
    // evaluate scripts within html
    if ( type == "html" )
        jQuery("<div>").html(data).evalScripts();

    return data;
}
});

Answer 2

The example uses jQuery 1.2.1;

http://www.phpletter.com/javascript/jquery.js

the jQuery.handleError() was removed a while back, I'm not sure when.

You need to use an older jQuery version, update the script yourself or try to find an up to date script. Try http://valums.com/ajax-upload/ or have a search for a few but just remember to check their last update date!

Answer 3

This article applies the AJAX Upload well and explains although its for codeigniter. It did work for me except that I had to replace

dataType : 'json'

by

dataType : 'html'

seems has some issue with json

also relative url didn't work for me so i put an absolute url.

 url         :'http://localhost/satyam/LifeBook/places/upload_file',

and not to foreget obviosly you need to write the handlError function in the ajaxupload.js file to the end. http://www.kovloq.com/2011/10/23/ajax-upload-using-codeigniter/

Answer 4

It was when you are trying to use this with latest version of jQuery. handleError function is depreciated from library upper then V 1.5. I resolve it by just adding this function in my ajaxfileupload.js file.

handleError: function( s, xhr, status, e ) {
    // If a local callback was specified, fire it
    if ( s.error ) {
        s.error.call( s.context || window, xhr, status, e );
    }

    // Fire the global callback
    if ( s.global ) {
        (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
    }
}

and it works fine for me. Also, if you try to use any ajaxSubmit() on same page it will wont work, so i use normal form submit with ajxfileupload. if any one can help in same way please let me know.

Answer 5

http://forum.phpletter.com/viewtopic.php?f=8&t=3044

Modern jQuery's do not have the jQuery.handleError(s, xml, status, e) method.

Therefore, in case of an error, the file uploader hangs all javascripts.

This uploader script is small, elegant and nice. However, it's rather old and jQuery has completely redesigned ajax handing since then. Next time, I'll try to use a modern complex script with a progress bar and drag-and-drop support: http://valums.com/ajax-upload/

Otherwise, for legacy code or simplicity reasons, you'll find this fix of ajaxfileupload.js (Version 2.1) useful: Note that global "ajaxError" event is not supported.

    jQuery.extend({


        createUploadIframe: function(id, uri)
       {
             //create frame
                var frameId = 'jUploadFrame' + id;
                var iframeHtml = '';
             jQuery(iframeHtml).appendTo(document.body);

                return jQuery('#' + frameId).get(0);         
        },
        createUploadForm: function(id, fileElementId, data)
       {
          //create form   
          var formId = 'jUploadForm' + id;
          var fileId = 'jUploadFile' + id;
          var form = jQuery('');   
          if(data)
          {
             for(var i in data)
             {
                jQuery('').appendTo(form);
             }         
          }      
          var oldElement = jQuery('#' + fileElementId);
          var newElement = jQuery(oldElement).clone();
          jQuery(oldElement).attr('id', fileId);
          jQuery(oldElement).before(newElement);
          jQuery(oldElement).appendTo(form);



          //set attributes
          jQuery(form).css('position', 'absolute');
          jQuery(form).css('top', '-1200px');
          jQuery(form).css('left', '-1200px');
          jQuery(form).appendTo('body');      
          return form;
        },

        ajaxFileUpload: function(s) {
            // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout      
            s = jQuery.extend({}, jQuery.ajaxSettings, s);
            var id = new Date().getTime()       
          var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
          var io = jQuery.createUploadIframe(id, s.secureuri);
          var frameId = 'jUploadFrame' + id;
          var formId = 'jUploadForm' + id;      
            // Watch for a new set of requests
            if ( s.global && ! jQuery.active++ )
          {
             jQuery.event.trigger( "ajaxStart" );
          }           
            var requestDone = false;
            // Create the request object
            var xml = {}   
            if ( s.global )
                jQuery.event.trigger("ajaxSend", [xml, s]);
            // Wait for a response to come back
            var uploadCallback = function(isTimeout)
          {         
             var io = document.getElementById(frameId);
                try
             {            
                if(io.contentWindow)
                {
                    xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
                        xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;

                }else if(io.contentDocument)
                {
                    xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
                       xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
                }                  
                }catch(e)
             {
                jQuery.my_handleError(s, xml, null, e);
             }
                if ( xml || isTimeout == "timeout")
             {            
                    requestDone = true;
                    var status;
                    try {
                        status = isTimeout != "timeout" ? "success" : "error";
                        // Make sure that the request was successful or notmodified
                        if ( status != "error" )
                   {
                            // process the data (runs the xml through httpData regardless of callback)
                            var data = jQuery.uploadHttpData( xml, s.dataType );   
                            // If a local callback was specified, fire it and pass it the data
                            if ( s.success )
                                s.success( data, status );

                            // Fire the global callback
                            if( s.global )
                                jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                        } else
                            jQuery.my_handleError(s, xml, status);
                    } catch(e)
                {
                        status = "error";
                        jQuery.my_handleError(s, xml, status, e);
                    }

                    // The request was completed
                    if( s.global )
                        jQuery.event.trigger( "ajaxComplete", [xml, s] );

                    // Handle the global AJAX counter
                    if ( s.global && ! --jQuery.active )
                        jQuery.event.trigger( "ajaxStop" );

                    // Process result
                    if ( s.complete )
                        s.complete(xml, status);

                    jQuery(io).unbind()

                    setTimeout(function()
                               {   try
                                  {
                                     jQuery(io).remove();
                                     jQuery(form).remove();   

                                  } catch(e)
                                  {
                                     jQuery.my_handleError(s, xml, null, e);
                                  }                           

                               }, 100)

                    xml = null

                }
            }
            // Timeout checker
            if ( s.timeout > 0 )
          {
                setTimeout(function(){
                    // Check to see if the request is still happening
                    if( !requestDone ) uploadCallback( "timeout" );
                }, s.timeout);
            }
            try
          {

             var form = jQuery('#' + formId);
             jQuery(form).attr('action', s.url);
             jQuery(form).attr('method', 'POST');
             jQuery(form).attr('target', frameId);
                if(form.encoding)
             {
                jQuery(form).attr('encoding', 'multipart/form-data');               
                }
                else
             {   
                jQuery(form).attr('enctype', 'multipart/form-data');         
                }         
                jQuery(form).submit();

            } catch(e)
          {         
                jQuery.my_handleError(s, xml, null, e);
            }

          jQuery('#' + frameId).load(uploadCallback   );
            return {abort: function () {}};   

        },

        uploadHttpData: function( r, type ) {
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;
            // If the type is "script", eval it in global context
            if ( type == "script" )
                jQuery.globalEval( data );
            // Get the JavaScript object, if JSON is used.
            if ( type == "json" )
                eval( "data = " + data );
            // evaluate scripts within html
            if ( type == "html" )
                jQuery("").html(data).evalScripts();
             //alert($('param', data).each(function(){alert($(this).attr('value'));}));
            return data;
        },

        /* jQuery 1.2 function substitution: */
        my_handleError: function( s, xhr, status, e ) {
          // If a local callback was specified, fire it
          if ( s.error ) s.error( xhr, status, e );

          // Fire the global callback
                    /* INCOMPATIBLE!!! Modern jQuery 1.5+ expects xhr to be an jqXHR object.
          if ( s.global )
             jQuery.event.trigger( "ajaxError", [xhr, s, e] );
                            */
       }
    })

Answer 6

I found a similar plugin and modded it to fit my needs, thanks for the heads up about the removal of the $.handleError()