InputFile

The FluentInputFile wraps the native Blazor InputFile component and extends it with drag/drop zone support. See the examples below for some different ways on how to use this component.

Customization: You can localize this component by customizing the content of ChildContent, but also the content of the progress area via the ProgressTemplate attribute. The default progress area displays Loading, Completed or Canceled labels via static variables FluentInputFile.ResourceLoadingXXX. These can be accessed to globally adapt the default display if you wish.

note: This component is not yet fully compatible with accessibility.

Examples

Default

By default this component will use the SaveToTemporaryFolder mode which creates a local file.

Warning: This might not always be possible depending on the user rights on the host. You may need to change the InputFileMode depending on your use case.
Example
Drag files here you wish to upload, or for them*.
Maximum of 4 files allowed.
Download: 

Manual upload

Example

Upload files
Download: 

Manual upload with loading indicator

Example

Upload files
Download: 

Mode = InputFileMode.Buffer

Using the Buffer mode will load the entire file into memory during uploading.

This mode is recommended when you cannot store local files and you are working with small files and have enough memory available.

Example

Upload files Cancel
Download: 

Mode = InputFileMode.Stream

The Stream mode gives you more control of the uploading process to save memory. In order for it to work you will need to implement the handling for the stream on your own.

This mode is recommended when you want to upload large files which you do not want to hold entirely in memory.

Warning: Remember to always dispose each stream to prevent memory leaks!
Example

Upload files
Download: 

Disabled Component

Example
This component is disabled. You cannot drag files here, or for them.
Download: 

Documentation

FluentInputFile Class

Parameters

Name
Type
Default
Description
Acceptstring
Gets or sets the filter for what file types the user can pick from the file input dialog box.
Example: '.gif, .jpg, .png, .doc', 'audio/*', 'video/*', 'image/*'
See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
for more information.
AnchorIdstring
Gets or sets the identifier of the source component clickable by the end user.
BufferSizeuint
10240
Gets or sets the sze of buffer to read bytes from uploaded file (in bytes).
Default value is 10 KiB.
ChildContentRenderFragment?
Gets or sets the child content of the component.
Disabledbool
False
Disables the form control, ensuring it doesn't participate in form submission.
DragDropZoneVisiblebool
True
Gets or sets a value indicating whether the Drag/Drop zone is visible.
Default is true.
MaximumFileCountint
10
To select multiple files, set the maximum number of files allowed to be uploaded.
Default value is 10.
MaximumFileSizelong
10485760
Gets or sets the maximum size of a file to be uploaded (in bytes).
Default value is 10 MiB.
ModeInputFileMode
SaveToTemporaryFolder
Gets or sets the type of file reading.
For SaveToTemporaryFolder, use FluentInputFileEventArgs.LocalFile to retrieve the file.
For Buffer, use FluentInputFileEventArgs.Buffer to retrieve bytes.
For Stream, use FluentInputFileEventArgs.Stream to have full control over retrieving the file.
Multiplebool
False
To enable multiple file selection and upload, set the Multiple property to true.
Set FluentInputFile.MaximumFileCount to change the number of allowed files.
ProgressPercentint
0
Gets or sets the current global value of the percentage of a current upload.
ProgressTemplateRenderFragment<ProgressFileDetails>?
Gets or sets the progress content of the component.
ProgressTitlestring
Gets the current label display when an upload is in progress.

EventCallbacks

Name
Type
Description
OnCompletedEventCallback<IEnumerable<FluentInputFileEventArgs>>
Raise when all files are completely uploaded.
OnFileCountExceededEventCallback<int>
Raised when the FluentInputFile.MaximumFileCount is exceeded.
The return parameter specifies the total number of files that were attempted for upload.
OnFileErrorEventCallback<FluentInputFileEventArgs>
Raise when a file raised an error. Not yet used.
OnFileUploadedEventCallback<FluentInputFileEventArgs>
Raise when a file is completely uploaded.
OnInputFileChangeEventCallback<InputFileChangeEventArgs>
Use the native event raised by the InputFile component.
If you use this event, the FluentInputFile.OnFileUploaded will never be raised.
OnProgressChangeEventCallback<FluentInputFileEventArgs>
Raise when a progression step is updated.
You can use FluentInputFile.ProgressPercent and FluentInputFile.ProgressTitle to have more detail on the progression.
ProgressPercentChangedEventCallback<int>
Gets or sets a callback that updates the FluentInputFile.ProgressPercent.

Methods

Name
Parameters
Type
Description
DisposeAsyncValueTask
ShowFilesDialogAsyncTask
Open the dialog-box to select files.
Use FluentInputFile.AnchorId instead to specify the ID of the button (for example) on which the user should click.
⚠️ This method doesn't work on Safari and iOS.

Known Issues

Starting with .NET 6, the InputFile component does not work in Server-Side Blazor applications using Autofac IoC containers. This issue is being tracked here: aspnetcore#38842

Enable HubOptions DisableImplicitFromServicesParameters in program/startup to workaround this issue. 


    builder.Services
        .AddServerSideBlazor()
        .AddHubOptions(opt =>
        {
            opt.DisableImplicitFromServicesParameters = true;
        });
SaveToTemporaryFolder
Buffer
Stream
An error has occurred. This application may no longer respond until reloaded. Reload 🗙