vue-uploader

1.1.21 • Public • Published

VueUploader

VueUploader is a Vue.js component that provides a user-friendly interface for uploading files. It supports both drag-and-drop functionality and traditional file selection.

Features

  • Drag-and-Drop Upload: Users can drag files into the drop zone to upload them.
  • File Selection: Allows users to click and select files from their file system.
  • Multiple File Support: Upload multiple files at once or restrict to a single file.
  • File Removal: Option to remove files from the list after they've been added.

Installation

Install VueUploader via npm:

npm install vue-uploader

usage / example

import VueUploader compnent in main.js:

import vueUploader from "vue-uploader";
import "vue-uploader/dist/style.css";

const app = createApp(App);
app.use(vueUploader);
app.mount("#app");

use of the VueUploader

<script setup>
import { ref } from "vue";
const files = ref();
const onFileUpload = (files) => {};
const onRemoveFile = (files) => {};
</script>
<template>
  <VueUploader
    :multiple="true"
    label="Upload or drag & drop"
    v-model="files"
  ></VueUploader>
</template>

Props and events

  • @onFileUpload="onFileUpload": This binds the onFileUpload function to the onFileUpload event of the VueUploader component, which will be triggered when a file is uploaded.
  • @onRemoveFile="onRemoveFile": This binds the onRemoveFile function to the onRemoveFile event of the VueUploader component, which will be triggered when a file is removed.
  • :multiple="false":This prop ensures that only one file can be uploaded at a time.
  • label="Upload or drag & drop": This prop sets the label or placeholder text displayed in the uploader component

Preview

App Screenshot

Thanks a lot

If you appreciate my work and want to support future projects, consider buying me a coffee! ☕️

Buy Me A Coffee

Package Sidebar

Install

npm i vue-uploader

Weekly Downloads

28

Version

1.1.21

License

none

Unpacked Size

9.78 kB

Total Files

5

Last publish

Collaborators

  • ylberzeqiri