vue3-fileinput

File Upload Component

A Vue 3 drag-and-drop file upload component with validation, preview, and error handling.

Features

• Drag and drop file upload
• Click to open file selector
• Image preview for images
• File type icons for other file types (PDF, Word, Text, Excel)
• File validation (type and size restrictions)
• Customizable placeholder and helper text
• Error handling with user feedback
• Customizable upload icon using a slot

Demo

---

Installation

This component is designed to be used in a Vue 3 project with the Composition API.

npm i vue3-fileinput

---

Usage

1. Local Registration (Single Component Usage)

Import and use the component in a specific Vue file:

<template>
  <Vue3Fileinput
    v-model="uploadedFile"
    :fileType="['image/png', 'image/jpeg', 'application/pdf']"
    :maxSize="5 * 1024 * 1024"
    placeholder="Drop your file here"
    helperText="Max size: 5MB"
  />
</template>

<script setup>
import { ref } from "vue";
import Vue3Fileinput  from "vue3-fileinput"; 
import "vue3-fileinput/dist/vue3-fileinput.css";


const uploadedFile = ref(null);

</script>

---

2. Global Registration (Use in Entire App)

To register the component globally in your Vue 3 project:

Step 1: Register in main.js or main.ts

import './assets/main.css'

import { createApp } from 'vue'
import Vue3Fileinput from 'vue3-fileinput'
import "vue3-fileinput/dist/vue3-fileinput.css";

import App from './App.vue'
const app = createApp(App)

app.use(Vue3Fileinput)
app.mount('#app')

Step 2: Use in Any Component

Once registered globally, you can use <Vue3Fileinput> anywhere without importing it again:

<template>
  <Vue3Fileinput v-model="uploadedFile" />
</template>

<script setup>
import { ref } from "vue";

const uploadedFile = ref(null);
</script>

---

Slots

Slot Name	Description
icon	Slot for customizing the upload icon inside the drop zone

Using the Slot for Custom Icons

<Vue3Fileinput v-model="uploadedFile">
  <template #icon>
    <i class="fas fa-folder-plus upload-icon"></i>
  </template>
</Vue3Fileinput>

---

Props

Prop Name	Type	Default	Description
modelValue	File	null	The selected file
required	Boolean	false	Whether file upload is mandatory
fileType	Array	['image/png', 'image/jpeg', 'image/jpg', 'application/pdf', 'text/plain']	Allowed file types
placeholder	String	'Drag and drop a file here'	Placeholder text before file selection
helperText	String	''	Additional helper text below the drop zone
maxSize	Number	2 * 1024 * 1024 (2MB)	Maximum file size allowed
maxFiles	Number	1	Maximum number of files allowed
inValid	Boolean	false	Marks the component as invalid

---

Events

Event Name	Payload	Description
update:modelValue	File	Triggered when a new file is selected
file-reset	null	Triggered when the file selection is cleared

---

Exposed Methods

To manually reset the file selection, use:

<script setup>
import { ref } from "vue";
import Vue3Fileinput from 'vue3-fileinput'
import "vue3-fileinput/dist/vue3-fileinput.css";
const fileUploadRef = ref(null);

const resetFile = () => {
  fileUploadRef.value.resetFile();
};
</script>

---

Setting a File Preview Manually

To set a file preview (e.g., from an API response), use:

<script setup>
import { ref, onMounted } from "vue";
import Vue3Fileinput from 'vue3-fileinput'
import "vue3-fileinput/dist/vue3-fileinput.css";

const fileUploadRef = ref(null);
const imagepath = ref(
  "https://media.istockphoto.com/id/1147544807/vector/thumbnail-image-vector-graphic.jpg?s=612x612&w=0&k=20&c=rnCKVbdxqkjlcs3xH87-9gocETqpspHFXu5dIGB4wuM="
);

onMounted(() => {
  fileUploadRef.value.preview = imagepath.value;
});
</script>

---

Styling

The component is styled with scoped CSS and can be customized further based on your needs.

---

License

This component is open-source and can be modified as needed.