diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index 9ea07b157a0..c1b8c47a501 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.7.4</Version>
+    <Version>9.8.0-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
index f803d0d2739..b9b2e874c65 100644
--- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor
@@ -46,11 +46,7 @@
 
 @code {
     RenderFragment RenderAdd =>
-    @<div id="@AddId" class="@GetItemClassString()" style="@ItemStyleString">
-        <div class="@ActionClassString">
-            <span class="upload-item-plus">
-                <i class="@AddIcon"></i>
-            </span>
-        </div>
+    @<div id="@AddId" class="@GetItemClassString("upload-item-plus upload-drop-body btn-browser")" style="@ItemStyleString">
+        <i class="@AddIcon"></i>
     </div>;
 }
diff --git a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs
index 7aca5d0fa1f..53ca10c21f0 100644
--- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs
+++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs
@@ -91,7 +91,8 @@ public partial class AvatarUpload<TValue>
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? GetItemClassString() => CssBuilder.Default("upload-item")
+    private string? GetItemClassString(string? classString = null) => CssBuilder.Default("upload-item")
+        .AddClass(classString)
         .AddClass("is-circle", IsCircle)
         .AddClass("disabled", IsDisabled)
         .Build();
@@ -106,10 +107,6 @@ public partial class AvatarUpload<TValue>
         .AddClass($"--bb-upload-item-border-radius: {BorderRadius};", IsCircle && !string.IsNullOrEmpty(BorderRadius))
         .Build();
 
-    private string? ActionClassString => CssBuilder.Default("upload-item-actions")
-        .AddClass("btn-browser", IsDisabled == false)
-        .Build();
-
     private string? ValidStatusIconString => CssBuilder.Default("valid-icon valid")
         .AddClass(ValidStatusIcon)
         .Build();
diff --git a/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs
index 701efe23ff3..acd69fdc868 100644
--- a/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs
+++ b/src/BootstrapBlazor/Components/Upload/ButtonUpload.razor.cs
@@ -88,7 +88,7 @@ public partial class ButtonUpload<TValue>
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? BrowserButtonClassString => CssBuilder.Default("btn-browser")
+    private string? BrowserButtonClassString => CssBuilder.Default("btn-browser upload-drop-body")
         .AddClass(BrowserButtonClass, !string.IsNullOrEmpty(BrowserButtonClass))
         .Build();
 
diff --git a/src/BootstrapBlazor/Components/Upload/CardUpload.razor b/src/BootstrapBlazor/Components/Upload/CardUpload.razor
index 3f0cbef8246..3aa7988b128 100644
--- a/src/BootstrapBlazor/Components/Upload/CardUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/CardUpload.razor
@@ -4,7 +4,7 @@
 
 @if (IsShowLabel)
 {
-    <BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
+    <BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText"></BootstrapLabel>
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id" data-bb-previewer-id="@PreviewerId">
     <div class="@BodyClassString">
@@ -26,7 +26,7 @@
                     }
                     else
                     {
-                        <FileIcon Extension="@item.GetExtension()" />
+                        <FileIcon Extension="@item.GetExtension()"></FileIcon>
                     }
                 </div>
                 <div class="upload-item-size"><span>@item.GetFileName()</span> (@item.Size.ToFileSizeString())</div>
@@ -77,18 +77,14 @@
     </div>
     @if (ShowPreviewList)
     {
-        <ImagePreviewer Id="@PreviewerId" PreviewList="PreviewList" />
+        <ImagePreviewer Id="@PreviewerId" PreviewList="PreviewList"></ImagePreviewer>
     }
-    <InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange" />
+    <InputFile AdditionalAttributes="@GetUploadAdditionalAttributes()" OnChange="OnFileChange"></InputFile>
 </div>
 
 @code {
     RenderFragment RenderAdd =>
     @<div class="@CardItemClass">
-        <div class="@ActionClassString">
-            <span class="upload-item-plus">
-                <i class="@AddIcon"></i>
-            </span>
-        </div>
+        <i class="@AddIcon"></i>
     </div>;
 }
