ab-uploader
Version:
File uploader
187 lines (178 loc) • 6.22 kB
Markdown
# ab-uploader
## Setup
```
import AbUploader from 'ab-uploader'
Vue.use(AbUploader)
```
## Common usage
```
<template>
<div class="uploader-wrapper">
<ab-uploader input-id="upload" :max-files="uploaderConfig.maxFiles" :multiple-files="true" :accepted-files="uploaderConfig.acceptedFiles" :max-size="uploaderConfig.maxSize" :max-width="uploaderConfig.maxWidth" :max-height="uploaderConfig.maxHeight" :default-files="defaultFiles" v-model="formdata.files">
<template slot="button"><span>Upload file</span></template>
<template slot-scope="{ fileErorrs, files, config, removeFile }">
<div class="upload">
<div class="upload__content">
<div class="upload__wrapper">
<div class="upload__errors">
<p class="upload__error" v-if="fileErorrs.limit">Maximum number of files to upload exceeded</p>
<p class="upload__error" v-if="fileErorrs.size">Maximum file weight to upload exceeded</p>
<p class="upload__error" v-if="fileErorrs.type">Unsupported file format</p>
<p class="upload__error" v-if="fileErorrs.height">Max image height - {{ config.maxHeight }}px</p>
<p class="upload__error" v-if="fileErorrs.width">Max image width - {{ config.maxWidth }}px</p>
</div>
</div>
</div>
<div class="ds-panel ds-panel--space_sm">
<div class="ds-panel__element ds-panel--offset_top">
<p class="ds-caption ds-caption--size_2xs"> Download till {{ config.maxFiles }} images in the format {{ config.acceptedFiles }}, size till {{ config.maxSize }} Mb
<span>, the minimum recommended resolution {{ config.maxWidth }} x {{ config.maxHeight }}</span>
</p>
</div>
</div>
<div class="upload__list">
<div class="upload-list" v-if="files.length > 0">
<div class="upload-list__item" v-for="(file, index) in files" :key="index" :class="{'upload-list__item--variant_2': !file.isImage}">
<div v-if="file && !file['delete']">
<div v-if="file.isImage">
<div class="upload-list__file-wrapper">
<img class="upload-list__file" :src="file.src" />
</div>
<p class="name">{{ files[index].name }}</p>
</div>
<div class="upload-list__tag" v-else>{{ files[index].name }}</div>
<div class="upload-list__remove" @click="removeFile(index)" :class="{'upload-list__remove--variant_2': !file.isImage}">
<i>x</i>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</ab-uploader>
</div>
</template>
<script>
export default {
name: 'UploaderWrapper',
data() {
return {
defaultFiles: [
{
src: './default-1.jpg',
name: 'default-1.jpg',
size: '123'
},
{
src: './default-2.jpeg',
name: 'default-2.jpeg',
size: '321'
}
],
uploaderConfig: {
maxSize: 5,
maxFiles: 5,
maxWidth: 4000,
maxHeight: 4000,
acceptedFiles: '.jpg, .jpeg, .png, .gif, .txt'
},
formdata: {
files: []
}
};
},
};
</script>
```
## Pug example
```
.uploader-wrapper
ui-file-uploader(
input-id="upload"
:max-files="uploaderConfig.maxFiles"
:multiple-files="true"
:accepted-files="uploaderConfig.acceptedFiles"
:max-size="uploaderConfig.maxSize"
:max-width="uploaderConfig.maxWidth"
:max-height="uploaderConfig.maxHeight"
:default-files="defaultFiles"
v-model="formdata.files"
)
template(slot="button")
span Upload file
template(slot-scope="{ fileErorrs, files, config, removeFile }")
.upload
.upload__content
.upload__wrapper
.upload__errors
p.upload__error(v-if='fileErorrs.limit') Maximum number of files to upload exceeded
p.upload__error(v-if='fileErorrs.size') Maximum file weight to upload exceeded
p.upload__error(v-if='fileErorrs.type') Unsupported file format
p.upload__error(v-if='fileErorrs.height') Max image height - {{ config.maxHeight }}px
p.upload__error(v-if='fileErorrs.width') Max image width - {{ config.maxWidth }}px
.ds-panel.ds-panel--space_sm
.ds-panel__element.ds-panel--offset_top
p.ds-caption.ds-caption--size_2xs Download till {{ config.maxFiles }} images in the format {{ config.acceptedFiles }}, size till {{ config.maxSize }} Mb
span , the minimum recommended resolution {{ config.maxWidth }} x {{ config.maxHeight }}
.upload__list
.upload-list(v-if='files.length > 0')
.upload-list__item(
v-for='(file, index) in files'
v-if="file && !file['_delete']"
:key='index'
:class="{'upload-list__item--variant_2': !file.isImage}"
)
div(v-if='file.isImage')
.upload-list__file-wrapper
img.upload-list__file(:src='file.src')
p.name {{ files[index].name }}
.upload-list__tag(v-else='') {{ files[index].name }}
.upload-list__remove(
@click='removeFile(index)'
:class="{'upload-list__remove--variant_2': !file.isImage}"
)
i x
```
## Props
```
inputId: {
type: String,
default: 'upload',
},
maxSize: {
type: Number,
default: 5,
},
maxFiles: {
type: Number,
default: 5,
},
acceptedFiles: {
type: String,
default: '.jpg, .jpeg, .png',
},
multipleFiles: {
type: Boolean,
default: true,
},
defaultFiles: {
type: Array,
default: () => [],
},
maxWidth: {
default: 4000,
},
maxHeight: {
default: 4000,
},
```
## Slot scopes
```
slot(
:file-erorrs="fileErorrs"
:files="files"
:config="{ maxWidth, maxHeight, maxFiles, maxSize, acceptedFiles }"
:remove-file="removeFile"
)
```