Hello
I'm building a photo cropper that loads an editor via html5 filereader. The editor is loaded via a radAsyncUploader set to manual upload. When the user finishes cropping they click upload, and the radAsyncUploader hits my custom handler.
That all is working fine - however, I can't for the life of me get the server side FileUploaded event to work. Here's my control markup:
Server side I have this:
I have tried subscribing to FileUploaded in Page_Load, as well as triggering a postpack in the client-side RadAsyncUpload1_FileUploaded
handler. Nothing so far has worked. Appreciate any help on this!
update: I modified a sample project you guys provided showing implementation. The event fired when using a custom handler as soon as the upload button was clicked. However, the handler fires as soon as the file is selected. I therefore changed manual upload to true and added an upload button click event handler to start the upload. In this setup, the handler runs when the upload button is clicked (this is what I need to happen), but the fileUploaded event never fires.
here's the page code:
Thanks,
Michael
I'm building a photo cropper that loads an editor via html5 filereader. The editor is loaded via a radAsyncUploader set to manual upload. When the user finishes cropping they click upload, and the radAsyncUploader hits my custom handler.
That all is working fine - however, I can't for the life of me get the server side FileUploaded event to work. Here's my control markup:
<
div
class
=
"buttons"
>
<
div
>
<
telerik:RadAsyncUpload
ID
=
"RadAsyncUpload1"
runat
=
"server"
OnClientFileDropped
=
"RadAsyncUpload1_FileDropped"
OnClientFileSelected
=
"RadAsyncUpload1_FileSelected"
OnClientFilesSelected
=
""
HideFileInput
=
"True"
Width
=
"221px"
HttpHandlerUrl
=
"~/CustomHandlers/CropImage.ashx"
ManualUpload
=
"True"
OnClientFileUploaded
=
"RadAsyncUpload1_FileUploaded"
OnClientFileUploading
=
"RadAsyncUpload1_FileUploading"
EnableInlineProgress
=
"True"
DisableChunkUpload
=
"True"
CssClass
=
"radButton"
DropZones
=
"#generated"
OnClientFileUploadRemoved
=
"RadAsyncUpload1_FileUploadRemoved"
Skin
=
"Default"
></
telerik:RadAsyncUpload
>
</
div
>
<
div
>
<
input
ID
=
"UploadButton"
class
=
"upload-file"
type
=
"button"
value
=
"Upload"
onclick
=
"startUpload()"
/></
div
>
<
div
style
=
"clear: both"
>
</
div
>
protected void Page_Load(object sender, EventArgs e)
{
RadAsyncUpload1.PostbackTriggers = new string[] { "UploadButton" };
}
protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
//nothing yet!
}
handler. Nothing so far has worked. Appreciate any help on this!
update: I modified a sample project you guys provided showing implementation. The event fired when using a custom handler as soon as the upload button was clicked. However, the handler fires as soon as the file is selected. I therefore changed manual upload to true and added an upload button click event handler to start the upload. In this setup, the handler runs when the upload button is clicked (this is what I need to happen), but the fileUploaded event never fires.
here's the page code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
</
script
>
<
telerik:RadScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
/>
<
telerik:RadAsyncUpload
ID
=
"radAsyncUpload"
runat
=
"server"
EnableInlineProgress
=
"true"
OnFileUploaded
=
"RadAsyncUpload1_FileUploaded"
MaxFileInputsCount
=
"1"
OnClientFileUploaded
=
"onClientFileUploaded"
OnClientFileUploadRemoved
=
"onClientFileUploadRemoved"
PostbackTriggers
=
"radUpload"
HttpHandlerUrl
=
"~/CustomHandler.ashx"
DisableChunkUpload
=
"True"
ManualUpload
=
"True"
OnClientFilesSelected
=
"onClientFileSelected"
/>
<
telerik:RadButton
ID
=
"radUpload"
runat
=
"server"
Text
=
"Upload"
Enabled
=
"false"
CausesValidation
=
"false"
OnClientClicked
=
"radUpload_Clicked"
/>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function onClientFileUploaded(sender, args) {
var radUpload = $find("<%=radUpload.ClientID %>");
radUpload.set_enabled(true);
}
function onClientFileUploadRemoved(sender, args) {
var radUpload = $find("<%=radUpload.ClientID %>");
radUpload.set_enabled(false);
}
function onClientFileSelected(sender, args) {
var radUpload = $find("<%=radUpload.ClientID %>");
radUpload.set_enabled(true);
}
function radUpload_Clicked(sender,args)
{
var upload = $find('<%=radAsyncUpload.ClientID%>');
upload.startUpload();
}
</
script
>
</
telerik:RadScriptBlock
>
</
form
>
</
body
>
</
html
>
Thanks,
Michael