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

Clicking RadButton clears information from AsyncUpload

11 Answers 112 Views

AsyncUpload

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

Andy asked on 06 Aug 2012, 11:05 PM

I am using Telerik ASPX / AJAX v.2011.3.1305.40

I have a page with a RadButton and an AsyncUpload (see aspx code below) a- along with other controls. If I first select a file using the AsyncUpload it will display the selected file (and waits until I click another button to actually do something with it). However, if I click btnClear, it clears the AsyncUpload control back to its original state. What do I need to do to prevent this from happening?

Thanks,
Andy

        <script type="text/javascript">
            function btnClear_Click( sender, eventArgs )
           {
               var ddl = $find( "<%= dropdownlist.ClientID %>" );
               ddl.set_text( "" );
               ddl.trackChanges();
               ddl.get_items().getItem( 0 ).set_text( "" );
               ddl.commitChanges();
               var tree = ddl.get_items().getItem( 0 ).findControl( "treeview" );
               var selectedNode = tree.get_selectedNode();
               if ( selectedNode != null )
                   selectedNode.set_selected( false );
           }
        </script>

             <telerik:RadButton ID="btnClear" runat="server" Text="" OnClientClicked="btnClear_Click"
               ToolTip="Clear setting">
               <Icon PrimaryIconCssClass="rbRemove" PrimaryIconLeft="4" PrimaryIconTop="4" />
           </telerik:RadButton>

         <div class="upload-panel">
               <h6>
                   1. Select .SEW file to import:</h6>
               <telerik:RadAsyncUpload ID="UploadControl" runat="server" MaxFileInputsCount="1"
                   AllowedFileExtensions="sew" />
           </div>

11 Answers, 1 is accepted

answered on 15 Aug 2012, 02:00 PM

PostBackTrigger.zip

Hi Andy,

I have tested the issue locally but unfortunately could not observe it at my side. I am attaching the sample test web page used that is based on the help article provided in my previous post. Please review it and if your scenario is somehow different please provide the code that will help us reproduce the issue at our side as well. This way will be able to inspect it and be more helpful in solving it.

All the best,
Plamen
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 19 Aug 2012, 05:54 PM

I looked at your sample - whatever it is that allows yours to work and mine to fail is too subtle for me. Since there is no obvious way to attach my code, I have pasted below.

Appreciate the help,
Andy

/********************** AdminForm.aspx *****************************/

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AdminForm.aspx.cs" Inherits="AdminApp.AdminForm" %>

<%@ 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 id="Head1" runat="server">

<title></title>

</head>

<body>

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

<telerik:RadScriptManager ID="MasterScriptManager" runat="server" EnablePageMethods="true" />

<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="All">

</telerik:RadFormDecorator>

<fieldset id="importSmpTable">

<div class="formCol">

<br />

You may configure a user with primary responsibility for the imported project. You

may also assign the project to an OBS node. Note that if you assign the project

to another user AND an OBS mode to which you have no access, the project will not

be visible to you after import.

<h5>

Associated OBS Node</h5>

<br />

<telerik:RadComboBox ID="ddlObs" runat="server" Width="85%" ShowToggleImage="True"

ToolTip="Select a node from the Organization Breakdown Structure." Style="vertical-align: middle;"

OnClientDropDownOpened="OnClientDropDownOpenedHandler" EmptyMessage="Choose an OBS node"

ExpandAnimation-Type="None" CollapseAnimation-Type="None">

<ItemTemplate>

<div id="div1">

<telerik:RadTreeView runat="server" ID="treeviewObs" OnClientNodeClicking="nodeClicking"

Width="100%" Height="140px">

</telerik:RadTreeView>

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem Text="" />

</Items>

</telerik:RadComboBox>

<telerik:RadButton ID="btnClearObs" runat="server" Text="" OnClientClicked="btnClearObs_Click"

ToolTip="Clear Associated OBS setting">

<Icon PrimaryIconCssClass="rbRemove" PrimaryIconLeft="4" PrimaryIconTop="4" />

</telerik:RadButton>

<br />

<asp:CheckBox ID="chkHigherNodes" runat="server" Text="Grant access to nodes higher than the selected OBS node."

Checked="true" />

<br />

