File manager for Laravel - Frontend - Vue.js
Backend - Laravel 5 package - alexusmai/laravel-file-manager
- Audio player (mp3, ogg, wav, aac), Video player (webm, mp4) - (Plyr)
- Code editor - (Code Mirror)
- Image cropper - (Cropper.js)
- Zip / Unzip - only for local disks
$ npm install laravel-file-manager --save
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 create 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
Vue.use(FileManager, {
store, // required
// not required params
headers: {'Authorization': 'Bearer ...'}, // add header
// OR
headers: {'X-CSRF-TOKEN': 'token'}, // overwrite default header Axios
baseUrl: 'http://my_url/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
},
},
}
In development mode you can change base url for application - add this param in your laravel .env file
MIX_LFM_BASE_URL=http://my-url.loc/file-manager/
Now vue component is registered and you can use it in your app
<file-manager></file-manager>
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">
Warning! Package use axios (Promise) - use babel-polyfill for ie11