File Components

File upload example

<script>
import { Fileupload } from 'flowbite-svelte'

let fileuploadprops = {
  id : 'user_avatar'
}

let fileuploadprops2 = {
  id : 'user_avatar2'
}
</script>

<Fileupload {...fileuploadprops} />

Helper text

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

Dropzone

Related components

References