File
Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes
The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, variants and support for dark mode.
Setup
<script>
import { Fileupload } from 'flowbite-svelte'
</script>File upload example
<script>
let fileuploadprops = {
id : 'user_avatar'
}
</script>
<Label>Upload file</Label>
<Fileupload {...fileuploadprops} />Helper text
SVG, PNG, JPG or GIF (MAX. 800x400px).
Multiple files
<Label for='multiple_files' >Upload multiple files</Label>
<Fileupload id='multiple_files' multiple/>Sizes
<Label for='small_size' >Small file input</Label>
<Fileupload id="small_size" size='xs' />
<Label for='default_size' >Default size</Label>
<Fileupload id="default_size" />
<Label for='larg_size' >Large file input</Label>
<Fileupload id="larg_size" size='lg' />Dropzone
<Dropzone id='dropzone'>
<svg aria-hidden="true" class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
<p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
</Dropzone>Props
The component has the following props, type, and default values. See types page for type information.
Fileupload
| Name | Type | Default |
|---|---|---|
| value | string | '' |
| size | 'xs' | 'sm' | 'lg' | 'sm' |
| inputClass | string | 'block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400' |
Dropzone
| Name | Type | Default |
|---|---|---|
| value | string | '' |
| divClass | string | 'flex justify-center items-center w-full' |
| labelClass | string | 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600' |
| innerDivClass | string | 'flex flex-col justify-center items-center pt-5 pb-6' |
Forwarded Events: Fileupload
on:blur
on:change
on:click
on:focus
on:keydown
on:keypress
on:keyup
on:mouseenter
on:mouseleave
on:mouseover
on:paste
Forwarded Events: Dropzone
on:click
on:change
on:focus
on:blur
on:mouseenter
on:mouseleave
on:mouseover