import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{s as V}from"./chunks/simplifyTailwindClasses.275301d3.js";import{g as u,d as T,o,c as e,k as c,n as m,l as t,t as b,r as C,a as z,h as g,H as r,w as I,F as S,D as P,e as $,Q as F}from"./chunks/framework.3f630664.js";import{i as U}from"./chunks/isArray.513c67aa.js";const N="block w-full text-sm text-gray-900 border-[1px] border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400",G="block mb-2 text-sm font-medium text-gray-900 dark:text-white",j="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 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",L="flex flex-col items-center justify-center pt-5 pb-6",M="!-mb-2 text-sm text-gray-500 dark:text-gray-400";function H(E){const s=u(()=>V(N,"text-"+E)),p=u(()=>G),l=u(()=>j),n=u(()=>L),y=u(()=>M);return{fileInpClasses:s,labelClasses:p,dropzoneLabelClasses:l,dropzoneWrapClasses:n,dropzoneTextClasses:y}}const O={key:0},R=["multiple"],J=c("svg",{"aria-hidden":"true",class:"w-8 h-8 text-gray-500 dark:text-gray-400",fill:"none",viewBox:"0 0 20 16",xmlns:"http://www.w3.org/2000/svg"},[c("path",{d:"M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",stroke:"currentColor"})],-1),W={key:0},X=c("span",{class:"font-semibold"},"Click to upload",-1),Z={key:1},Q=["multiple"],d=T({__name:"FwbFileInput",props:{dropzone:{type:Boolean,default:!1},label:{default:""},modelValue:{default:null},multiple:{type:Boolean,default:!1},size:{default:"sm"}},emits:["update:modelValue"],setup(E,{emit:s}){const p=E,l=u(()=>U(p.modelValue)?p.modelValue.map(a=>a.name).join(", "):p.modelValue instanceof FileList?Array.from(p.modelValue).map(a=>a.name).join(","):p.modelValue instanceof File&&p.modelValue.name||""),n=s,y=u({get(){return p.modelValue},set(a){n("update:modelValue",a)}}),v=a=>{var f;const i=a.target;p.multiple?y.value=Array.from(i.files??[]):y.value=((f=i.files)==null?void 0:f[0])??null},q=a=>{var f,h;a.preventDefault();const i=[];(f=a.dataTransfer)!=null&&f.items?(Object.values(a.dataTransfer.items).forEach(_=>{_.kind==="file"&&i.push(_.getAsFile())}),p.multiple?y.value=i:y.value=i[0]):(h=a.dataTransfer)!=null&&h.files&&Object.values(a.dataTransfer.files).forEach(_=>{y.value=_})},A=a=>{a.preventDefault()},{fileInpClasses:D,labelClasses:B,dropzoneLabelClasses:w,dropzoneWrapClasses:x,dropzoneTextClasses:k}=H(p.size);return(a,i)=>(o(),e("div",null,[a.dropzone?(o(),e("div",{key:1,class:"flex items-center justify-center",onChange:v,onDragover:A,onDrop:q},[c("label",{class:m(t(w))},[c("div",{class:m(t(x))},[J,y.value?(o(),e("p",Z,"File: "+b(l.value),1)):(o(),e("div",W,[c("p",{class:m(t(k))},[X,z(" or drag and drop ")],2),C(a.$slots,"default")]))],2),c("input",{multiple:a.multiple,type:"file",class:"hidden"},null,8,Q)],2)],32)):(o(),e("div",O,[c("label",null,[c("span",{class:m(t(B))},b(a.label),3),c("input",{class:m(t(D)),multiple:a.multiple,type:"file",onChange:v},null,42,R)]),C(a.$slots,"default")]))]))}}),K={class:"vp-raw"},Y={__name:"FwbFileInputExample",setup(E){const s=g(null);return(p,l)=>(o(),e("div",K,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},null,8,["modelValue"])]))}},ss={class:"vp-raw"},ls=c("p",{class:"!mt-1 text-sm text-gray-500 dark:text-gray-300"}," SVG, PNG, JPG or GIF (MAX. 800x400px). ",-1),as={__name:"FwbFileInputExampleHelper",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ss,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file"},{default:I(()=>[ls]),_:1},8,["modelValue"])]))}},ns={class:"vp-raw grid gap-2"},ps={__name:"FwbFileInputExampleSize",setup(E){const s=g(null);return(p,l)=>(o(),e("div",ns,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),size:"xs",label:"Small size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[1]||(l[1]=n=>s.value=n),size:"sm",label:"Default size"},null,8,["modelValue"]),r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=n=>s.value=n),size:"lg",label:"Large size"},null,8,["modelValue"])]))}},os={class:"vp-raw"},es={__name:"FwbFileInputExampleDropZone",setup(E){const s=g(null);return(p,l)=>(o(),e("div",os,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),dropzone:""},null,8,["modelValue"])]))}},ts={class:"vp-raw"},rs={key:0,class:"mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md"},cs={__name:"FwbFileInputExampleMultiple",setup(E){const s=g([]);return(p,l)=>(o(),e("div",ts,[r(t(d),{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=n=>s.value=n),label:"Upload file",multiple:""},null,8,["modelValue"]),s.value.length!==0?(o(),e("div",rs,[(o(!0),e(S,null,P(s.value,n=>(o(),e("div",{key:n},b(n.name),1))),128))])):$("",!0)]))}},Es=F('

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

',4),ys=F(`

vue

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

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

const file = ref(null)
</script>

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

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

const file = ref(null)
</script>

Multiple File upload

`,2),is=F(`

vue

<template>
  <fwb-file-input v-model="files" label="Upload file" multiple />
  <div v-if="files.length !== 0" class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md">
    <div v-for="file in files" :key="file">
      {{ file.name }}
    </div>
  </div>
</template>

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

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

<template>
  <fwb-file-input v-model="files" label="Upload file" multiple />
  <div v-if="files.length !== 0" class="mt-4 border-[1px] border-gray-300 dark:border-gray-600 p-2 rounded-md">
    <div v-for="file in files" :key="file">
      {{ file.name }}
    </div>
  </div>
</template>

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

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

Helper text

`,2),us=F(`

vue

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

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

const file = ref(null)
</script>

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

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

const file = ref(null)
</script>

Sizes

`,2),ds=F(`

vue

<template>
  <fwb-file-input v-model="file" label="Small size" size="xs" />
  <fwb-file-input v-model="file" label="Default size" size="sm" />
  <fwb-file-input v-model="file" label="Large size" size="lg" />
</template>

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

const file = ref(null)
</script>

<template>
  <fwb-file-input v-model="file" label="Small size" size="xs" />
  <fwb-file-input v-model="file" label="Default size" size="sm" />
  <fwb-file-input v-model="file" label="Large size" size="lg" />
</template>

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

const file = ref(null)
</script>

Dropone

`,2),Fs=F(`

vue

<template>
  <fwb-file-input v-model="file" dropzone />
</template>

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

const file = ref(null)
</script>

<template>
  <fwb-file-input v-model="file" dropzone />
</template>

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

const file = ref(null)
</script>

`,1),vs=JSON.parse('{"title":"Vue FileInput - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/fileInput.md","filePath":"components/fileInput.md"}'),fs={name:"components/fileInput.md"},hs=Object.assign(fs,{setup(E){return(s,p)=>(o(),e("div",null,[Es,r(Y),ys,r(cs),is,r(as),us,r(ps),ds,r(es),Fs]))}});export{vs as __pageData,hs as default};

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 ​

File upload example ​

Multiple File upload ​

Helper text ​

Sizes ​