DocsComponentsAdvanced
FileDropzone
React example follows below.
ts
import { FileDropzone } from "@grassroot/ui-react/advanced"; <FileDropzone hint="PNG, PDF, CSV up to 25 MB" />ts
<script setup lang="ts">import { FileDropzone } from "@grassroot/ui-vue";</script> <template> <FileDropzone hint="PNG, PDF, CSV up to 25 MB" /></template>ts
import { Component } from "@angular/core";import { GrassrootFileDropzone } from "@grassroot/ui-angular"; @Component({ selector: "app-example", standalone: true, imports: [GrassrootFileDropzone], template: ` <grassroot-file-dropzone hint="PNG, PDF, CSV up to 25 MB" /> `,})export class ExampleComponent {}ts
<script lang="ts"> import { FileDropzone } from "@grassroot/ui-svelte";</script> <FileDropzone hint="PNG, PDF, CSV up to 25 MB" />ts
import { FileDropzone } from "@grassroot/ui-solid"; export function Example() { return ( <> <FileDropzone hint="PNG, PDF, CSV up to 25 MB" /> </> );}Installation
bash
pnpm dlx grassroot add ui/file-dropzonebash
npx grassroot@latest add ui/file-dropzonebash
yarn dlx grassroot add ui/file-dropzonebash
bunx grassroot add ui/file-dropzoneAPI Reference
| Prop | Type | Default |
|---|---|---|
onFilesFired with the full current selection after any add/remove. | ((files: File[]) => void) | undefined | — |
multipleAccept multiple files. | boolean | undefined | true |
acceptPassed through to the native input (e.g. ".csv,.pdf,image/png"). | string | undefined | — |
hintHint line under the prompt. | string | undefined | — |
className | string | undefined | — |