Initial commit - Media.RCL
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
|
||||
<div class="relative border-2 border-dashed border-base-300 rounded-lg text-center bg-base-100 cursor-pointer hover:bg-base-200 hover:border-primary transition-all flex items-center justify-center
|
||||
@(_isDragOver ? "border-primary bg-blue-50" : "")
|
||||
@(CompactMode ? "h-full w-full p-2" : "p-8")" @ondragenter="HandleDragEnter" @ondragleave="HandleDragLeave"
|
||||
@ondragover="HandleDragOver" @ondrop="HandleDrop">
|
||||
|
||||
<InputFile OnChange="HandleInputFileChange" multiple accept="image/*,video/*"
|
||||
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />
|
||||
|
||||
<div class="pointer-events-none grid grid-cols-6 gap-2">
|
||||
@if (CompactMode)
|
||||
{
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-base-content/50" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<span class="text-xs font-bold text-base-content/60 mt-1">Add Media</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<i class="icon-upload text-4xl mb-2 text-base-content/50"></i>
|
||||
<p class="font-bold text-base-content">Click to upload <span class="font-normal">or drag and drop</span></p>
|
||||
<span class="text-sm text-base-content/60 mt-1">SVG, PNG, JPG or GIF (max. 800x400px)</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback<InputFileChangeEventArgs> OnFileDropped { get; set; }
|
||||
[Parameter] public bool CompactMode { get; set; }
|
||||
|
||||
private bool _isDragOver = false;
|
||||
|
||||
private void HandleDragEnter() => _isDragOver = true;
|
||||
private void HandleDragLeave() => _isDragOver = false;
|
||||
private void HandleDragOver(DragEventArgs e) { }
|
||||
|
||||
private async Task HandleDrop(DragEventArgs e)
|
||||
{
|
||||
_isDragOver = false;
|
||||
}
|
||||
|
||||
private async Task HandleInputFileChange(InputFileChangeEventArgs e)
|
||||
{
|
||||
await OnFileDropped.InvokeAsync(e);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user