vuetify-file-uploader v1.1.1

This project is built with vue and vuetify Make sure your project has already vue and vuetify installed

Playground

Demo

Quick Start

Install using npm

npm install vuetify-file-uploader 

import component

You can decide for yourself whether to use FileUploader with the layout prop or directly one of the component listed below.

Options 1: register global

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import FileUploader from 'vuetify-file-uploader'

Vue.config.productionTip = false

Vue.use(FileUploader)

new Vue({ vuetify, render: h => h(App) }).$mount('#app')

And use it everywhere 
```js
<FileUploader></FileUploader>

Options 2: register local

import { FileUploader } from 'vuetify-file-uploader'
export default {
    name: 'app',
    components: {
      FileUploader
    }
}

And use it local

<FileUploader></FileUploader>

Configuration

Components

You can decide for yourself whether to use FileUploader or directly one of the other components. All props listed in the other components can also be passed to FileUploader

FileUploader

Global use

FileUploader can be used out of the box

Local use

import { FileUploader } from 'vuetify-file-uploader'
export default {
  name: 'app',
  components: {
    FileUploader
  }
}

Props

You can also pass all props from the components FileCard, FileCardList and AvatarUploader

Slots

Can be passed to FileUploader ,FileCard and FileCardList

<template #title> Another title <template #subtitle> Another subtitle

##### Events
| Name    | Payload                |
|---------|------------------------|
| addFile | {id, src, file}|

##### Enums
```js
function layouts() {
  return {
    CARD: "card",
    CARD_LIST: "card-list",
    AVATAR: "avatar",
  };
}

FileCard

Global use

FileCard can be used out of the box

Local use

import { FileCard } from 'vuetify-file-uploader'
export default {
  name: 'app',
  components: {
    FileCard
  }
}

Props

Slots

Can be passed to FileUploader ,FileCard and FileCardList

<template #title> Another title <template #subtitle> Another subtitle

##### Events
| Name    | Payload                |
|---------|------------------------|
| addFile | {id, src, file}|

#### FileCardList
[Global](#options-1-register-global) use
> FileCardList can be used out of the box

[Local](#options-2-register-local) use
```js
import { FileCardList } from 'vuetify-file-uploader'
export default {
  name: 'app',
  components: {
    FileCardList
  }
}

Props

Slots

Can be passed to FileUploader ,FileCard and FileCardList

<template #title> Another title <template #subtitle> Another subtitle

##### Events
| Name    | Payload                |
|---------|------------------------|
| addFile | {id, src, file}|

##### Enums
```js
function listLayouts() {
  return {
    GRID: "grid",
  };
}

AvatarUploader

Global use

AvatarUploader can be used out of the box

Local use

import { AvatarUploader } from 'vuetify-file-uploader'
export default {
  name: 'app',
  components: {
    AvatarUploader
  }
}

Props

Events

Helpers

Common file types

If you miss one just google for the content type of you file

function commonFileTypes() {
  return [
    "text/csv",
    "application/msword",
    "image/",
    "image/gif",
    "image/jpeg",
    "text/calendar",
    "application/json",
    "audio/mpeg",
    "video/mp4",
    "video/mpeg",
    "audio/ogg",
    "video/ogg",
    "font/otf",
    "image/png",
    "application/pdf",
    "font/ttf",
    "text/plain",
    "audio/wav",
    "audio/webm",
    "video/webm",
    "image/webp",
    "font/woff",
    "font/woff2",
    "application/zip",
    "video/3gpp",
    "audio/3gpp",
    "video/3gpp2",
    "audio/3gpp2",
    "application/x-7z-compressed",
  ];
};

Dependencies (as peer dependencies)

• vue
  • 2.6.x
• vuetify
  • 2.5.x

• mdi/font

  • 5.9.x

More Coming soon...