Comments (9)
Hi.
You can use the URL parameters to set the default disk and the default folder - docs
Example (see the URL) - demo site
If you use ACL, do not forget - all parent folders must have read permissions!
And i can't find in documentation am i able to set filetype filters to show only certain files (images, audios, videos)
There is no such functionality
from vue-laravel-file-manager.
Thanks for reply.
I'm confused how to send params in URl if i use it in vue component
- Vue.use(FileManager, { store })
- Add "file-manager" vue component inside modal view in my vue component.
How i can set URL from vue ? Is there prop ?
P.S. My be i should use mutation when window with file-manager component mounted? As i can see in Vue devtools, there is fm/left/setDisk mutation
from vue-laravel-file-manager.
Are you not using Vue Router?... you can try to use something like this:
<template>
<div class="container">
<div class="card card-default">
<div class="card-header">Example Component</div>
<div class="card-body">
<button v-on:click="show" type="button" class="btn btn-primary">Show FM!</button>
<button v-on:click="hide" type="button" class="btn btn-warning">Hide FM!</button>
</div>
<div v-if="key" style="height: 600px;">
<file-manager></file-manager>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
key: false,
}
},
methods: {
show () {
let url = new URLSearchParams(window.location.search)
url.append('leftDisk', 'local')
url.append('leftPath', 'new')
this.setNewURL(url.toString())
this.key = true
},
hide () {
let url = new URLSearchParams(window.location.search)
url.delete('leftDisk')
url.delete('leftPath')
this.setNewURL(url.toString())
this.key = false
},
setNewURL (params) {
let newURL = window.location.protocol
+ '//'
+ window.location.host
+ window.location.pathname
+ '?'
+ params
window.history.pushState({ path: newURL }, '', newURL)
},
},
}
</script>
P.S. My be i should use mutation when window with file-manager component mounted? As i can see in Vue devtools, there is fm/left/setDisk mutation
I think it's a bad idea.. but you can try. See src/storeaction.js - initializeApp()
You can change defaultDisk:
commit('fm/left/setDisk', 'disk-name);
You can set deafultPath:
commit('fm/left/setSelectedDirectory', 'path-name');
commit('fm/left/addToHistory', 'path-name');
Update directories tree:
dispatch('fm/tree/reopenPath', 'path-name');
BUT you can do this after completing the default initialization ..
from vue-laravel-file-manager.
My backend is SPA using bootstrap-vue. Yes it uses Vue router to show sections. But file-manager is inside one of section component. I included file-manager to modal view:
https://bootstrap-vue.js.org/docs/components/modal/#modals
So it's just a part of component and it's not opened in new window with Vue router.
<b-modal ok-only id="file-manager-modal" ref="file-manager-modal" v-model="fileManagerShow" size="xl" :title="$t('labels.choose_file')" @ok="onSelectFile" > <file-manager ref="file-manager"></file-manager> </b-modal>
I think I'll try to subscribe to finished initialization event and switch to needed folder with mutation.
BTW Are events emited?
from vue-laravel-file-manager.
I think I'll try to subscribe to finished initialization event and switch to needed folder with mutation.
BTW Are events emited?
This method does not generate any events.. that's why I wrote "bad idea"
from vue-laravel-file-manager.
I subscribed to modal "shown" event and successfully changed initial folder at the left panel with mutations. All folders became opened. But right panel did not refresh view and stayed the same file list from initial root folder.
Is fm/tree/reopenPath action enough ?
from vue-laravel-file-manager.
Do you use windowsConfig = 2 ? (one file manager window with directories tree module)
fm/tree/reopenPath - this action for the tree module (left panel)
The problem is most likely that you change the settings before the answer comes from the server with the configurations and they overwrite your changes - see vue dev tools
How easy it is to track the completion of the initialization, without modifying the code, I do not know
I think so far it is worth using the solution I proposed. As time will be, I will try to add events that will help solve this problem.
Do not close the issue so that I do not forget about it...
from vue-laravel-file-manager.
I do not change window config. So i think it's default. Yes tree at the left side and file list at the right side.
I will check if settings recieve from endpoint with setTimeout(). If no success i will try to use Vue router and open file-manager as new window with query string. Just can't understand how to managed to show new window and register callback from file-manager when back to previous route.
from vue-laravel-file-manager.
IMO there is no any problem to control behavior of file-manager. The problem is in small documentation.
I found required action in source and managed to get file list in right (manager) panel.
this.$store.dispatch('fm/left/selectDirectory', {
path,
history: false
})
It would be great to see all useful vuex stores items. Actions, mutations if needed. May be getters etc.
And i think there is a need of emited events.
from vue-laravel-file-manager.
Related Issues (20)
- Hello, when I install the component, import component error as shown in figure HOT 2
- How to run? HOT 2
- ERROR Failed to compile with 1 error 下午6:05:15 error in ./node_modules/vue-loading-spinner/src/components/Texture.vue?vue&type=style&index=0&id=3d9bd062&lang=scss&scoped=true& Syntax Error: TypeError: this.getOptions is not a function HOT 2
- sos,vue2 error HOT 2
- sos error HOT 3
- Set default disk and path on init or any oninit callback ? HOT 1
- Please provide a store!! HOT 1
- Problem with LFM and tinymce HOT 2
- Buffer undefined in Preview.vue HOT 2
- The requested module '/node_modules/diff-match-patch/index.js?v=1f9f0c93' does not provide an export named 'default' HOT 3
- Multiple fm in Vuex store
- Cannot compile with webpack
- Syntax Error: SassError: Undefined function. HOT 2
- Settings is not working. HOT 3
- Integration issue with Vite+VUE3 (pinia)
- This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2.
- Dynamic configuration
- please add cooke for resent opened folder
- Image source not readable
- Vue3 settings not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-laravel-file-manager.