0.2.37 • Published 4 years ago

tao-file-manager v0.2.37

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

laravel-file-manager (Frontend)

File manager for Laravel - Frontend - Vue.js

Backend - Laravel 5 package - alexusmai/laravel-file-manager

Laravel File Manager

v 2.4.0

Now you can overwrite default settings using props

Installation

NPM

$ npm install laravel-file-manager --save

Usage

IF your App using Vuex store

import FileManager from 'laravel-file-manager'
import store from './path-to-your-store/store'   // your Vuex store

Vue.use(FileManager, {store})

ELSE you need to create a new vuex instance

import Vue from 'vue';
import Vuex from 'vuex';
import FileManager from 'laravel-file-manager'

Vue.use(Vuex);

// create Vuex store, if you don't have it
const store = new Vuex.Store();

Vue.use(FileManager, {store});

The application store module will be registered under the name 'fm'

You can overwrite some default settings

// In the new version 2.4.0 and higher
<file-manager v-bind:settings="settings"></file-manager>

...
// settings object structure
settings: {
    // axios headers
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      Authorization: `Bearer ${window.localStorage.getItem('user-token')}`,
    },
    baseUrl: 'http://test.loc/file-manager/',   // overwrite base url Axios
    windowsConfig: 2,                           // overwrite config
    lang: 'de',                                 // set language
    translation: {                              // add new translation
        name: de,
        content: {
            about: 'Über',
            back: 'Zurück',
            ... see lang file structure
        },
    },
},
...

// Old versions
Vue.use(FileManager, {
    store, // required
    
    // not required params
    
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Authorization': 'Bearer ...'
    },
    // default headers example
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': 'set laravel csrf token here...'
    },
    
    baseUrl: 'http://my_url:80/file-manager/',  // overwrite base url Axios
    windowsConfig: 2,
    lang: 'de',                                 // set language
    translation: {                              // add new translation
        name: de,
        content: {
            about: 'Über',
            back: 'Zurück',
            ... see lang file structure
        },
    },
}

Now vue component is registered and you can use it in your app

<file-manager></file-manager>

Available Props

settings - Object

AttributeTypeExampleRequiredDescription
headersObject{'X-Requested-With': 'XMLHttpRequest'}NoAxios Headers
baseUrlString'http://my_url:80/file-manager/'NoAxios base URL
windowsConfigInt2No1 - only one manager, 2 - manager with folder tree, 3 - two managers
langString'de'NoSet language
translationObject{ ... see lang file structure },NoAdd new translation

CSRF, Bootstrap, FontAwesome

Don't forget add a csrf token to head block in your Laravel view and add bootstrap 4 and fontawesome 5 styles

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Example -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

You can use environment variables

// set baseUrl
MIX_LFM_BASE_URL=http://my-url.loc/file-manager/

// if you don't want to use csrf-token - you can off it
MIX_LFM_CSRF_TOKEN=OFF

Warning! Package use axios (Promise) - use babel-polyfill for ie11

Contributors

npm.ionpm.ionpm.ionpm.ionpm.ionpm.ionpm.ionpm.io

0.2.37

4 years ago

0.2.36

4 years ago

0.2.35

4 years ago

0.2.34

4 years ago

0.2.33

4 years ago

0.2.30

4 years ago

0.2.32

4 years ago

0.2.31

4 years ago

0.2.29

4 years ago

0.2.28

4 years ago

0.2.27

4 years ago

0.2.26

4 years ago

0.2.25

4 years ago

0.2.24

4 years ago

0.2.23

4 years ago

0.2.22

4 years ago

0.2.21

4 years ago

0.2.20

4 years ago

0.2.19

4 years ago

0.2.18

4 years ago

0.2.17

4 years ago

0.2.16

4 years ago

0.2.15

4 years ago

0.2.14

4 years ago

0.2.13

4 years ago

0.2.12

4 years ago

0.2.11

4 years ago

0.1.20

4 years ago

0.1.21

4 years ago

0.1.19

4 years ago

0.1.18

4 years ago

0.1.17

4 years ago

0.1.16

4 years ago

0.1.15

4 years ago

0.1.13

4 years ago

0.1.14

4 years ago

0.1.12

4 years ago

0.1.10

4 years ago

0.1.11

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.3

4 years ago

0.1.5

4 years ago

0.1.0

4 years ago