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