@page "/example-upload"
@page "/docs/guides/components/upload.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Upload
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Upload</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase file upload with <code>Change</code> event handling, server-side upload via <code>Url</code> property, multiple file selection, programmatic upload triggering with <code>Auto="false"</code> and <code>Upload()</code> method, file filtering using <code>Accept</code> property, additional parameters, progress tracking with <code>Progress</code> event, drag-and-drop support, custom HTTP headers with <code>RadzenUploadHeader</code>, and customizable parameter names.
</RadzenText>

<RadzenText Anchor="example-upload#change" TextStyle="TextStyle.H5" TagName="TagName.H2">
    Upload files
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To get uploaded files handle the <strong>Change</strong> event and use its event arguments.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="UploadChange">
    <UploadChange />
</RadzenExample>
<RadzenText Anchor="example-upload#url" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Upload files to a server
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To upload files to a server, set the <code>Url</code> property of the component. The URL should point to an action method in your server-side code that handles the file upload.
    By default, the upload uses the HTTP <code>POST</code> method and sends files as <code>multipart/form-data</code> (standard form upload). You can change this via the <code>Method</code> property to use a different HTTP method,
    or enable <code>Stream</code> to upload the file's raw data. When <code>Stream</code> is set to <code>true</code>, only single-file upload is supported.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadUrl)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadUrl />
</RadzenExample>
<RadzenText Anchor="example-upload#multiple" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Upload multiple files
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To upload multiple files set the <code>Multiple</code> property of the component to <code>true</code>. 
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadMultiple)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadMultiple />
</RadzenExample>
<RadzenText Anchor="example-upload#from-code" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Trigger upload from code
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To trigger the upload from code set the <code>Auto</code> property of the component to <code>false</code>. The upload can be triggered by calling the <code>Upload()</code> method of the component.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadFromCode)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadFromCode />
</RadzenExample>
<RadzenText Anchor="example-upload#filter" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    File filter
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To filter the files that can be uploaded use the <code>Accept</code> property of the component. The Value should be a comma separated list <RadzenLink Path="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers">unique file type specifiers</RadzenLink>
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadImage)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadImage />
</RadzenExample>
<RadzenText Anchor="example-upload#parameters" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Use parameters
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To send additional parameters with the upload request use the <code>Url</code> property of the component. 
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadParameters)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadParameters />
</RadzenExample>
<RadzenText Anchor="example-upload#progress" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Show upload progress
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    This demo shows how to use the <code>RadzenProgressBar</code> component to show upload progress by handling the <code>Progress</code> event.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadProgress)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadProgress />
</RadzenExample>
<RadzenText Anchor="example-upload#drag-drop" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Drag and drop files to upload
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    This demo shows how to use the <code>RadzenUpload</code> component to allow users to drag and drop files for upload. The <code>ChooseText</code> property is used to set the text displayed when no files are selected.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadDragDrop)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadDragDrop />
</RadzenExample>
<RadzenText Anchor="example-upload#custom-headers" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Send custom HTTP headers
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To send custom HTTP headers with the upload request use <code>RadzenUploadHeader</code>.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadCustomHeaders)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadCustomHeaders />
</RadzenExample>
<RadzenText Anchor="example-upload#parameter-name" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Specify action method parameter name
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To specify the action method parameter name use the <code>ParameterName</code> property of the component. The value should be a string. By default the parameter name is <code>file</code>
    or <code>files</code> if the <code>Multiple</code> property is set to <code>true</code>.
</RadzenText>
<RadzenExample ComponentName="Upload" Example="@nameof(UploadParameterName)" AdditionalSourceCodePages=@(["/demos/Controllers/UploadController.cs"])>
    <UploadParameterName />
</RadzenExample>

<RadzenText Anchor="example-upload#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Upload component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate forward across Upload buttons." },
        new KeyboardShortcut { Key = "Shift + Tab", Action = "Navigate backward across Upload buttons." },
        new KeyboardShortcut { Key = "Enter or Space", Action = "Click the focused Upload button." }
    };
}