mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-11 21:41:07 +03:30
73 lines
1.8 KiB
Markdown
73 lines
1.8 KiB
Markdown

|
|

|
|
# 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)
|