Files
cssd-back/node_modules/vuetify-upload-component/README.md
T
2019-07-15 13:07:31 +04:30

73 lines
1.8 KiB
Markdown

![](https://img.shields.io/npm/v/vuetify-upload-component.svg)
![](https://img.shields.io/github/size/avrtau/vuetify_upload_component/src/Vuetify_upload_component.vue.svg)
# Vuetify Upload Component
This is a simple upload component for [Vuetify](https://vuetifyjs.com/en/).
### Install:
```
npm i vuetify-upload-component -s
```
### Props:
*`accept <String>`:* Limit accepted file-types. [default: "\*"] [More information...](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)
*`multiple <Boolean>`:* Set to accept multiple files. [default: "false"]
*`label <String>`:* Header text. [default: "Attachments"]
### Usage examples:
#### Template:
##### Component with defaults:
```html
<template>
<v-upload v-model="files"></v-upload>
</template>
```
##### Allow multiple files:
```html
<template>
<v-upload v-model="files" multiple></v-upload>
</template>
```
##### Accept only image files:
```html
<template>
<v-upload v-model="files" accept="image/*"></v-upload>
</template>
```
#### Script:
```javascript
<script>
import VUpload from "vuetify-upload-component";
export default {
components: { VUpload },
data: () => ({
files: [] // An array of files received from the vuetify_upload_component
}),
methods: {
doSomethingWithFiles: () => {
if (this.files) {
this.files.forEach(file => {
const reader = new FileReader();
reader.onload = () => {
/*
* Do something with the file
*/
}
reader.readAsBinaryString(file);
}
}
}
}
}
</script>
```
## Useful links:
[FileReader API Example](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Handling_the_upload_process_for_a_file)