<h5>

<asp:Label ID="lblPrimaryResponsibility" runat="server" AssociatedControlID="ddlPrimaryResponsibility"

Text="Assign primary responsibility" />

</h5>

<br />

<div>

<telerik:RadComboBox ID="ddlPrimaryResponsibility" runat="server" Width="80%" ToolTip="Select a user to have the primary responsibility for this estimation project." />

</div>

<br />

</div>

<div class="formCol" style="padding-right: 10px;">

<h5>

<asp:Label ID="lblSelect" runat="server" Text="Select source (SEW Workbook)" />

</h5>

<div class="upload-panel">

<h6>

1. Select .SEW file to import:</h6>

<telerik:RadAsyncUpload ID="UploadControl" runat="server" MaxFileInputsCount="1"

AllowedFileExtensions="sew" PostbackTriggers="ImportButton" />

<%----%>

</div>

<telerik:RadProgressManager ID="RadProgressManager1" runat="server" />

<h6>

2. After file upload is complete, click button below to complete the import process:</h6>

<br />

<telerik:RadButton ID="ImportButton" runat="server" Text="Import SLIM-Estimate Project"

OnClick="OnImport" />

<br />

<p>

<asp:Label ID="Notification" runat="server" CssClass="failureNotification boldError" /></p>

</div>

<script type="text/javascript">

var isError = <%=IsError.ToString().ToLower()%>;

var errorMessage = "<%=ErrorMessage%>";

if(isError)

{

alert(errorMessage);

}

function btnClearObs_Click( sender, eventArgs )

{

var ddl = $find( "<%= ddlObs.ClientID %>" );

ddl.set_text( "" );

ddl.trackChanges();

ddl.get_items().getItem( 0 ).set_text( "" );

ddl.commitChanges();

var tree = ddl.get_items().getItem( 0 ).findControl( "treeviewObs" );

var selectedNode = tree.get_selectedNode();

if ( selectedNode != null )

selectedNode.set_selected( false );

}

function nodeClicking( sender, args )

{

var comboBox = $find( "<%= ddlObs.ClientID %>" );

var node = args.get_node();

comboBox.set_text( node.get_text() );

comboBox.trackChanges();

comboBox.get_items().getItem( 0 ).set_text( node.get_text() );

comboBox.commitChanges();

comboBox.hideDropDown();

}

//find the selected node in the treeview inside the combobox and scroll it into view

function OnClientDropDownOpenedHandler( sender, eventArgs )

