ant-design-blazor/components/upload/Upload.razor
Meeleem bd9d06b7be fix(module: upload) : upload crush in firefox (#296)
* fix (module: upload): firefox upload

* fix (module: upload): firefox upload

* fix(module: upload): button ref

Co-authored-by: ElderJames <shunjiey@hotmail.com>
2020-07-02 14:08:51 +08:00

88 lines
3.2 KiB
C#

@namespace AntDesign
@inherits AntDomComponentBase
<div class="ant-upload ant-upload-select ant-upload-select-text">
<input type="file" @ref="_file" @onchange="FileNameChanged" accept="@Accept" style="display: none;" id="@_fileId" />
<span class="ant-upload" @ref="_btn" data-fileid="@_fileId">
@ChildContent
</span>
</div>
<div class="ant-upload-list ant-upload-list-text">
@foreach (var file in FileList)
{
var tips = string.Empty;
var stateClass = string.Empty;
switch (file.State)
{
case UploadState.Uploading:
tips = "上传中";
break;
case UploadState.Fail:
tips = !string.IsNullOrWhiteSpace(file.Response) ? file.Response : "上传失败";
stateClass = "ant-upload-list-item-error";
break;
case UploadState.Success:
tips = file.FileName;
stateClass = "ant-upload-list-item-done";
break;
}
<Tooltip Title="tips" Style=" display: block;">
<div class="ant-upload-list-item @stateClass ant-upload-list-item-list-type-text">
<div class="ant-upload-list-item-info">
<span>
<div class="ant-upload-text-icon">
@if (file.State == UploadState.Uploading)
{
<Icon Type="loading"></Icon>
}
else
{
<Icon Type="paper-clip"></Icon>
}
</div>
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1">
@if (file.State == UploadState.Uploading || file.State == UploadState.Fail)
{
@file.FileName
}
else
{
<a href="@file.Url">@file.FileName</a>
}
</span>
<span class="ant-upload-list-item-card-actions">
@if (file.State != UploadState.Uploading)
{
<Button OnClick="()=> { FileList.Remove(file); StateHasChanged(); }"
Class="ant-btn ant-upload-list-item-card-actions-btn ant-btn-text ant-btn-sm ant-btn-icon-only">
<Icon Type="delete"></Icon>
</Button>
}
</span>
</span>
@if (file.State == UploadState.Uploading)
{
<div class="ant-upload-list-item-progress">
<Progress Percent="file.Progress" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
</div>
}
</div>
</div>
</Tooltip>
}
</div>