|
Using AjaxUploader with jQuery AJAX and ASP.NET
Last post 06-22-2009, 11:10 AM by cutechat. 13 replies.
-
04-08-2009, 4:42 PM |
-
Dunc_NZ
-
-
-
Joined on 01-21-2009
-
-
Posts 16
-
-
|
Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
Dunc_NZ
-
-
-
Joined on 01-21-2009
-
-
Posts 16
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
Dunc_NZ
-
-
-
Joined on 01-21-2009
-
-
Posts 16
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
Dunc_NZ
-
-
-
Joined on 01-21-2009
-
-
Posts 16
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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
|
|
-
-
05-05-2009, 2:23 PM |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
Hi,
Sorry for the delay, I will make a sample for you soon.
Regards,
Terry
|
|
-
05-08-2009, 12:32 PM |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 :
-
<%@ Page Language="C#" %> -
-
<%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %> -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -
-
<script runat="server"> -
-
protected override void OnInit(EventArgs e) -
{ -
if (Request.HttpMethod == "POST" && !Page.IsPostBack) -
{ -
string guidstr=Request.Form["ajaxfileguid"]; -
if (guidstr != null) -
{ -
//OK it's ajax call, handle it and end response: -
Guid guid = new Guid(guidstr); -
ServerAjaxProcessFile(guid); -
} -
} -
base.OnInit(e); -
} -
-
private void ServerAjaxProcessFile(Guid guid) -
{ -
//use MvcUploader to get file by guid: -
CuteWebUI.MvcUploader uploader = new MvcUploader(Context); -
CuteWebUI.MvcUploadFile file = uploader.GetUploadedFile(guid); -
-
//process it -
//file.MoveTo("somewhere/filename.ext") -
file.Delete(); -
-
Response.Write("Server side message : File uploaded : " + file.FileName); -
Response.End(); -
} -
-
</script> -
-
<html xmlns="http://www.w3.org/1999/xhtml"> -
<head runat="server"> -
<title>Untitled Page</title> -
</head> -
<body> -
<form id="form1" runat="server"> -
-
<div> -
<CuteWebUI:Uploader runat="server" ID="Uploader1" MultipleFilesUpload="true"> -
</CuteWebUI:Uploader> -
</div> -
<div id="statusdiv"> -
</div> -
</form> -
-
<script type="text/javascript"> -
-
function ShowMessage(msg) -
{ -
var statusdiv=document.getElementById("statusdiv"); -
statusdiv.innerHTML=""; -
statusdiv.appendChild(document.createTextNode(msg)); -
} -
-
function ClientAjaxProcessFile(guid) -
{ -
var xh; -
if(window.XMLHttpRequest) -
xh=new XMLHttpRequest(); -
else -
xh=new ActiveXObject("Microsoft.XMLHTTP"); -
-
//this is just an sample, use current page to handle the request -
var ajaxurl=document.forms["form1"].action; -
xh.open("POST",ajaxurl,false); -
xh.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); -
xh.send("ajaxfileguid="+guid); -
alert(xh.responseText); -
} -
-
function CuteWebUI_AjaxUploader_OnTaskStart(obj) -
{ -
ShowMessage("Start : "+obj.FileName); -
} -
function CuteWebUI_AjaxUploader_OnTaskComplete(obj) -
{ -
ShowMessage("Complete : "+obj.FileName+" : "+obj.FileGuid); -
-
ClientAjaxProcessFile(obj.FileGuid); -
} -
function CuteWebUI_AjaxUploader_OnTaskError(obj,msg,reason) -
{ -
if(msg==null)msg="File has been cancelled"; -
ShowMessage("Error : "+obj.FileName+" : "+msg); -
} -
-
function CuteWebUI_AjaxUploader_OnPostback() -
{ -
//clear the queue -
this.reset(); -
//cancel postback while the ajax call have processed the files. -
return false; -
} -
-
</script> -
-
</body> -
</html>
Regards,
Terry
|
|
-
06-02-2009, 6:38 AM |
-
Dunc_NZ
-
-
-
Joined on 01-21-2009
-
-
Posts 16
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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 |
-
Dunc_NZ
-
-
-
Joined on 01-21-2009
-
-
Posts 16
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
Hi,
Any update on this?
Duncan
|
|
-
06-22-2009, 11:10 AM |
-
cutechat
-
-
-
Joined on 07-22-2004
-
-
Posts 2,332
-
-
|
Re: Using AjaxUploader with jQuery AJAX and ASP.NET
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
|
|
|
|
|