<%@ Page Language="c#" %>
<%@ Register Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" TagPrefix="CuteWebUI" %>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head runat="server">
    <title>Your Own Upload Button - v4 compatibility</title>
    <link rel="stylesheet" href="demo.css" type="text/css" />

    <script runat="server">
        void InsertMsg(string msg)
        {
            ListBoxEvents.Items.Insert(0, msg);
            ListBoxEvents.SelectedIndex = 0;
        }

        void ButtonPostBack_Click(object sender, EventArgs e)
        {
            InsertMsg("You clicked a PostBack Button.");
        }

        void Uploader_FileUploaded(object sender, UploaderEventArgs args)
        {
            InsertMsg("File uploaded! " + args.FileName + ", " + args.FileSize + " bytes.");
        }
    </script>

    <style type="text/css">
        .my-upload-btn {
            display: inline-block;
            padding: 10px 22px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, #0891b2, #6366f1);
            color: #fff;
            font: 600 15px "Segoe UI", system-ui, sans-serif;
            cursor: pointer;
        }
        .my-upload-btn:hover { filter: brightness(1.08); }
    </style>
</head>
<body>
    <form id="Form1" method="post" runat="server">
        <div class="content">
            <a class="backlink" href="Default.aspx">&#8592; v4 compatibility demos</a>
            <h2>Your Own Upload Button</h2>
            <p>Point <code>InsertButtonID</code> at any element you render yourself and it becomes
                the browse button &mdash; the control's built-in button is hidden.</p>

            <div class="note">
                <code>InsertButtonID</code> stored to ViewState and was never read before 5.3.9,
                so a v4 page with a styled browse button silently got the built-in one instead and
                its own button did nothing. It now binds to the engine's <code>browseButton</code>.
            </div>

            <div class="panel">
                <button type="button" id="Uploader1Insert" class="my-upload-btn">Choose a file&hellip;</button>

                <CuteWebUI:Uploader runat="server" ID="Uploader1"
                    InsertButtonID="Uploader1Insert"
                    OnFileUploaded="Uploader_FileUploaded">
                    <ValidateOption MaxSizeKB="10240" />
                </CuteWebUI:Uploader>
            </div>

            <div class="panel">
                <p>Server Trace:</p>
                <asp:ListBox runat="server" ID="ListBoxEvents" />
                <p>
                    <asp:Button ID="ButtonPostBack" Text="This is a PostBack button" runat="server"
                        OnClick="ButtonPostBack_Click" />
                </p>
            </div>
        </div>
    </form>
</body>
</html>
