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?

Share your content here:

Don't want to upload to our server on NullScriptz, Then share it now on our partner shareupld.com! Upload for free or take a subscription to be sure your files are save !

Need hosting without problems?

We are offering our own hosting service now! Check it out and host your nulled website now without problems ! NullScriptz Hosting, we also offer Xenforo Hosting!

Knowledge Base

We are building our knowledge-base, find your answers! Or get directly in contact with us by creating a ticket. (In progress..)


  • We are looking for new team members ! Do you think you have it in you, to be a part of an amazing and big community, apply then below on your desired position!
    Become a Uploader! - Become a Moderator
Resource icon

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

No permission to downloadVIP Upgrades
laravel-file-manager (Frontend)
File manager for Laravel - Frontend - Vue.js
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
  • Like
Reactions: connect1988
Author
timemach
Downloads
1
Views
366
Extention type
zip
File size
1.1 MB
Hash
9247449ea884b61910bad93cd73b0055
First release
Last update
Rating
0.00 star(s) 0 ratings

Similar resources

If you want to create a music tabs website, EasyTabs is for you!
0.00 star(s) 0 ratings
Downloads
1
Updated
Golo - Directory & Listing, City Travel Guide Laravel Theme with Flutter Native App OldNixker
0.00 star(s) 0 ratings
Downloads
1
Updated
simple and flexible plug-and-play file manager
0.00 star(s) 0 ratings
Downloads
2
Updated
Yetishare File Hosting Script V4.5.5 WinSys32
0.00 star(s) 0 ratings
Downloads
6
Updated
Top Bottom