Easy way to handle non HTML5 browser

[Joshua]

I'm using the example for the asyncUpload and I want to load a standard upload if the browser is incompatable.  I understand this is the place to replace it, but do I have to replace the entire code in this replaceWith() section or is there an easier way...?

(!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                $(".wrapper").replaceWith(
                    $()

This is the sample
<telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        
    <script type="text/javascript">
        var $ = $telerik.$;
        function pageLoad() {
            if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                $(".wrapper").replaceWith(
                    $("<span><strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong></span>"));
            }
        }

        function added(sender, args) {
            if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

                $(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
            }
        }
        
    </script>


Here is the standard upload:
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
        </telerik:RadAsyncUpload>
        <br />
        <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
        
        <div style="position:relative;">
            <table>
                <tr>
                    <td id="controlContainer">
                        <telerik:RadUpload
                            ID="RadUpload1" runat="server"
                            MaxFileInputsCount="5"
                            OverwriteExistingFiles="false" />
                            
                        <telerik:RadProgressArea id="progressArea1" runat="server"/>
                        
                        <asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
                    </td>
                    <td>
                        <div class="smallModule">
                            <div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
                            
                                <asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
                                
                                <asp:Repeater ID="repeaterResults" runat="server" Visible="False">
                                    <HeaderTemplate>
                                        <div class="title">Uploaded files in the target folder:</div>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <%#DataBinder.Eval(Container.DataItem, "FileName")%>
                                        <%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
                                        <br />
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div></div></div></div>
                                </td>
                                </tr>                              
                                </table>
                                </div>
                                </div></table>

[Joshua]

Anybody?  Tech?  I would figure this probably has been asked 100 times.

[Joshua]

This may not be the correct way to handle this, but this is what I did, essentially creating two div's and hiding them based on functionality.

<script type="text/javascript">
        var $ = $telerik.$;
        function pageLoad() {
            if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                $(".wrapper").replaceWith(
                $(""));
            }
        }

        function added(sender, args) {
            if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

                $(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
                $(".nonHTML5").replaceWith(
                $(""));
            }
        }
        
    </script>

    <div class="wrapper">

        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
        </telerik:RadAsyncUpload>
        <br />
        <telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
        </div>
        <div class ="nonHTML5" style="position:relative;">
            <table>
                <tr>
                    <td id="controlContainer">
                        <telerik:RadUpload
                            ID="RadUpload1" runat="server"
                            MaxFileInputsCount="5"
                            OverwriteExistingFiles="false" />
                            
                        <telerik:RadProgressArea id="progressArea1" runat="server"/>
                        
                    </td>
                    <td>
                        <div class="smallModule">
                            <div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
                            
                                <asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
                                
                                <asp:Repeater ID="repeaterResults" runat="server" Visible="False">
                                    <HeaderTemplate>
                                        <div class="title">Uploaded files in the target folder:</div>
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <%#DataBinder.Eval(Container.DataItem, "FileName")%>
                                        <%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
                                        <br />
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div></div></div></div>
                                </td>
                                </tr>                              
                                </table>
                                </div>
                                <asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
                                </td>
                                </tr>

[Peter Filipov]

Hi Joshua,

I have tested your sample code and everything works fine. This is the right approach for your scenario.

All the best,
Peter Filipov
the Telerik team