flowbite-vue/docs/components/fileInput.md

<script setup> import FileInpDefault from './fileInput/examples/FileInpDefault.vue' import FileInpHelper from './fileInput/examples/FileInpHelper.vue' import FileInpSize from './fileInput/examples/FileInpSize.vue' import FileInpDropZone from './fileInput/examples/FileInpDropZone.vue' import MultipleFile from './fileInput/examples/MultipleFile.vue' </script>

Vue FileInput - Flowbite

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

:::tip Original reference: https://flowbite.com/docs/forms/file-input/ :::

File upload example

<template>
  <FileInput v-model="file" label="Upload file" />
</template>

<script setup>
import FileInput from 'flowbite-vue'
import { ref } from 'vue'

const file = ref()
</script>

Multiple File upload

<template>
  <FileInput multiple v-model="file" label="Multiple upload" />
</template>

<script setup>
import FileInput from 'flowbite-vue'
import { ref } from 'vue'

const file = ref([])
</script>

Helper text

<template>
  <FileInput label="Upload file">
    <p class='!mt-1 text-sm text-gray-500 dark:text-gray-300'>SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
  </FileInput>
</template>

<script setup>
import FileInput from 'flowbite-vue'
</script>

Sizes

<template>
  <div>
    <FileInput size="xs" label="Small size" />
    <FileInput size="sm" label="Default size" />
    <FileInput size="lg" label="Large size" />
  </div>
</template>

<script setup>
import FileInput from 'flowbite-vue'
</script>

Dropone

<template>
  <FileInput :dropzone="true">
    <p class="!mt-1 text-xs text-gray-500 dark:text-gray-400">
      SVG, PNG, JPG or GIF (MAX. 800x400px)
    </p>
  </FileInput>
</template>

<script setup>
import FileInput from 'flowbite-vue'
</script>