Toolbelt.Blazor.FileDropZone 3.0.0

.NET 6.0 This package targets .NET 6.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Toolbelt.Blazor.FileDropZone --version 3.0.0                

                    
                

            
NuGet\Install-Package Toolbelt.Blazor.FileDropZone -Version 3.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Toolbelt.Blazor.FileDropZone" Version="3.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Toolbelt.Blazor.FileDropZone --version 3.0.0                

                    
                

            
#r "nuget: Toolbelt.Blazor.FileDropZone, 3.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install Toolbelt.Blazor.FileDropZone as a Cake Addin
#addin nuget:?package=Toolbelt.Blazor.FileDropZone&version=3.0.0

// Install Toolbelt.Blazor.FileDropZone as a Cake Tool
#tool nuget:?package=Toolbelt.Blazor.FileDropZone&version=3.0.0

Blazor File Drop Zone NuGet Package

Summary

Surround an <input type=file> element by this <FileDropZone> Blazor component to making a zone that accepts drag and drops files.

fig.1

Usage

Step 1. Add the NuGet package of this Blazor component to your Blazor app project.

> dotnet add package Toolbelt.Blazor.FileDropZone

Step 2. Surround <InputFile> component by the <FileDropZone> component.

Before:



<InputFile OnChange="OnInputFileChange" />

After:



@using Toolbelt.Blazor.FileDropZone
...
<FileDropZone class="drop-zone">

  <InputFile OnChange="OnInputFileChange" />

</FileDropZone>

Step 3. Styling the <FileDropZone> component as you want to see.

[Tips]

The <FileDropZone> component will render just a single & plain <div> element outside of child content.

That means the <FileDropZone> component doesn't provide any UI styles.

Instead, <FileDropZone> the component adds/removes the "hover" CSS class to that <div> element when the mouse cursor enters/leaves the component area.

/* "Foo.razor.css" */

::deep .drop-zone {
    padding: 32px;
    border: dashed 2px transparent;
    transition: border linear 0.2s;
}
::deep .drop-zone.hover {
    border: dashed 2px darkorange;
}

After doing the above steps, you will get a drag & drop file feature like the following image.

movie

When any files are dropped into the div element that the <FileDropZone> component rendered, the <FileDropZone> component finds a <input type=file> element from an inside of its child content.

And then, the component dispatches the file object that the user dropped to the input element that the component found.

Supported version

  • .NET 6 or later is required.
  • Both Blazor WebAssembly and Blazor Server are supported.

Release Note

Release notes

License

Mozilla Public License Version 2.0

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
3.0.1 1,315 9/11/2024
3.0.0 409 8/29/2024
2.1.1 39,511 10/16/2022
2.0.0 2,377 5/10/2022
1.0.1 10,402 12/1/2021
1.0.0 1,349 10/11/2021

v.3.0.0
- BREAKING CHANGE: Dropped the support for the .NET 5.0
- Improved: Added the efficient support for .NET 8.0
- Improved: Reduced the file size of client-side script
- Improved: Made the client-side script more robust
- Improved: Enabled IL trimming for the Blazor WebAssembly

To see all the change logs, please visit the following URL.
- https://github.com/jsakamoto/Toolbelt.Blazor.FileDropZone/blob/master/RELEASE-NOTES.txt