I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project.
Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the file manager.
The issue seems to be related to the fact that the actual drag and drop zone is set to position: absolute none.
Is there a solution to this problem?
This is how the scenario appears - it's impossible to click on the remove button as the file manager pops up instead.
https://i.sstatic.net/HjGZF.png
CSS:
.drag-drop-zone {
display: flex;
align-items: center;
justify-content: center;
transition: all .4s;
/* min-height: 400px;
*/ border: 3px dotted;
min-height: 100px;
border: 2px dashed rgb(0, 135, 247);
}
.drag-drop-input {
position: absolute;
width: 100%;
height: 90%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.drag-enter {
box-shadow: var(--mud-elevation-10);
}
.list {
padding: 2em;
min-width: 100%;
}
Razor
<MudList Style="padding:2em;width:100%;" Dense="true">
@foreach (var file in fileNames)
{
<MudListItem @key="@file">
<MudChip Color="Color.Dark"
Style="width:60px; overflow:hidden;"
Text="@(file.Split(".").Last())" />
@file <MudButton Color="Color.Error" OnClick="() => Remove(file)" Style="position:unset;">Remove</MudButton>
</MudListItem>}
Remove method:
void Remove(string file)
{
var ret = fileNames.FirstOrDefault(x => x.Contains(file));
if (ret != null)
{
fileNames.Remove(ret);
}
}