Easy way to handle non HTML5 browser

4 posts, 0 answers
  1. Joshua
    Joshua avatar
    7 posts
    Member since:
    Oct 2011

    Posted 06 Dec 2011 Link to this post

    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>
  2. Joshua
    Joshua avatar
    7 posts
    Member since:
    Oct 2011

    Posted 07 Dec 2011 Link to this post

    Anybody?  Tech?  I would figure this probably has been asked 100 times.
  3. Joshua
    Joshua avatar
    7 posts
    Member since:
    Oct 2011

    Posted 07 Dec 2011 Link to this post

    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>
  4. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 09 Dec 2011 Link to this post

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