RadAsyncUpload doesn't render sometimes

[Aref]

Hi

The upload controls (buttons) don't render sometimes. It happens a couple of times and then works after a while.
I'm using 2012.3.1308.35.
Any idea what the causes may be?

[Shinu]

Hi Aref,

Please have a look at this documentation on RadAsyncUpload buttons visibility issue.

Hope this helps,
Shinu.

[Aref]

Thanks for the quick response.
I'll try that and get back to you.
But, I'm experiencing this issue on all browsers. It is very intermittent.

[Aref]

I've managed to reproduce the problem [which was very difficult]
Please have a look at the page source code [images attached]. The RadAsyncUpload buttons and content is simply missing.
I cleared the cache and it was fine again. Any clue why this happens?

[Hristo Valyavicharski]

Hi Aref,

Try to disable all custom styles that you have on the page and test to see if the issue will disappear. If this suggestion doesn't help, then I will need more detailed information about your case:

• What is the version of Telerik assemblies that you are using?
• Does it happen on all browsers? 
• What is your browser?

• Please paste your code here or include a link from where I can download your project.

This will allow me to debug your code locally and troubleshoot the issue.

Regards,
Hristo Valyavicharski
Telerik

[Cori]

I am experiencing this same issue currently. My RadAsyncUpload control seems to just randomly not render.  As far as I can tell, the control gets rendered to the page after it loads through a WebResource.axd ajax call that returns application/x-silverlight-2 data.  In the instances where the control doesn't render to the page, I am not seeing the WebResource.axd file in my captured network traffic at all.  It's like it just didn't do the callout. (I'm using IE9's developer tools to capture what files get called when a page loads, but I've noticed this happening when I view the page in other browsers as well.)

[Hristo Valyavicharski]

Hi Jason,

We are not aware of such an issue. What is the exact version that you use? Please open a support ticket and attach a runnable sample project, which we could test locally. Also include the exact steps to reproduce the problem.

Regards,
Hristo Valyavicharski
Telerik

[Mark Kucera]

was this issue ever resolved?  I seem to have this happen as well, except for me it's not random.  on one page the asyncupload control works perfectly and on another page i get this exact same issue. 

On the page that is working:

<div class="row" style="float:left;height:100px;" align="left">
    Add your file: <br /><telerik:RadAsyncUpload Width="450" InputSize="36" MaxFileInputsCount="1" EnableEmbeddedSkins="false" Skin="Web20" runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="txt,csv,xls,xlsx" MultipleFileSelection="Disabled"
    MaxFileSize="4194304" OnClientValidationFailed="validationFailed" UploadedFilesRendering="BelowFileInput" PostbackTriggers="lbtnAgree">
    </telerik:RadAsyncUpload>
</div>

correctly renders as:

<div class="row" align="left" style="float:left;height:100px;">
    Add your file…
    <br></br>
    <div id="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1" class="RadAsyncUpload RadUpload RadUpload_Web20" style="width:450px;">
        <input id="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1_ClientState" type="hidden" name="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1_ClientState" autocomplete="off"></input>
        <ul id="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1ListContainer" class="ruInputs">
            <li id="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1row0">
                <span class="ruFileWrap ruStyled">
                    <input id="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1fakeInput0" class="ruFakeInput radPreventDecorate" type="text" tabindex="-1" size="35"></input>
                    <label for="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1fakeInput0" style="display:none"></label>
                    <input class="ruButton ruBrowse" type="button" tabindex="-1" value="Select" style="border: 0px dotted;"></input>
                    <input id="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1file0" class="ruFileInput" type="file" tabindex="0" name="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1file0" size="36"></input>
                    <label for="ctl00_mainContentArea_wucListImport1_RadAsyncUpload1file0" style="display:none"></label>
                </span>
                <div class="ruDropZone"></div>
            </li>
        </ul>
    </div>
</div>

and on the page that isn't working, the exact same code:

