From f64104ac175d3286a3d575d4ebe0064f7b169027 Mon Sep 17 00:00:00 2001
From: Ivan Yaremenchuk <trooper982@gmail.com>
Date: Mon, 4 Apr 2022 09:09:15 +0200
Subject: [PATCH] Add drag'n'drop

---
 NftFaucet/NftFaucet.csproj      |  1 +
 NftFaucet/Pages/Step1Page.razor | 58 +++++++++++++++++----------------
 NftFaucet/_Imports.razor        |  1 +
 3 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/NftFaucet/NftFaucet.csproj b/NftFaucet/NftFaucet.csproj
index 7467c1e..d69236e 100644
--- a/NftFaucet/NftFaucet.csproj
+++ b/NftFaucet/NftFaucet.csproj
@@ -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>
diff --git a/NftFaucet/Pages/Step1Page.razor b/NftFaucet/Pages/Step1Page.razor
index bc85516..b731b71 100644
--- a/NftFaucet/Pages/Step1Page.razor
+++ b/NftFaucet/Pages/Step1Page.razor
@@ -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">
diff --git a/NftFaucet/_Imports.razor b/NftFaucet/_Imports.razor
index e68c85d..34e4627 100644
--- a/NftFaucet/_Imports.razor
+++ b/NftFaucet/_Imports.razor
@@ -11,3 +11,4 @@
 @using NftFaucet.Components
 @using AntDesign
 @using BlazorMonaco
+@using Toolbelt.Blazor.FileDropZone