What's new

Welcome to NullScriptz - NulledScriptz

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Requests

Can't find what you are looking for, request it in our request section our staff and members will do their best to help you!

  • Due to new payment rules, all accounts must have a 2-step verification.
Resource icon

Clean code vue-laravel-file-manager by alexusmai 2.5.2

No permission to download
Your advertisement here?
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);

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

<file-manager v-bind:settings="settings"></file-manager>

...
settings: {
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
},
},
},
...

Vue.use(FileManager, {
store, // required


headers: {
'X-Requested-With': 'XMLHttpRequest',
'Authorization': 'Bearer ...'
},
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

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

MIX_LFM_CSRF_TOKEN=OFF

Warning! Package use axios (Promise) - use babel-polyfill for ie11
Author
timemach
Downloads
0
Views
40
Extention type
zip
File size
1.1 MB
Hash
9247449ea884b61910bad93cd73b0055
First release
Last update
Rating
0.00 star(s) 0 ratings
shape1
shape2
shape3
shape4
shape7
shape8
Top