Vue D-Media

Introduction

Vue components that can help you to add upload fields and media manager for your project.

Symfony Bundle: vue-d-media

Usage example: symfony-d-media-bundle-example

Usage example demo: demo

Vue components:

• Inline media manager
• Media manager popup
• single upload field
• multi upload field

Opportunities:

• No store/vuex and global store
• Drag and drop files loading to fields and popup
• Click and choose files loading to fields and popup
• Choose media for fields from Media manager
• Constraints to files count, files size
• Can add filters and media relations with config
• Can be used for admin panels and personal cabinets with hidden filters and backend security to filter medias by user or group or something else
• Api Repository can be easy replaced with another with same interface
• Typescript support

Installation

1npm install vue-d-media

Webpack global

1import Vue from 'vue'
2import VueDMedia from 'vue-d-media'
3
4Vue.use(VueDMedia)

Webpack local

1import {
2  Manager,
3  ManagerPopup,
4  SingleUploader,
5  MultiUploader,
6} from 'vue-d-media'
7
8export default {
9  components: {
10    Manager,
11    ManagerPopup,
12    SingleUploader,
13    MultiUploader,
14  }
15}

Copy dist/vue-d-media.umd.js to you public directory and add script tag

1<script src="https://unpkg.com/vue/dist/vue.js"></script>
2<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
3<script src="/your-path/vue-d-media.umd.js"/>

I18n installation

1npm install vue-i18n

1import Vue from 'vue'
2import VueI18n from 'vue-i18n'
3
4import en from 'vue-d-media/lib/lang/en'
5import ru from 'vue-d-media/lib/lang/ru'
6
7const i18n = new VueI18n({
8  locale: 'en',
9  fallbackLocale: 'en',
10  messages: {
11    en,
12    ru,
13  },
14})
15
16new Vue({
17  ...,
18  i18n
19}).$mount('#app')

See install example

See i18n docs

Usage

1<template>
2<!-- Single Uploader Field -->
3<single-uploader v-model="singleMedias" :config="config"></single-uploader>
4<!-- Single Uploader Field -->
5<multi-uploader v-model="multiMedias" :config="config"></multi-uploader>
6<!-- Manager Popup -->
7<button @click="$refs.managerPopup.open()">Open Manager Popup</button>
8<manager-popup ref="managerPopup" :config="config"></manager-popup>
9<!-- Manager Popup Field -->
10<manager bordered :config="config"></manager>
11</template>
12<script>
13import 'vue-d-media/dist/vue-d-media.css'
14export default {
15  data() {
16    return {
17      singleMedias: [
18        // initial media (ignores more than one)
19      ],
20      multiMedias: [
21        // initial medias
22      ],
23      config: {
24        // ...
25      }
26    }
27  }
28}
29</script>

Properties

Common properties

• config (Config) [DefaultConfig] - configuration object see type description

Manager

No parameters required.

Supports v-model or :value + @input.

• maxFiles (number) [value from config] - how much files can select

• canSubmit (boolean) [false] - can select medias?

• canUpload (boolean) [true] - if false upload zone is hidden

• bordered (boolean) [false] - add border to manager (for example for inline usage)

• entities (Entity[]) [value from config] - filters

• hiddenEntities (FilterEntities) [value from config] - hidden filters to send with getList request

• types (string[]) [value from config] - active tabs (Images, Files)

ManagerPopup

No parameters required.

Supports v-model or :value + @input.

maxFiles and types similar to Manager

SingleUploader

No parameters required.

Supports v-model or :value + @input.

• enableManager (boolean) [true] - add Media Manager button that opens ManagerPopup
• type (string) ['images'] - type of uploading media
• accept (string) [value from config] - string like '.svg, .jpg, .jpeg, .gif, .png, .webp' with extension/mime type enumerations
• hiddenEntities similar to Manager
• constraints (string[]) [autogenerated depends on other props] - list of constraints, just for displaying
• maxFilesize (number) [value from config] - max uploading file size in MB
• minWidth (number) [value from config] - minimum image width in px
• minHeight (number) [value from config] - minimum image height in px

MultiUploader

No parameters required.

Supports v-model or :value + @input.

All props from SingleUploader and:

• addText (string) ['ADD'] - add media button text
• maxFiles (number) [value from config] - maximum allowed number of files

Types

See sources types

TODO:

• add laravel backend package
• add show/hide sidebar button on narrow screens
• add image resizing provider
• remove dropzone.js dependency
• make it work without i18n with saving compatibility
• add canvas resizing after upload to reduce memory usage
• add more translations
• improve docs
• add unit tests