mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-15 17:31:42 +08:00
19e0f61961
* chore: add GitHub Actions for auto preview (#1205) * chore: add github actions for auto preview * fix setup job * chore: add GitHub Actions for auto preview (#1205) * fix(module:upload): file list update * fix(module:upload): typed args for file upload * fix(module:upload): delete button remove from picture-card Co-authored-by: James Yeung <shunjiey@hotmail.com>
174 lines
9.5 KiB
C#
174 lines
9.5 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
|
|
@using AntDesign.Internal;
|
|
|
|
<span class="@ClassMapper.Class @(IsPictureCard? "ant-upload-picture-card-wrapper" : "")" style="@Style" @ref="Ref">
|
|
@if (!IsPictureCard || !ShowUploadList)
|
|
{
|
|
<CascadingValue Value="this" IsFixed>
|
|
<UploadButton Action="@Action"
|
|
Accept="@Accept"
|
|
ListType="@ListType"
|
|
Name="@Name"
|
|
Directory="@Directory"
|
|
Multiple="@Multiple"
|
|
Data="@Data"
|
|
Headers="@Headers"
|
|
Disabled="Disabled"
|
|
ShowButton="@ShowButton">
|
|
@ChildContent
|
|
</UploadButton>
|
|
</CascadingValue>
|
|
}
|
|
|
|
@if (ShowUploadList)
|
|
{
|
|
<div class="ant-upload-list ant-upload-list-@ListType">
|
|
@{
|
|
var containerClass = ListType switch
|
|
{
|
|
"picture-card" => "ant-upload-list-picture-card-container",
|
|
"text" => "ant-upload-list-text-container",
|
|
"picture" => "ant-upload-list-picture-container",
|
|
_ => ""
|
|
};
|
|
|
|
}
|
|
|
|
@foreach (var file in FileList)
|
|
{
|
|
var tips = string.Empty;
|
|
var stateClass = string.Empty;
|
|
string picture = "";
|
|
|
|
switch (file.State)
|
|
{
|
|
case UploadState.Uploading:
|
|
tips = Locale.Uploading;
|
|
break;
|
|
case UploadState.Fail:
|
|
tips = !string.IsNullOrWhiteSpace(file.Response) ? file.Response : Locale.UploadError;
|
|
stateClass = "ant-upload-list-item-error";
|
|
break;
|
|
case UploadState.Success:
|
|
tips = file.FileName;
|
|
stateClass = "ant-upload-list-item-done";
|
|
break;
|
|
}
|
|
|
|
<Tooltip Title="tips" Disabled="file.State != UploadState.Fail">
|
|
<Unbound>
|
|
<div Class="@containerClass" Style="@(IsPictureCard ? "" : "display: list-item;")">
|
|
@if (IsPictureCard && file.State == UploadState.Uploading)
|
|
{
|
|
<div class="ant-upload-list-item ant-upload-list-item-uploading ant-upload-list-item-list-type-picture-card" @ref="@context.Current">
|
|
<div class="ant-upload-list-item-info">
|
|
<div class="ant-upload-list-item-thumbnail">@Locale.Uploading</div>
|
|
<span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="@file.FileName">
|
|
@file.FileName
|
|
</span>
|
|
</div>
|
|
<div class="ant-upload-list-item-progress">
|
|
<Progress Percent="file.Percent" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="ant-upload-list-item @stateClass ant-upload-list-item-list-type-@ListType" @ref="@context.Current">
|
|
<div class="ant-upload-list-item-info">
|
|
<span class="ant-upload-span">
|
|
@if (IsText)
|
|
{
|
|
<div class="ant-upload-text-icon">
|
|
@if (file.State == UploadState.Uploading)
|
|
{
|
|
<Icon Type="loading" />
|
|
}
|
|
else
|
|
{
|
|
<Icon Type="paper-clip" />
|
|
}
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
if (file.State == UploadState.Success)
|
|
{
|
|
<a class="ant-upload-list-item-thumbnail" href="@file.Url" target="_blank" rel="noopener noreferrer">
|
|
@if (file.IsPicture())
|
|
{
|
|
<img src="@(file.ObjectURL ?? file.Url)" alt="@file.FileName" class="ant-upload-list-item-image" />
|
|
}
|
|
else
|
|
{
|
|
<Icon Type="file" />
|
|
}
|
|
</a>
|
|
}
|
|
else
|
|
{
|
|
<div class="ant-upload-list-item-thumbnail ant-upload-list-item-file">
|
|
<Icon Type="picture" />
|
|
</div>
|
|
}
|
|
picture = "picture";
|
|
}
|
|
<a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" title="@file.FileName" href="@file.Url">@file.FileName</a>
|
|
@if (!IsPictureCard)
|
|
{
|
|
<span class="ant-upload-list-item-card-actions @picture">
|
|
<button title="@Locale.RemoveFile" type="button" class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" @onclick="() => RemoveFile(file)" disabled="@Disabled">
|
|
<Icon Type="delete" />
|
|
</button>
|
|
</span>
|
|
}
|
|
</span>
|
|
</div>
|
|
@if (IsPictureCard)
|
|
{
|
|
<span class="ant-upload-list-item-actions">
|
|
<a href="@(OnPreview.HasDelegate ? null : file.Url)" target="_blank" rel="noopener noreferrer" title="@Locale.PreviewFile" @onclick="() => PreviewFile(file)" style="@(file.State==UploadState.Fail?"pointer-events: none; opacity: 0.5;":"")">
|
|
<Icon Type="eye" />
|
|
</a>
|
|
<button title="@Locale.RemoveFile" type="button" class="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" @onclick="() => RemoveFile(file)" disabled="@Disabled">
|
|
<Icon Type="delete" />
|
|
</button>
|
|
</span>
|
|
}
|
|
@if (file.State == UploadState.Uploading)
|
|
{
|
|
<div class="ant-upload-list-item-progress">
|
|
<Progress Percent="file.Percent" StrokeWidth="2" Type="ProgressType.Line" ShowInfo="false"></Progress>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</Unbound>
|
|
</Tooltip>
|
|
}
|
|
|
|
@if (IsPictureCard)
|
|
{
|
|
<CascadingValue Value="this" IsFixed>
|
|
<UploadButton Action="@Action"
|
|
Accept="@Accept"
|
|
ListType="@ListType"
|
|
Name="@Name"
|
|
Directory="@Directory"
|
|
Multiple="@Multiple"
|
|
Data="@Data"
|
|
Headers="@Headers"
|
|
Disabled="Disabled"
|
|
ShowButton="@ShowButton">
|
|
@ChildContent
|
|
</UploadButton>
|
|
</CascadingValue>
|
|
}
|
|
</div>
|
|
}
|
|
</span>
|
|
|