{

var tree = sender.get_items().getItem( 0 ).findControl( "rtvObs" );

var selectedNode = tree.get_selectedNode();

if ( selectedNode )

{

selectedNode.scrollIntoView();

}

</script>

</fieldset>

</form>

</body>

</html>

/*************************************** AdminForm.aspx.cs ****************************************************/

using System;

using System.Configuration;

using System.Linq;

using Telerik.Web.UI;

using System.Web;

namespace AdminApp

{

public partial class AdminForm : System.Web.UI.Page

{

#region Error related

public bool IsError = false;

public string ErrorMessage = string.Empty;

protected void SetError( string message )

{

this.Notification.Text = message;

}

#endregion

protected void Page_Load( object sender, EventArgs e )

{

}

protected void OnImport( object sender, EventArgs e )

{

Page.Validate(); // perform server side validation

if ( !Page.IsValid )

return;

//string allowedExtension = (string)UploadControl.AllowedFileExtensions.GetValue( 0 );

if ( UploadControl.UploadedFiles.Count != 1 )

{

SetError( "Please select a single valid .sew workbook." );

return; // throw new InvalidOperationException( "Uploaded file count should always be '1'." );

}

string clientFile = UploadControl.UploadedFiles[ 0 ].FileName;

string fileExtension = System.IO.Path.GetExtension( clientFile ).ToLower();

if ( fileExtension != ".sew" )

{

SetError( "Incorrect file type. Please select an SEW file." );

return;

}

//remember the original source name; that will be the default name of the template

string sourceFile = System.IO.Path.GetFileNameWithoutExtension( clientFile );

// We're going to reset the file name to a GUID with .mdb

// as the extension. We're just opening it as

// an Access database. This will avoid the unlikely pos-

// sibility of two people trying to upload the same file

// at the same time and getting a file clash.

string fileName = string.Format( "{0}.mdb", Guid.NewGuid() );

// If there's an upload folder configured in the config file,

// use it. Otherwise, use a temp folder at the app root.

string uploadPath = ConfigurationManager.AppSettings[ "UploadDirectory" ];

if ( string.IsNullOrWhiteSpace( uploadPath ) )

{

uploadPath = "~/temp";

}

string filePath = System.IO.Path.Combine( HttpContext.Current.Server.MapPath( uploadPath ), fileName );

// This triggers the RadUpload control.

UploadControl.UploadedFiles[ 0 ].SaveAs( filePath );

string owner = ddlPrimaryResponsibility.SelectedValue;

int ownerId = 0;

if ( !string.IsNullOrWhiteSpace( owner ) && int.TryParse( owner, out ownerId ) )

ownerId = Convert.ToInt32( owner );

//retrieve project access selections

RadTreeView tree = ddlObs.Items[ 0 ].FindControl( "treeviewObs" ) as RadTreeView;

RadTreeNode selNode = tree.SelectedNode;

int? obsNodeId = selNode == null ? (int?)null : Convert.ToInt32( selNode.Value );

if ( !obsNodeId.HasValue && ownerId == 0 )

{

// no one has been assigned to access this project!

SetError( "You must assign either an OBS node or a person of primary responsibility." );

return;

}

System.IO.File.Delete( filePath );

}

answered on 22 Aug 2012, 07:56 AM

Hi Andy,

I tested the provided code, and it works correctly on my end. There is however the following detail, that might be the cause for the confusion: when you upload a file with a valid extension ( in your case - sew ), the PostBackTrigger property works accordingly. When you upload an invalid file however, it's lost upon postback. This is the desired behavior of RadAsyncUpload and is explained in the following help article:
http://www.telerik.com/help/aspnet-ajax/asyncupload-persist-uploaded-files.html

All the best,
Bozhidar
the Telerik team

answered on 24 Aug 2012, 01:04 PM

Capture1.PNG

Capture2.PNG

Is it possible there has been a miscommunication here? The upload control *appears* to retain the name of the uploaded file when I use the "PostbackTriggers" attribute - that is, the name of the file remains on the web page and everything *appears* to be fine. However, when I click the "Import" button to actually do the work, the upload controls reports "UploadControl.UploadedFiles.Count == 0"! If this is not happening in your environment, please allow me to upload my VS 2010 project which demonstrates this behavior. I assure you I do not attempt to upload anything but a valid file with .sew extension.

To clarify: It is NOT the postback from the upload control that is a problem for me. The problem is when handling the click on the "Import" button - at that time, the upload control reports that it has no files - even though the web page *appears* to have a file in the control.

I have uploaded two screen snaps.

Please let me know if it is not clear what the problem is.

Thanks,
Andy

answered on 18 Jul 2013, 07:57 AM

Hi Andre,

Please have a look into the following code I tried with 2013.1.417.40 version of Telerik RadControls and it worked fine at my end.

ASPX:

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" PostbackTriggers="RadButton2"

TargetFolder="~/Images/Img/" AllowedFileExtensions=".jpg" MaxFileSize="57971152"

MultipleFileSelection="Automatic" UploadedFilesRendering="BelowFileInput" OnFileUploaded="RadAsyncUpload1_FileUploaded">

</telerik:RadAsyncUpload>

<br />

<telerik:RadButton ID="RadButton1" runat="server" Text="PostBack to Check Preserved Files"

OnClick="RadButton1_Click">

</telerik:RadButton>

<br />

<telerik:RadButton ID="RadButton2" runat="server" Text="Upload" OnClick="RadButton2_Click">

</telerik:RadButton>

C#:

protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)

{

string targetfolder = RadAsyncUpload1.TargetFolder;

e.File.SaveAs(Path.Combine(Server.MapPath(targetfolder), e.File.FileName));

}

protected void RadButton1_Click(object sender, EventArgs e)

{

}

protected void RadButton2_Click(object sender, EventArgs e)

{

string count1 = RadAsyncUpload1.UploadedFiles.Count;

}

Thanks,
Princy.