Support forums » Products » Ajax Uploader » Re: Using AjaxUploader with jQuery AJAX and ASP.NET

Using AjaxUploader with jQuery AJAX and ASP.NET

Last post 06-22-2009, 11:10 AM by cutechat. 13 replies.
Sort Posts: Previous Next

  •  04-08-2009, 4:42 PM 50894

    Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    Has anyone got any sample code where they've got the AjaxUploader working with jQuery AJAX?  In theory, I think I should be able to override the CuteWebUI_AjaxUploader_OnPostback javascript function, call the FileUploaded event using ASP.NET page methods using a $.ajax() call, modify my page using jQuery then return false to stop a full postback.
     
    Anyone had any luck with this?

  •  04-09-2009, 12:44 AM 50906 in reply to 50894

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    What's your code ??
     
    in script , you can get the file guid list just from uploader1.value .
     
    If you want to do a AJAX postback , you must add the values of all form elements into the post data.
     
    Regards,
    Terry

  •  04-09-2009, 6:03 AM 50918 in reply to 50906

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi Terry,
     
    That makes things substantially easier - thanks!  I'd actually rather not do a postback at all; I just want the user to upload file, then see a "thanks" message without submitting the whole form until they've filled out the rest of the page.
     
    To get things started, I simply added a:
     
    function CuteWebUI_AjaxUploader_OnPostback() {
       alert($(    '#filePhoto'    ).val());
       return false    ;
    }

    ...which has successfully stopped the postback.  Because server-side, there's no .value on the uploader control, I've just used Request[uploader.ClientID] which displays me a forwardslash-separated list of GUIDs, all good.

    Unfortunately, the only thing missing is the files - they don't appear have to have saved to disk anywhere.  I was hoping they'd still be in UploaderTemp, so I could just use that to copy them to their new location. 

    I've tried doing an AJAX call from within the _OnPostback() to a FileUploaded page method with the (object sender, UploaderEventArgs e) signature which is the obvious solution, but I can't work out the structure of the UploaderEventArgs from JavaScript.

    Any hints on that one?

  •  04-09-2009, 11:43 PM 50959 in reply to 50918

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    If you only want to use jQuery to do the AJAX task ,
     
    I suggest you that wait for one week.
     
    Because we will publish AjaxUploader 3.0 , which support ASP.NET MVC , or the custom AJAX tasks.
     
    Regards,
    Terry
     

  •  04-21-2009, 8:28 AM 51309 in reply to 50959

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi Terry,
     
    Could you please tell me where I can find some documentation on the custom AJAX tasks?  I've installed V3.0, and I can't seem to find any new documentation.
     
    Most importantly with regards to functionality, I still can't find the file I uploaded on the server once I call CuteWebUI_AjaxUploader_OnPostback to call the page method and stop the page posting postback.  It is definitely calling the server method, and successfully stopping the postback.  My javascript is:

    var     paramList = "{}";

    function     CuteWebUI_AjaxUploader_OnPostback() {
       alert($(    '#ctl00_cphMain_filePhoto').val());
           //Call the page method
           $.ajax({
          type:     "POST",
          url:     'fileuploadtest.aspx/postfile',
          contentType:     "application/json; charset=utf-8",
          data: paramList,
          dataType:     "json",
          success: successFn,
          error: errorFn
       });

     

       // Hide the div
       $('#ctl00_cphMain_divFilePhotoNone').hide();

     

       // Stop the postback
       return false;
    }

    Help! 

  •  04-21-2009, 9:20 AM 51311 in reply to 51309

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    Please check the folder 'MVC-CSharp' after unzip the Ajax-Uploader.zip
     
    (that need ASP.NET MVC knowledge to read it)
     
    We will provide more sample on this part.
     
    Regards,
    Terry

  •  04-21-2009, 11:18 AM 51319 in reply to 51311

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi Terry,
     
    Thanks for that.  I did have a look at the MVC stuff, but as my code isn't an MVC application, I couldn't work out how to apply it to my problem. 
     
    Rather than thinking MVC, it's more that I'm trying to use an AJAX PageMethod instead of an UpdatePanel to save the file somewhere.
     
    It's all working except for (and this is quite the show-stopper) the file disappearing somewhere after upload (the progress bar indicates it's gone up to the server somewhere) and before calling my AJAX PageMethod.  I thought perhaps calling "return false;" on the _CuteWebIO_AjaxUploader_OnPostback() is causing it not to write the file, but I've got an "alert()" call in the function and if I search the server disk while the alert box is still displayed (i.e. before the "return false;" statement) the file still doesn't appear to be anywhere.
     
    Thoughts?
     

  •  04-23-2009, 11:03 AM 51439 in reply to 51319

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    I will provide a sample for you soon.
     
    If you can post some simple code to me , I will do that faster.
     
    Regards,
    Terry
     

  •  04-24-2009, 5:31 AM 51495 in reply to 51439

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi Terry,
     
    Really simple example attached.

    Ajax Uploader with jQuery Test

  •  05-05-2009, 2:23 PM 51842 in reply to 51495

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    Sorry for the delay, I will make a sample for you soon.
     
    Regards,
    Terry
     

  •  05-08-2009, 12:32 PM 51978 in reply to 51842

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    I have checked your code.
     
    You have know how to use the guid list.
     
    Please check this sample , you will know how to do it directly :
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5.   
    6. <script runat="server">  
    7.        
    8.     protected override void OnInit(EventArgs e)   
    9.     {   
    10.         if (Request.HttpMethod == "POST" && !Page.IsPostBack)   
    11.         {   
    12.             string guidstr=Request.Form["ajaxfileguid"];   
    13.             if (guidstr != null)   
    14.             {   
    15.                 //OK it's ajax call, handle it and end response:   
    16.                 Guid guid = new Guid(guidstr);   
    17.                 ServerAjaxProcessFile(guid);   
    18.             }   
    19.         }   
    20.         base.OnInit(e);   
    21.     }   
    22.   
    23.     private void ServerAjaxProcessFile(Guid guid)   
    24.     {   
    25.         //use MvcUploader to get file by guid:   
    26.         CuteWebUI.MvcUploader uploader = new MvcUploader(Context);   
    27.         CuteWebUI.MvcUploadFile file = uploader.GetUploadedFile(guid);   
    28.   
    29.         //process it   
    30.         //file.MoveTo("somewhere/filename.ext")   
    31.         file.Delete();   
    32.            
    33.         Response.Write("Server side message : File uploaded : " + file.FileName);   
    34.         Response.End();   
    35.     }   
    36.   
    37. </script>  
    38.   
    39. <html xmlns="http://www.w3.org/1999/xhtml">  
    40. <head runat="server">  
    41.     <title>Untitled Page</title>  
    42. </head>  
    43. <body>  
    44.     <form id="form1" runat="server">  
    45.   
    46.         <div>  
    47.             <CuteWebUI:Uploader runat="server" ID="Uploader1" MultipleFilesUpload="true">  
    48.             </CuteWebUI:Uploader>  
    49.         </div>  
    50.         <div id="statusdiv">  
    51.         </div>  
    52.     </form>  
    53.   
    54.     <script type="text/javascript">  
    55.        
    56.     function ShowMessage(msg)   
    57.     {   
    58.         var statusdiv=document.getElementById("statusdiv");   
    59.         statusdiv.innerHTML="";   
    60.         statusdiv.appendChild(document.createTextNode(msg));   
    61.     }   
    62.        
    63.     function ClientAjaxProcessFile(guid)   
    64.     {   
    65.         var xh;   
    66.         if(window.XMLHttpRequest)   
    67.             xh=new XMLHttpRequest();   
    68.         else   
    69.             xh=new ActiveXObject("Microsoft.XMLHTTP");   
    70.            
    71.         //this is just an sample, use current page to handle the request   
    72.         var ajaxurl=document.forms["form1"].action;   
    73.         xh.open("POST",ajaxurl,false);   
    74.         xh.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");   
    75.         xh.send("ajaxfileguid="+guid);   
    76.         alert(xh.responseText);   
    77.     }   
    78.   
    79.     function CuteWebUI_AjaxUploader_OnTaskStart(obj)   
    80.     {   
    81.         ShowMessage("Start : "+obj.FileName);   
    82.     }   
    83.     function CuteWebUI_AjaxUploader_OnTaskComplete(obj)   
    84.     {   
    85.         ShowMessage("Complete : "+obj.FileName+" : "+obj.FileGuid);   
    86.            
    87.         ClientAjaxProcessFile(obj.FileGuid);   
    88.     }   
    89.     function CuteWebUI_AjaxUploader_OnTaskError(obj,msg,reason)   
    90.     {   
    91.         if(msg==null)msg="File has been cancelled";   
    92.         ShowMessage("Error : "+obj.FileName+" : "+msg);   
    93.     }   
    94.        
    95.     function CuteWebUI_AjaxUploader_OnPostback()   
    96.     {   
    97.         //clear the queue   
    98.         this.reset();   
    99.         //cancel postback while the ajax call have processed the files.   
    100.         return false;   
    101.     }   
    102.        
    103.     </script>  
    104.   
    105. </body>  
    106. </html>  

     
    Regards,
    Terry
     

  •  06-02-2009, 6:38 AM 52726 in reply to 51978

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi Terry,
     
    Sorry for the slow feedback; I couldn't get it working in time and so had to abandon the project and use another method.
     
    I've now got a requirement for this in another application, so I downloaded your example, put it into a project and converted the AJAX calls to jQuery.  The application is now running and there are no javascript errors, but as per the original issue the file isn't being saved.
     
    As per my previous post, I'm not using MVC (I'm only using VS2005), but I your control does run and the status bar shows it's doing something.
     
    The reason for this seems to be that with this code/DLL, the CuteWebUI_AjaxUploader_OnTaskComplete(obj) function is never called.  Any ideas on why this might be?
     
    Thanks,
     
    Duncan

  •  06-22-2009, 10:27 AM 53358 in reply to 52726

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Hi,
     
    Any update on this?
     
    Duncan

  •  06-22-2009, 11:10 AM 53362 in reply to 53358

    Re: Using AjaxUploader with jQuery AJAX and ASP.NET

    Reply Quote
    Duncan,
     
    I think you got some javascript error.
     
    The example works for me.
     
    I think you can build a simple environment and test it again.
     
    If you find any error details, please post it.
     
    Regards,
    Terry
View as RSS news feed in XML