mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-09 15:37:37 +08:00
9925cf288b
* add method parameter to upload component * update documentation * add test Co-authored-by: Noah Potash <noah.potash@outbreaklabs.com>
187 lines
10 KiB
C#
187 lines
10 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
|
|
@using AntDesign.Internal;
|
|
|
|
<span style="@Style" @ref="Ref" class="@ClassMapper.Class @(IsPictureCard? "ant-upload-picture-card-wrapper" : "")"
|
|
@ondragover="@HandleDrag"
|
|
@ondragleave="@HandleDrag"
|
|
@ondrop="@HandleDrag"
|
|
@ondragover:stopPropagation
|
|
@ondragleave:stopPropagation
|
|
@ondrop:stopPropagation>
|
|
@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"
|
|
Method="@Method"
|
|
ShowButton="@ShowButton">
|
|
@ChildContent
|
|
</UploadButton>
|
|
</CascadingValue>
|
|
}
|
|
|
|
@if (ShowUploadList)
|
|
{
|
|
<div class="@_listClassMapper.Class">
|
|
@{
|
|
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";
|
|
}
|
|
@if (OnDownload.HasDelegate)
|
|
{
|
|
<a rel="noopener noreferrer" class="ant-upload-list-item-name" title="@file.FileName" @onclick="() => DownloadFile(file)">@file.FileName</a>
|
|
}
|
|
else
|
|
{
|
|
<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"
|
|
Method="@Method"
|
|
ShowButton="@ShowButton">
|
|
@ChildContent
|
|
</UploadButton>
|
|
</CascadingValue>
|
|
}
|
|
</div>
|
|
}
|
|
</span> |