diff --git a/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs
index c5363e0c09b..576452cc2b6 100644
--- a/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs
+++ b/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs
@@ -34,7 +34,7 @@ public partial class CardUpload<TValue>
 
     private string? GetDeleteButtonDisabledString(UploadFile item) => (!IsDisabled && item.Uploaded) ? null : "disabled";
 
-    private string? CardItemClass => CssBuilder.Default("upload-item")
+    private string? CardItemClass => CssBuilder.Default("upload-item upload-item-plus btn-browser upload-drop-body")
         .AddClass("disabled", IsDisabled)
         .Build();
 
@@ -116,10 +116,6 @@ public partial class CardUpload<TValue>
     [Parameter]
     public List<string>? AllowExtensions { get; set; }
 
-    private string? ActionClassString => CssBuilder.Default("upload-item-actions")
-        .AddClass("btn-browser", IsDisabled == false)
-        .Build();
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/Upload/InputUpload.razor b/src/BootstrapBlazor/Components/Upload/InputUpload.razor
index 3697b11c73e..50798e49d2a 100644
--- a/src/BootstrapBlazor/Components/Upload/InputUpload.razor
+++ b/src/BootstrapBlazor/Components/Upload/InputUpload.razor
@@ -7,7 +7,7 @@
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
-    <div class="input-group">
+    <div class="input-group upload-drop-body">
         <input type="text" class="@InputValueClassString" disabled="@Disabled" readonly
                placeholder="@PlaceHolder" value="@CurrentValueAsString" />
         @if (ShowDeleteButton)
diff --git a/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss b/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss
index 89294fbba09..2a1ef6dc7b3 100644
--- a/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss
+++ b/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss
@@ -93,6 +93,7 @@
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
+    position: relative;
 }
 
 .upload .upload-body.is-avatar .upload-item {
@@ -135,17 +136,18 @@
 }
 
 .upload .upload-body.is-avatar .upload-item .upload-item-actions,
-.upload .upload-body.is-card .upload-item .upload-item-actions > .upload-item-plus {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+.upload .upload-body.is-avatar .upload-item-plus,
+.upload .upload-body.is-card .upload-item-plus {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
+.upload .upload-body.is-avatar .upload-item .upload-item-actions {
+    position: absolute;
+    inset: 0;
+}
+
 .upload .upload-body.is-avatar .upload-item .upload-item-actions i {
     font-size: 1rem;
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/upload.js b/src/BootstrapBlazor/wwwroot/modules/upload.js
index b646000c56d..abf6f2c7d77 100644
--- a/src/BootstrapBlazor/wwwroot/modules/upload.js
+++ b/src/BootstrapBlazor/wwwroot/modules/upload.js
@@ -48,7 +48,8 @@ export function init(id) {
             inputFile.files = fileList
             const event = new Event('change', { bubbles: true })
             inputFile.dispatchEvent(event)
-        } catch (e) {
+        }
+        catch (e) {
             console.error(e)
         }
     })
@@ -112,9 +113,10 @@ export function dispose(id) {
         EventHandler.off(document, 'dragover', preventHandler)
 
         EventHandler.off(el, 'click')
-        EventHandler.off(el, 'drop')
         EventHandler.off(el, 'paste')
-        EventHandler.off(inputFile, 'change')
+
+        EventHandler.off(inputFile, 'change');
+
         EventHandler.off(body, 'dragleave')
         EventHandler.off(body, 'drop')
         EventHandler.off(body, 'dragenter')
diff --git a/test/UnitTest/Components/UploadAvatarTest.cs b/test/UnitTest/Components/UploadAvatarTest.cs
index a456bae0c5e..508f34aaaf5 100644
--- a/test/UnitTest/Components/UploadAvatarTest.cs
+++ b/test/UnitTest/Components/UploadAvatarTest.cs
@@ -80,12 +80,11 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha
         var button = cut.Find(".upload-item-delete");
         await cut.InvokeAsync(() => button.Click());
 
-        cut.Contains("upload-item-actions btn-browser");
+        cut.Contains("btn-browser");
         cut.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.IsDisabled, true);
         });
-        cut.Contains("upload-item-actions");
 
         // IsUploadButtonAtFirst
         cut.SetParametersAndRender(pb =>