Component Blazor extend InputFile with drag and drop, copy and paste and all the necessary to upload files. Also have a InputFileHandler can be inherit for extent and add more functions like authentication.
$ dotnet add package BlazorBasics.InputFileExtendedExtend the traditional component InputFile with more options like drag and drop, copy and paste. Less coding for all. Oficial web documentation and examples.
Import the name space adding to _Imports.razor this line:
@using BlazorBasics.InputFileExtended
Add into your component:
<InputFileComponent OnChange=LoadFiles />
@code {
private void LoadFiles(FilesUploadEventArgs e)
{
...
}
}
@using BlazorBasics.InputFileExtended
<InputFileComponent Parameters="Parameters" OnChange=LoadFiles />
@code{
BlazorBasics.InputFileExtended.ValueObjects.InputFileParameters Parameters = new BlazorBasics.InputFileExtended.ValueObjects.InputFileParameters()
{
DragAndDropOptions = new BlazorBasics.InputFileExtended.ValueObjects.DragAndDropOptions
{
CanDropFiles = true
}
};
private void LoadFiles(FilesUploadEventArgs e)
{
// ...
}
}
@using BlazorBasics.InputFileExtended
<InputFileComponent Parameters="Parameters" OnChange=LoadFiles />
@code{
BlazorBasics.InputFileExtended.ValueObjects.InputFileParameters Parameters = new BlazorBasics.InputFileExtended.ValueObjects.InputFileParameters()
{
AllowPasteFiles = true
};
private void LoadFiles(FilesUploadEventArgs e)
{
// ...
}
}
@using BlazorBasics.InputFileExtended
<InputFileComponent Parameters="Parameters" />
@code {
BlazorBasics.InputFileExtended.ValueObjects.InputFileParameters Parameters;
Task<bool> UploadFles(IReadOnlyList<BlazorBasics.InputFileExtended.Models.FileUploadContent> files)
{
// process your upload
// ...
await Task.Delay(1);
return true;
}
protected override void OnInitialized()
{
Parameters = new BlazorBasics.InputFileExtended.ValueObjects.InputFileParameters()
{
ButtonOptions = new BlazorBasics.InputFileExtended.ValueObjects.ButtonOptions
{
ButtonShow = true,
CleanOnSuccessUpload = true
}
};
Parameters.ButtonOptions.OnSubmit = UploadFles;
}
}