This is a migrated thread and some comments may be shown as answers.

RadUpload and RadWindow on the same page

3 Answers 110 Views

Upload (Obsolete)

This is a migrated thread and some comments may be shown as answers.

Insomniac82 asked on 04 Nov 2010, 05:39 PM

Telerik,

My team and I have been trying to decipher this paradox for a couple of days now, but unfortunately, all our efforts have ended being futile. I have RadUpload and RadWindow on the same ASPX page. The screen or logic flow is as follows:

User selects multiple images, using RadUpload
User clicks on preview button
Onclick event is captured in code-behind file; uploaded images are saved in session; javascript is injected, using RadAjaxManager; and RadWindow is triggered, which ultimately shows all the uploaded images.

We are also disabling AJAX for RadAjaxPanel and RadAjaxManager in order for RadUpload to have a full post-back. One thing we have noticed that if we do not disable the AJAX for the preview button, everything works as expected. This behavior, however, forces the RadUpload.UploadedFiles property to show zero count - even though several files are uploaded to the control.

We were using 2010.2.713.35 version of Telerik.Web.UI assembly, and decided to update to 2010.2.929.35 build, which is latest build. The updates, however, did not solve the problem.

We will be anxiously waiting to hear back from you.

The default page is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="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 runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<telerik:RadScriptBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function openEmergencyAlertDialog(caller) {

var queryStr = "PreviewEmergencyAlert.aspx";

var oWnd = radopen(queryStr, caller);

return false;

}

function conditionalPostback(sender, args) {

if (args.get_eventTarget() == "<%= PreviewButton.UniqueID %>") {

args.set_enableAjax(false);

var manager = $find('<%= RadAjaxManager1.ClientID %>');

manager.set_enableAJAX(false);

setTimeout(function() {

manager.set_enableAJAX(true);

}, 0);

}

</script>

</telerik:RadScriptBlock>

<telerik:radajaxmanager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="conditionalPostback" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnlStatus" >

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlStatus" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:radajaxmanager>

<telerik:radajaxloadingpanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" Transparency="80">

</telerik:radajaxloadingpanel>

<asp:Panel ID="pnlStatus" runat="server">

<div style="padding-left:45px;" >

<table width="900px">

<tr>

<td>

<center><span style=" color:#0066cc; font-weight:bold; font-size:18px;">Header </span>

<span style="float:right; margin-top:-8px;margin-right:42px; ">

<asp:LinkButton ID="PreviewButton" runat="server"

onclick="PreviewButton_Click" Text="Preview" >

</asp:LinkButton>

</span>

</center>

</td>

</tr>

</table>

<div style="height:10px;"></div>

<div style="padding-left:4px;">

<table width="850px" border="0" style="background:#75b458;">

<tr style="line-height:20px;">

<td style="width:152px;" valign="top">

<asp:Label ID="Label3" runat="server" Text="Upload Image(s):"></asp:Label>

</td>

<td>

<span style="color:#fff;">Allowed extensions are: .gif, .jpg, .jpeg, .png, .bmp</span>

<div style="height:4px;">

</div>

<telerik:RadUpload ID="RadUpload1" Runat="server" MaxFileInputsCount="5" ControlObjectsVisibility = "ClearButtons"

MaxFileSize="250000"

AllowedFileExtensions=".gif,.jpg,.jpeg,.png,.bmp" >

</telerik:RadUpload>

</td>

</tr>

</table>

</div>

</asp:Panel>

</div>

<telerik:RadWindowManager ID="radEAWindowManager" runat="server">

<Windows>

<telerik:RadWindow ID="radEmergencyAlert" Width="700px" Height="400px" AutoSize="false"

ShowContentDuringLoad="true" ReloadOnShow="true" VisibleStatusbar="false" runat="server"

Behaviors="Maximize,Close,Move,Resize,Reload" NavigateUrl="" KeepInScreenBounds="true"

Modal="True" Title="Select Entity Actions">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

</form>

</body>

</html>

The code-behind

protected void PreviewButton_Click ( object sender, EventArgs e )

{

if ( RadUpload1.UploadedFiles.Count > 0 )

{

List<byte[]> listImage = new List<byte [ ]> ( );

foreach ( UploadedFile validFile in RadUpload1.UploadedFiles )

{

Stream imageStream = validFile.InputStream;

int imageLength = validFile.ContentLength;

byte[] imageBinaryData = new byte [ imageLength ];

int n = imageStream.Read ( imageBinaryData, 0, imageLength );

listImage.Add ( imageBinaryData );

}

RadAjaxManager1.ResponseScripts.Add ( "openEmergencyAlertDialog('radEmergencyAlert');" );

}

Thanks,

3 Answers, 1 is accepted

answered on 09 Nov 2010, 02:59 PM

Hi Insomniac82,

RadUpload cannot upload files using AJAX calls. This is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for asynchronous calls to the application. In order to upload a file your application must perform a full page postback. This is the reason why the UploadedFiles collection shows zero. However, I am not quite sure that I understand the issue that you experience. Also, have in mind that once files are uploaded, they are no longer persisted in the UploadedFiles collection. They will stay there only in the postback that actually uploaded them.

All the best,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 09 Nov 2010, 08:00 PM

Hi Genady,

I appreciate your timely response. Yes, I know that there are certain limitations when using RadUpload Control, and I am very well aware of commanding full post back when uploading images, using RadUpload server control. Your response, however, did not address the real problem that I am seeing.

The only reason I copied, pasted the source code, so you Telerik support personnel could look at it. But apparently, it did not help. If you look at the default.aspx page, I am explicitly disabling and enabling AJAX to trigger post back from the client side, which is based on your guidelines available in online tutorials.

Can somebody in your team try the default.aspx page and verify if the problem exists?

PreviewEmergencyAlert.aspx inside openEmergencyAlertDialog function could be a simple HTML page.

Thanks,

Accepted

answered on 12 Nov 2010, 03:52 PM

devproject.zip

Hi Insomniac82,

Thank you for the sample code and please excuse me for not understanding your scenario correctly. I've managed to find the problem and it is not related to RadUpload at all. The problem is actually in the openEmergencyAlertDialog function. More specifically, this function is being called before there is instance of RadWindowManager created on the page. This happens because of the following script:

RadAjaxManager1.ResponseScripts.Add("openEmergencyAlertDialog('radEmergencyAlert');");

Instead, it should look like this:

RadAjaxManager1.ResponseScripts.Add("Sys.Application.add_load(function() { openEmergencyAlertDialog('radEmergencyAlert'); });");

For convenience, I've applied the changes to a sample page. You can find it attached to this ticket.

All the best,
Genady Sergeev
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadUpload and RadWindow on the same page

3 Answers, 1 is accepted