Add drag'n'drop

This commit is contained in:
Ivan Yaremenchuk 2022-04-04 09:09:15 +02:00
parent 5f449dfb51
commit f64104ac17
3 changed files with 32 additions and 28 deletions

View File

@ -15,6 +15,7 @@
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.2" PrivateAssets="all" />
<PackageReference Include="RestEase" Version="1.5.5" />
<PackageReference Include="Serilog.Sinks.BrowserConsole" Version="1.0.0" />
<PackageReference Include="Toolbelt.Blazor.FileDropZone" Version="1.0.1" />
</ItemGroup>
<ItemGroup>

View File

@ -7,34 +7,36 @@
<SpaceItem Class="drk-full-width">
<Space Direction="DirectionVHType.Horizontal" Class="drk-vertical-space-center">
<SpaceItem>
<Upload Name="file" Class="@ImageClass" ListType="picture-card"
ShowUploadList="false" BeforeAllUploadAsync="BeforeUpload">
@if (AppState?.Storage?.UploadIsInProgress ?? false)
{
<div>
<Icon Spin="true" Type="loading"></Icon>
<div className="ant-upload-text">Uploading...</div>
</div>
}
else if (AppState?.Storage?.LocalImageUrl != null && AppState.Storage.CanPreviewTokenFile)
{
<img src="@AppState?.Storage?.LocalImageUrl" alt="avatar" style="width: 100%"/>
}
else if (AppState?.Storage?.LocalImageUrl != null)
{
<div>
<Icon Type="eye-invisible" Theme="outline"/>
<div className="ant-upload-text">Unable to preview</div>
</div>
}
else
{
<div>
<Icon Type="plus"></Icon>
<div className="ant-upload-text">Upload</div>
</div>
}
</Upload>
<FileDropZone class="drop-zone">
<Upload Name="file" Class="@ImageClass" ListType="picture-card"
ShowUploadList="false" BeforeAllUploadAsync="BeforeUpload">
@if (AppState?.Storage?.UploadIsInProgress ?? false)
{
<div>
<Icon Spin="true" Type="loading"></Icon>
<div className="ant-upload-text">Uploading...</div>
</div>
}
else if (AppState?.Storage?.LocalImageUrl != null && AppState.Storage.CanPreviewTokenFile)
{
<img src="@AppState?.Storage?.LocalImageUrl" alt="avatar" style="width: 100%"/>
}
else if (AppState?.Storage?.LocalImageUrl != null)
{
<div>
<Icon Type="eye-invisible" Theme="outline"/>
<div className="ant-upload-text">Unable to preview</div>
</div>
}
else
{
<div>
<Icon Type="plus"></Icon>
<div className="ant-upload-text">Upload</div>
</div>
}
</Upload>
</FileDropZone>
</SpaceItem>
<SpaceItem Class="drk-grow">
<Space Align="start" Direction="DirectionVHType.Vertical" Class="drk-vertical-space">

View File

@ -11,3 +11,4 @@
@using NftFaucet.Components
@using AntDesign
@using BlazorMonaco
@using Toolbelt.Blazor.FileDropZone