Weirdness with repeated RadUploads

Thread is closed for posting
2 posts, 0 answers
  1. Justin
    Justin avatar
    1 posts
    Member since:
    Dec 2011

    Posted 03 Jan 2012 Link to this post

    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.

    <%@ 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" "">
    <head runat="server">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:Repeater runat="server" ID="rptTest">
                    <%# Container.DataItem.ToString() /*Index number*/ %>              
                    <telerik:RadUpload runat="server" ID="uploadTest" ControlObjectsVisibility="ClearButtons"></telerik:RadUpload>
                          Wierdness Here
                    <br /><br /><br />

    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;

    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">
                <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">
            <input id="rptTest_ctl47_uploadTestclear0" class="ruButton ruClear" type="button" value="Clear" name="ClearInput">

  2. Bozhidar
    Bozhidar avatar
    1142 posts

    Posted 04 Jan 2012 Link to this post

    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">
                <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">
                <input id="rptTest_ctl01_uploadTestclear0" class="ruButton ruClear" type="button" value="Clear" name="ClearInput">

    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,
    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
Back to Top