CLI previewInstall commands shown on this site are not released yet.

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-dropzone
bash
npx grassroot@latest add ui/file-dropzone
bash
yarn dlx grassroot add ui/file-dropzone
bash
bunx grassroot add ui/file-dropzone

API Reference

FileDropzoneProps
PropTypeDefault
onFilesFired with the full current selection after any add/remove.((files: File[]) => void) | undefined
multipleAccept multiple files.boolean | undefinedtrue
acceptPassed through to the native input (e.g. ".csv,.pdf,image/png").string | undefined
hintHint line under the prompt.string | undefined
classNamestring | undefined