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

Weirdness with repeated RadUploads

1 Answer 104 Views

Upload (Obsolete)

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

Justin asked on 03 Jan 2012, 09:26 PM

Did a search, but could not find a related post. I have this issue in ie9 and Firefox 8, have not tried other browsers.

When the RadUpload generates its HTML/JavaScript it has an invisible 'floating' input that when clicked opens the file browser dialog. This input is, by default, floating at a relative position of -5000px above where the control is actually located. Most of the time, bumping it 5000 pixels pushes it off the page, the problem is that on longer pages this can overlap with other visible controls/inputs and can cause unexpected behavior since clicking on this floating input will still bring up the file dialog for that RadUpload.

In my case, I have a RadGrid with a template that contains RadUploads which are actually overlapping on each other, essentially making it impossible to click the intended upload.

I've create a sample page to illustrate this issue shown below. This repeats 50 upload controls with some spacing between them. Once on the page you can see that clicking around the 'Weirdness here' text will open up a file dialog. This becomes an issue when this phantom input overlaps another control. You can verify in the html that the input is floating. When hovered over, the input snaps to the correct location, but will return to -5000px immediately after.

Markup:

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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<!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">

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

<div>

<asp:Repeater runat="server" ID="rptTest">

<ItemTemplate>

<%# Container.DataItem.ToString() /*Index number*/ %>

<telerik:RadUpload runat="server" ID="uploadTest" ControlObjectsVisibility="ClearButtons"></telerik:RadUpload>

Wierdness Here

<br /><br /><br />

</ItemTemplate>

</asp:Repeater>

</div>

</form>

</body>

</html>

Code behind:

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

{

protected void Page_Load(object sender, EventArgs e)

{

List<int> list = new List<int>();

for(int i=0; i<100; i++) list.Add(i);

rptTest.DataSource = list;

rptTest.DataBind();

}

Generated Html:

<div id="rptTest_ctl47_uploadTest" class="RadUpload RadUpload_Default">

<input id="rptTest_ctl47_uploadTest_ClientState" type="hidden" name="rptTest_ctl47_uploadTest_ClientState" autocomplete="off">

<ul id="rptTest_ctl47_uploadTestListContainer" class="ruInputs">

<li>

<span class="ruFileWrap ruStyled">

<input id="rptTest_ctl47_uploadTestfile0" class="ruFileInput" type="file" name="rptTest_ctl47_uploadTestfile0"
size="23" style="position: absolute; left: 0px; top: -5000px;" title="Desert.jpg" alt="Desert.jpg">

<input class="ruFakeInput" type="text" size="22" title="Desert.jpg">

<input class="ruButton ruBrowse" type="button" value="Select">

</span>

<input id="rptTest_ctl47_uploadTestclear0" class="ruButton ruClear" type="button" value="Clear" name="ClearInput">

</li>

</ul>

</div>

1 Answer, 1 is accepted

answered on 04 Jan 2012, 05:50 PM

Hi Justin,

By default the Upload control doesn't include the style attribute that you describe. Here's the original html that the control produces (I used you sample page to get this markup):

<div id="rptTest_ctl01_uploadTest" class="RadUpload RadUpload_Default">

<input id="rptTest_ctl01_uploadTest_ClientState" type="hidden" name="rptTest_ctl01_uploadTest_ClientState" autocomplete="off">

<ul id="rptTest_ctl01_uploadTestListContainer" class="ruInputs">

<li>

<span class="ruFileWrap ruStyled">

<input id="rptTest_ctl01_uploadTestfile0" class="ruFileInput" type="file" name="rptTest_ctl01_uploadTestfile0" size="23">

<label for="rptTest_ctl01_uploadTestfile0" style="display: none;">label</label>

<input id="rptTest_ctl01_uploadTestTextBox0" class="ruFakeInput" type="text" size="22">

<label for="rptTest_ctl01_uploadTestTextBox0" style="display: none;">label</label>

<input class="ruButton ruBrowse" type="button" value="Select">

</span>

<input id="rptTest_ctl01_uploadTestclear0" class="ruButton ruClear" type="button" value="Clear" name="ClearInput">

</li>

</ul>

</div>

This input field is a design decision, and it's intended to overlap the Select Button and the TextBox, as RadUpload doesn't allow uploading a file by typing it's path anymore. This input is in fact the "real" input field of the upload control. The Select Button and the TextBox are there just to preserve the look of the control.

If you remove any CSS that alters the position of the input field, the control should work properly, no matter how many instances of it are placed on the page.

All the best,
Bozhidar
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