<div class="row" style="float:left;height:100px;" align="left">
    Add your file: <br /><telerik:RadAsyncUpload Width="450" InputSize="36" MaxFileInputsCount="1" EnableEmbeddedSkins="false" Skin="Web20" runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="txt,csv,xls,xlsx" MultipleFileSelection="Disabled"
    MaxFileSize="4194304" OnClientValidationFailed="validationFailed" UploadedFilesRendering="BelowFileInput" PostbackTriggers="lnkUploadFile">
    </telerik:RadAsyncUpload>
</div>

renders as:

<div class="row" align="left" style="float:left;height:100px;">
Add your file:
   <br></br>
    <div id="ctl00_mainContentArea_wucCreateEmail1_wucContentUpload1_RadAsyncUpload1" class="RadAsyncUpload RadUpload RadUpload_Web20" style="width:450px;">
        <input id="ctl00_mainContentArea_wucCreateEmail1_wucContentUpload1_RadAsyncUpload1_ClientState" type="hidden" name="ctl00_mainContentArea_wucCreateEmail1_wucContentUpload1_RadAsyncUpload1_ClientState"></input>
    </div>
</div>

Regards,
-Mark

[Mark Kucera]

Sorry, i looked at this for about an hour before i posted this, but i just found my error. Going to update here in case it helps someone else has this issue.  come to find out i'd declared a client side validation method, which i thought was included globally, but it wasn't it was declared at the page level, and i hadn't put the method on my page that wasn't working.  When i added the validation method it worked. I finally found a tiny message in my debugger that said "validationFailed" not found.

Regards,
Mark

[Hristo Valyavicharski]

Hi Mark,

I'm glad to read that you were able to resolve your issue.

Regards,
Hristo Valyavicharski
Telerik

[Jerry]

I had a similar issue. In my case, I had the JavaScript in the user control where I was using the RadAsyncUpload. Running the web app locally on my machine was working fine but on the server the control was not visible or usable. This thread led me to look for any errors and I did find where it was not finding the OnClientFileUploaded javascript function.

 

I moved it to my master page instead of in the user control and it started working normally.

 

[anup]

while page loading, "RadAsyncUpload " control not rendering properly. it is not applying metrotouch css to file upload contorl for mili second.

following are the code information

     <telerik:RadAsyncUpload ID="MyFile1" runat="server" MultipleFileSelection="Disabled" Skin="MetroTouch" EnableViewState="true" MaxFileInputsCount="1"
                                PostbackTriggers="rdbAccreditationCertificateYes,rdbAccreditationCertificateNo,rdbFirewallYes,rdbFirewallNo,rdbIRSYes,rdbIRSNo,rdbYes,rdbNo,Lnkproceed,LnkAddRow,lnkDelete,btnRemove,lnkBack,LnkSaveContinue">
                                <Localization Select="Browse" />
                            </telerik:RadAsyncUpload>

 

Please refer attached file

[Peter Milchev]

Hello Anup,

I have answered your question in the thread you have opened with the same question: while page loading, "RadAsyncUpload " control not rendering properly for millisecond. For convenience, I am also sharing the answer here

The behavior you are observing is called Flash of unstyled content and this is a common scenario especially when the styles are loaded externally and the internet connection is slow.

There are many approaches to deal with this and they depend on the given scenario and requirements of the project. For example, here are a few approaches you can try: 

• Hard-code some initial styles in the <head> tag to style the desired controls until the stylesheets are loaded.
• Implement a "loading panel" with plain CSS, HTML and JS as explained in points 3. and 4. from the Page Transition Animation Code Library project
• Hide the body initially and show it on a convenient event: https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content. 

The last approach is not recommended as this might affect some controls that need their parent to be visible initially so that they can correctly calculate its size. 

If any further questions related to the Flash of unstyled content arise, let us continue the discussion on the other thread.

Regards,
Peter Milchev
Progress Telerik