BitFileUploadDemo.razor

@page "/components/fileupload"
@page "/components/file-upload"

<PageOutlet Url="components/fileupload"
            Title="FileUpload"
            Description="fileupload component of the bit BlazorUI components" />

<DemoPage Name="FileUpload"
          Description="BitFileUpload component wraps the HTML file input element(s) and uploads them to a given URL. The files can be removed by specifying the URL they have been uploaded. Moreover, it provides several other options including single or multiple or automatic file uploading. By automatic, it means the files can be automatically uploaded after being selected. It is possible to specify a maximum size for each file if need be. Additionally, by specifying file extensions, the files can be restricted to certain types."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          PublicMembers="componentPublicMembers"
          GitHubUrl="Inputs/FileUpload/BitFileUpload.razor"
          GitHubDemoUrl="Inputs/FileUpload/BitFileUploadDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
        <div>Files can be uploaded after selecting them.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" />
    </DemoExample>

    <DemoExample Title="Multiple" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
        <div>Multiple files can be selected.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple />
    </DemoExample>

    <DemoExample Title="AutoUpload" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
        <div>The BitFileUpload can automatically starts the upload after file selection is done.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" AutoUpload />
    </DemoExample>

    <DemoExample Title="AutoReset" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
        <div>Automatically resets the BitFileUpload state each time before browsing files.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" AutoReset />
    </DemoExample>

    <DemoExample Title="Append" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>When selected, additional files will be appended to the existing list without overwriting previous selections.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Append />
    </DemoExample>

    <DemoExample Title="MaxSize" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>The file size can be limited using the MaxSize parameter.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1" />
    </DemoExample>

    <DemoExample Title="AllowedExtensions" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div>Limits file browsing by the provided file extensions.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
                       AllowedExtensions="@(new List<string> { ".gif",".jpg",".mp4" })" />
    </DemoExample>

    <DemoExample Title="Removable" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
        <div>Enables the remove functionality of the BitFileUpload.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
                       ShowRemoveButton RemoveUrl="@RemoveUrl" />
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div>Different events can be configured for the upload process.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
                       OnAllUploadsComplete="@(() => onAllUploadsCompleteText = "All File Uploaded")"
                       OnUploading="@(info => info.HttpHeaders = new Dictionary<string, string> { {"key1", "value1"} })" />
        <div>@onAllUploadsCompleteText</div>
    </DemoExample>

    <DemoExample Title="Http requests" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
        <div>The http requests of Upload and Remove can be customized with http headers and query strings.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
                       UploadRequestQueryStrings="@(new Dictionary<string, string>{ {"qs1", "qsValue1" } })"
                       UploadRequestHttpHeaders="@(new Dictionary<string, string>{ {"header1", "value1" } })"
                       RemoveRequestQueryStrings="@(new Dictionary<string, string>{ {"qs2", "qsValue2" } })"
                       RemoveRequestHttpHeaders="@(new Dictionary<string, string>{ {"header2", "value2" } })" />
    </DemoExample>

    <DemoExample Title="Chunked" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Files can be uploaded in chunks.</div><br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload />
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
        <div>The BitFileUpload can be further customized using templates.</div><br />
        <BitFileUpload @ref="bitFileUpload" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl">
            <LabelTemplate>
                @if (FileUploadIsEmpty())
                {
                    <div class="browse-file" @onclick="() => bitFileUpload.Browse()">
                        <div class="browse-file-header">
                            <i class="bit-icon bit-icon--CloudUpload" />
                            <div>
                                Drag and drop or
                            </div>
                            <div>
                                <strong>
                                    Browse file
                                </strong>
                            </div>
                        </div>

                        <div class="browse-file-footer">
                            <div>
                                Max file size: 2 MB
                            </div>
                            <div>
                                Supported file types: jpg, jpeg, png, bpm
                            </div>
                        </div>
                    </div>
                }
            </LabelTemplate>
            <FileViewTemplate Context="file">
                @if (file.Status != BitFileUploadStatus.Removed)
                {
                    <div class="file-list">
                        <div class="file-info">
                            <div class="file-info-ico">
                                <i class="bit-icon bit-icon--FileImage" />
                            </div>
                            <div class="file-info-data">
                                <div class="file-info-title">
                                    <div class="file-info-name">@file.Name</div>
                                    <div class="file-info-btns">
                                        <label for="@bitFileUpload.InputId"><i class="bit-icon bit-icon--CloudUpload upload-ico" /></label>
                                        <i class="bit-icon bit-icon--ChromeClose remove-ico" @onclick="HandleRemoveOnClick" />
                                    </div>
                                </div>
                                @if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
                                {
                                    var fileUploadPercent = GetFileUploadPercent(file);
                                    <div class="file-info-subtitle">@GetFileUploadSize(file) - @fileUploadPercent%</div>
                                    <div class="file-info-progressbar-container">
                                        <div class="file-info-progressbar" role="progressbar" style="width:@fileUploadPercent%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="@fileUploadPercent"></div>
                                    </div>
                                }
                                else
                                {
                                    <div class="@(file.Status == BitFileUploadStatus.Completed ? "file-info-s-msg" : "file-info-e-msg")">@GetUploadMessageStr(file)</div>
                                }
                            </div>
                        </div>

                        <div class="file-list-footer">
                            <div>
                                Max file size: 2 MB
                            </div>
                            <div>
                                Supported file types: jpg, jpeg, png, bpm
                            </div>
                        </div>
                    </div>
                }
            </FileViewTemplate>
        </BitFileUpload>
        <br />
        <BitButton OnClick="HandleUploadOnClick">Upload</BitButton>
    </DemoExample>

    <DemoExample Title="Public API" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
        <div>Use a custom method for the open file selection dialog.</div><br />
        <BitFileUpload @ref="bitFileUploadWithBrowseFile"
                       Label=""
                       UploadUrl="@UploadUrl"
                       RemoveUrl="@RemoveUrl" />
        <br />
        <BitButton OnClick="HandleBrowseFileOnClick">Browse file</BitButton>
    </DemoExample>

    <DemoExample Title="External Icons" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
        <div>
            Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>UploadIcon</b>, 
            <b>PauseIcon</b>, <b>CancelIcon</b>, and <b>RemoveIcon</b> parameters (<BitLink Href="#bit-icon-info">BitIconInfo</BitLink>).
        </div>

        <br />
        <br />

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

        <div>FontAwesome:</div>
        <br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
                       UploadIcon="@("fa-solid fa-upload")"
                       PauseIcon="@("fa-solid fa-pause")"
                       CancelIcon="@("fa-solid fa-xmark")"
                       RemoveIcon="@("fa-solid fa-trash")" />

        <br /><br />

        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
                       UploadIcon="@BitIconInfo.Fa("solid cloud-arrow-up")"
                       PauseIcon="@BitIconInfo.Fa("solid circle-pause")"
                       CancelIcon="@BitIconInfo.Fa("solid circle-xmark")"
                       RemoveIcon="@BitIconInfo.Fa("solid trash-can")" />

        <br /><br /><br />

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

        <div>Bootstrap:</div>
        <br />
        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
                       UploadIcon="@("bi bi-cloud-upload")"
                       PauseIcon="@("bi bi-pause-circle")"
                       CancelIcon="@("bi bi-x-circle")"
                       RemoveIcon="@("bi bi-trash")" />

        <br /><br />

        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
                       UploadIcon="@BitIconInfo.Bi("cloud-arrow-up")"
                       PauseIcon="@BitIconInfo.Bi("pause-circle")"
                       CancelIcon="@BitIconInfo.Bi("x-circle")"
                       RemoveIcon="@BitIconInfo.Bi("trash")" />
    </DemoExample>

</DemoPage>