<%@ Page Title="Upload with Form" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<script runat="server">
    protected void Uploader1_FileUploaded(object sender, AjaxUploader.Events.FileUploadedEventArgs e)
    {
        var destinationFolder = Server.MapPath("~/App_Data/DemoSaves");
        System.IO.Directory.CreateDirectory(destinationFolder);

        var extension = System.IO.Path.GetExtension(e.FileName ?? string.Empty);
        var savedName = System.Guid.NewGuid().ToString("N") + extension;
        new AjaxUploader.Services.UploadService().CopyFile(
            e.FileGuid,
            System.IO.Path.Combine(destinationFolder, savedName));

        lblStatus.Text = "Form submitted and " + Server.HtmlEncode(e.FileName)
            + " was saved to App_Data/DemoSaves/" + savedName + ".";
        lblStatus.CssClass = "alert alert-success d-block mt-3";
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (Uploader1.UploadedFileGuids.Count == 0)
        {
            lblStatus.Text = "Select and finish uploading a photo before submitting the form.";
            lblStatus.CssClass = "alert alert-warning d-block mt-3";
        }
    }
</script>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Upload with Form - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">File Upload within a Form</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">File Upload within a Form</div> <div class="demo-card-body"> <p class="demo-description"> Embed the uploader inside a Web Forms page with other controls. Files upload independently
 via AJAX while the form collects additional data through postback.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a photo field inside a normal form - <code>.jpg/.png</code> up to 2&nbsp;MB. The upload happens out of band and the form posts its own values separately.</div> <div class="mb-3"> <label for="txtName" class="form-label">Name</label> <asp:TextBox ID="txtName" runat="server" ClientIDMode="Static" CssClass="form-control" placeholder="Enter your name" /> </div> <div class="mb-3"> <label for="ddlCategory" class="form-label">Category</label> <asp:DropDownList ID="ddlCategory" runat="server" ClientIDMode="Static" CssClass="form-select"> <asp:ListItem Text="-- Select --" Value="" /> <asp:ListItem Text="Documents" Value="documents" /> <asp:ListItem Text="Images" Value="images" /> <asp:ListItem Text="Other" Value="other" /> </asp:DropDownList> </div> <div class="mb-3"> <div class="form-label">Profile Photo</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowedExtensions=".jpg,.png"
 MaxFileSize="2MB"
 ButtonText="Choose Photo"
 OnFileUploaded="Uploader1_FileUploaded"
 ShowProgress="true" /> </div> <asp:Button ID="btnSubmit" runat="server" Text="Submit Form" CssClass="btn btn-primary" OnClick="btnSubmit_Click" /> <asp:Label ID="lblStatus" runat="server" CssClass="d-none" role="status" /> <div class="code-panel"> <pre><code>&lt;asp:TextBox ID="txtName" runat="server" CssClass="form-control" /&gt;

&lt;asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select"&gt;
 &lt;asp:ListItem Text="Documents" Value="documents" /&gt;
 &lt;asp:ListItem Text="Images" Value="images" /&gt;
&lt;/asp:DropDownList&gt;

&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowedExtensions=".jpg,.png"
 MaxFileSize="2MB"
 ButtonText="Choose Photo"
 OnFileUploaded="Uploader1_FileUploaded"
 ShowProgress="true" /&gt;

&lt;asp:Button ID="btnSubmit" runat="server" Text="Submit Form"
 CssClass="btn btn-primary" OnClick="btnSubmit_Click" /&gt;

protected void Uploader1_FileUploaded(object sender,
    AjaxUploader.Events.FileUploadedEventArgs e)
{
    new AjaxUploader.Services.UploadService()
        .CopyFile(e.FileGuid, Server.MapPath("~/App_Data/DemoSaves/")
            + Guid.NewGuid().ToString("N") + Path.GetExtension(e.FileName));
}</code></pre> </div> </div>
</div> 
</asp:Content>
