Appearance of RadAsyncUpload

7 posts, 0 answers
  1. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 17 Feb 2012 Link to this post

    Hello,

    How do I retain the initial appearance of the RadAsyncUpload after you select the file to upload?   I have the max count at 1 and I want the control to appear with the textbox of the filename (if the filename is long then that textbox should not expand) and the Select button should remain.

    Basically, I dont want to see the control to change appearance to the little green dot and red X remove after you select the filename to upload.

    Thanks...
  2. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 20 Feb 2012 Link to this post

    Hello Michael,

    You can use some custom javascript and the OnClientFileUploaded event. Here's what the handler function should look like:
    function fileUploaded(upload, args) {
        if (upload.getUploadedFiles().length > 1) {
            upload.deleteFileInputAt(0)
        }
        upload.addFileInput();
        $telerik.$(".ruFakeInput", upload.get_element()).val(args.get_fileName());
        $telerik.$(".ruInputs li:first").hide();
    }

     
    Kind regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 21 Feb 2012 Link to this post

    Thanks for your help.  I did see a flicker when it changes back to the original layout.  Is there a way to avoid that?

    Also, I have this control in a table cell, and its taking up alot of room, I'm trying to figure out how to shrink the left side of white space that appears to the left of the textbox. See my attached picture.  I highlighted the white space in red.  That cell is only 8% of the table that is defined to be 98% of the screen. 

    I was looking at CSS:

    .RadAsyncUpload

     

     

    , .RadUpload, .RadUpload_Default

     

    {

     

     

    float: right !important;

     

     

     

    text-align: right !important;

     

     

     

    vertical-align:bottom !important;

     

     

     

    max-width: inherit !important;

     

    }


    Do I need to adjust anything here?

    Thanks...

  4. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 22 Feb 2012 Link to this post

    Hi Michael,

    Thank you for getting back to us.

    That flicker you see is the loading indicator showing the progress of the upload. If you hide it, you won't have any indication of when the upload is finished, and this can cause problems. For instance if you try to upload another file, while the first one is still uploading, the logic will break.

    To prevent that, and still keep to your specifications, I've modified the code, so that when you select a file, the Upload is disabled until the file is uploaded, thus preventing anyone from trying to upload 2 files at once. This time I use the OnClientFileSelected and OnClientFileUploaded events. Here's what the functions look like:
    function fileUploaded(upload, args) {
        upload.set_enabled(true);
    }
     
    function fileSelected(upload, args) {
        if (upload.getUploadedFiles().length == 1) {
            upload.deleteFileInputAt(0)
        }
        $telerik.$(".ruInputs li:first", upload.get_element()).addClass('hidden');
        upload.addFileInput();
        $telerik.$(".ruFakeInput", upload.get_element()).val(args.get_fileName());
        upload.set_enabled(false);
    }

    You should also add the following CSS:
    .hidden
    {
        display: none !important;
    }

    As for the spacing issue, since it is a styling problem, it highly depends on your design and I'm not able to provide you with a proper response without a sample page I can test locally. Could you try to isolate the problem in such page and send it back to me?
     
    Hope this was helpful.

    Kind regards,
    Bozhidar
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  5. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 22 Feb 2012 Link to this post

    Hello,

    Thanks for the quick response.  I do not currently have a need to upload more than 2 files at one time.  When I implemented your new code, I saw two radupload controls.  I do not want this effect.  I just wanted to avoid the flicker of the green button, red x remove, etc.

    For the spacing issue, here is my html:

     

     

     

     

    <table style="width: 98%">

     

     

     

    <tr>

     

     

     

     

     

     

     

     

    <td align="left" style="width: 35%; padding-left:7px">

     

     

     

     

     

     

     

     

    <asp:CheckBox ID="chkInfo" runat="server" Text=" Information included in worksheet"

     

     

     

     

     

     

     

     

    AutoPostBack="True" OnCheckedChanged="chkInfo_CheckedChanged" />

     

     

     

     

     

     

     

     

    </td>

     

     

     

     

     

     

     

     

    <td align="center" style="width: 28%">

     

     

     

    <asp:Repeater ID="rptrDocs" OnItemDataBound="rptrDocs_ItemDataBound" runat="server">

     

     

     

     

     

     

     

     

    <ItemTemplate>

     

     

     

     

     

     

     

     

    <div style="text-align:left">

     

     

     

     

     

     

     

     

    <asp:HyperLink ID="lnkView" Text='<%# Eval("Document") %>' runat="server"></asp:HyperLink>

     

     

     

     

     

     

     

     

    </div>

     

     

     

     

     

     

     

     

    </ItemTemplate>

     

     

     

     

     

     

     

     

    <SeparatorTemplate>

     

     

     

     

     

     

     

     

    </SeparatorTemplate>

     

     

     

     

     

     

     

     

    </asp:Repeater>

     

     

     

     

     

     

     

     

    </td>

     

     

     

     

     

     

     

     

    <td align="right" style="width: 21%">

     

     

     

    <asp:LinkButton ID="btnWorksheet" runat="server" Text="Excel Worksheet" OnClick="btnWorksheet_Click"></asp:LinkButton><asp:Label

     

     

     

     

     

     

     

     

    ID="lblNoWorksheet" runat="server" ForeColor="Red" Text="No worksheet attached"

     

     

     

     

     

     

     

     

    Visible="false"></asp:Label>

     

     

     

     

     

     

     

     

    </td>

     

     

     

     

     

     

     

     

    <td align="center" style="width: 8%">

     

     

     

    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnFileUploaded="RadAsyncUpload1_FileUploaded"

     

     

     

    OnClientFileUploadFailed="onUploadFailed" OnClientFileSelected="onFileSelected" MultipleFileSelection="Disabled"

     

     

     

    MaxFileInputsCount="1" OnClientFileUploaded="onFileUploaded" OnClientFileUploadRemoved="onClientFileUploadRemoved" />

     

     

     

     

     

     

     

     

    </td>

     

     

     

     

     

     

     

     

    <td align="right" style="width: 6%; padding-left:2px">

     

     

     

     

     

     

     

     

    <div id="divbtnAttach" style="display:none; padding-top:3px" runat="server">

     

     

     

     

     

     

     

     

    <asp:ImageButton ID="btnAttach" runat="server" src="../images/ico_Add.GIF"

     

     

     

    OnClientClick="ToggleLoadingOn();AttachWorksheetPostBack();"

     

     

     

    ToolTip="Attach External Document" Width="16px" CausesValidation="False" ></asp:ImageButton></div>

     

     

     

     

     

     

     

     

    <div id="divbtnAttach1" style="display:block; padding-top:3px" runat="server">

     

     

     

     

     

     

     

     

    <asp:ImageButton ID="btnAttach1" runat="server"

     

     

     

    src="../images/ico_Add_Disabled.GIF" Enabled="false"

     

     

     

    ToolTip="Attach External Document" Width="16px" CausesValidation="False" ></asp:ImageButton></div>

     

     

     

     

     

     

     

     

    </td>

     

     

     

     

     

     

     

     

    </tr>

     

     

     

     

     

     

     

     

    </table>

     

  6. Michael
    Michael avatar
    66 posts
    Member since:
    Dec 2009

    Posted 23 Feb 2012 Link to this post

    Hi, I was able to get the width properly set by using the server side implementation:

    uploadControl.Width=Unit.Pixel(500);

    Thanks. 
  7. Bozhidar
    Admin
    Bozhidar avatar
    1188 posts

    Posted 27 Feb 2012 Link to this post

    Hi Michael,

    Thank you for getting back to us.

    Unfortunately I can't reproduce the issue with the 2 upload controls showing at the same time. I've attached the sample page I used to test your issue. Could you run it and verify that the problem reproduces?
     
    Regards,
    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.
Back to Top