https://github.com/jsakamoto/Toolbelt.Blazor.FileDropZone

Surround an "input type=file" element by this Blazor component to making a zone that accepts drag and drops files.
https://github.com/jsakamoto/Toolbelt.Blazor.FileDropZone

blazor dragdrop drop dropfile

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jsakamoto/Toolbelt.Blazor.FileDropZone
• Owner: jsakamoto
• License: mpl-2.0
• Created: 2021-10-11T13:21:09.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-10-16T10:35:37.000Z (about 2 years ago)
• Last Synced: 2024-04-14T20:45:15.187Z (7 months ago)
• Topics: blazor, dragdrop, drop, dropfile
• Language: HTML
• Homepage: https://jsakamoto.github.io/Toolbelt.Blazor.FileDropZone/
• Size: 4.52 MB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - Blazor File Drop Zone -  Surround an "input type=file" element by this Blazor component to making a zone that accepts drag and drops files ([Demo](https://jsakamoto.github.io/Toolbelt.Blazor.FileDropZone/)). (Libraries & Extensions / 2D/3D Rendering engines)

README

        
# Blazor File Drop Zone [![NuGet Package](https://img.shields.io/nuget/v/Toolbelt.Blazor.FileDropZone.svg)](https://www.nuget.org/packages/Toolbelt.Blazor.FileDropZone/)

## Summary

Surround an `` element by this `` Blazor component to making a zone that accepts drag and drops files.

- Live demo site - https://jsakamoto.github.io/Toolbelt.Blazor.FileDropZone/

![fig.1](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.FileDropZone/master/.assets/fig.001.png)

## Usage

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

```shell

> dotnet add package Toolbelt.Blazor.FileDropZone

```

**Step 2.** Surround `` component by the `` component.

Before:

```html

```

After:

```html

@using Toolbelt.Blazor.FileDropZone

...

  

```

**Step 3.** Styling the `` component as you want to see.

**[Tips]**

The `` component will render just a single & plain `
` element outside of child content.


That means the `` component doesn't provide any UI styles.

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


```css

/* "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](https://raw.githubusercontent.com/jsakamoto/Toolbelt.Blazor.FileDropZone/master/.assets/movie.001.gif)

When any files are dropped into the `div` element that the `` component rendered, the `` component finds a `` 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 5 or later is required.

- Both Blazor WebAssembly and Blazor Server are supported.

## Release Note

[Release notes](https://github.com/jsakamoto/Toolbelt.Blazor.FileDropZone/blob/master/RELEASE-NOTES.txt)

## License

[Mozilla Public License Version 2.0](https://github.com/jsakamoto/Toolbelt.Blazor.FileDropZone/blob/master/LICENSE)