File Upload within a Form

Demo uploads land in a temporary store and are swept after 60 minutes. To keep files, handle FileUploaded — see Single File for the complete save pattern.

Embed the uploader inside a Web Forms page with other controls. Files upload independently via AJAX while the form collects additional data through postback.

What you should see: a photo field inside a normal form - .jpg/.png up to 2 MB. The upload happens out of band and the form posts its own values separately.

Name

Category

Profile Photo

Drag & drop files here, or paste from clipboard

<asp:TextBox ID="txtName" runat="server" CssClass="form-control" />

<asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select">
 <asp:ListItem Text="Documents" Value="documents" />
 <asp:ListItem Text="Images" Value="images" />
</asp:DropDownList>

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

<asp:Button ID="btnSubmit" runat="server" Text="Submit Form"
 CssClass="btn btn-primary" OnClick="btnSubmit_Click" />

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));
}