alexusmai / vue-laravel-file-manager Goto Github PK
View Code? Open in Web Editor NEWFrontend for Laravel File Manager on Vue.js
License: MIT License
Frontend for Laravel File Manager on Vue.js
License: MIT License
When you pass the contextMenu options I want to display the UI doesn't reflect them.
For example, I want my users to be able to copy or see the properties of the files. I pass the array with these options, but all the default options are still displayed
Vue.use(FileManager, {
store,
contextMenu:[
[],
[{"name":"copy","icon":"far fa-copy"}],
[],
[{"name":"properties","icon":"far fa-list-alt"}]
]
});
How I can update authorization token after refresh?
I resntly used your file manage it is awesome and very good. I work with vue in self project . I need help . When i use vue in packages laravel i create app in this path and conenct it to main webpack it work but i think is not good method for develop.
What is your idea for use vue in packages in laravel and create prod version like your file manager.
Thank you very much
I'm just trying to install this package but I got this error:
ERROR in ./node_modules/laravel-file-manager/src/FileManager.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loader
s are configured to process this file. See https://webpack.js.org/concepts#loade
rs
> <template>
| <div class="fm d-flex flex-column"
| v-bind:class="{ 'fm-full-screen': fullScreen }">
@ ./node_modules/laravel-file-manager/src/init.js 2:0-44 13:32-43
@ ./resources/assets/js/app.js
I integrated this in an app that was compiling well also .vue files.
Do you have any idea about this error?
creating issue on the corresponding repository :
issue
[2019-12-02 16:49:00] local.ERROR: Unable to init from given binary data. {"userId":8,"exception":"[object] (Intervention\\Image\\Exception\\NotReadableException(code: 0): Unable to init from given binary data. at /media/pc3/projects/laravel/master/vendor/intervention/image/src/Intervention/Image/Gd/Decoder.php:115)
Hello. My goal to get several users with own folders where they could store audio, video and images. So i created laravel local storage with folders for example teacher1, teacher2 and so on.
With ACL i can make these folders accessed by certain user. But when i open filemanager window i got always root folder. Is there any props that i could open initial folder for user? And i can't find in documentation am i able to set filetype filters to show only certain files (images, audios, videos)
====================================================
require('./bootstrap');
window.Vue = require('vue');
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});
/**
Vue.component('example-component', require('./components/ExampleComponent.vue'));
// const files = require.context('./', true, /.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))
/**
const app = new Vue({
el: '#app'
});
=======================================================
@ dev C:\laragon\www\homestead
npm run development
@ development C:\laragon\www\homestead
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
95% emitting
ERROR Failed to compile with 1 errors 16:18:20
error in ./node_modules/laravel-file-manager/src/components/blocks/Notification.vue
(Emitted value instead of an instance of Error)
Error compiling template:
@ ./node_modules/laravel-file-manager/src/components/blocks/Notification.vue 10:23-242
@ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/laravel-file-manager/src/FileManager.vue
@ ./node_modules/laravel-file-manager/src/FileManager.vue
@ ./node_modules/laravel-file-manager/src/init.js
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss
Asset Size Chunks Chunk Names
/js/app.js 2.9 MB 0 [emitted] [big] /js/app
/css/app.css 214 kB 0 [emitted] /js/app
ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-dc07b964","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/laravel-file-manager/src/components/blocks/Notification.vue
(Emitted value instead of an instance of Error)
Error compiling template:
@ ./node_modules/laravel-file-manager/src/components/blocks/Notification.vue 10:23-242
@ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/laravel-file-manager/src/FileManager.vue
@ ./node_modules/laravel-file-manager/src/FileManager.vue
@ ./node_modules/laravel-file-manager/src/init.js
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\grego\AppData\Roaming\npm-cache_logs\2018-12-22T15_18_21_112Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: npm run development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\grego\AppData\Roaming\npm-cache_logs\2018-12-22T15_18_21_150Z-debug.log
C:\laragon\www\homestead>
Hello, how to implement this package in a laravel application with the laravel filemanager created by the same author.
Hi, is it posible to make this as file selector that returns file path on select like asgardcms has media manager.
https://github.com/Idavoll/Media/blob/3.0/Assets/js/components/SingleMedia.vue
https://github.com/Idavoll/Media/blob/3.0/Assets/js/components/MultipleMedia.vue
Thanks
Hello,
First of all, thank you for this beautiful project, it's very beautiful and well-built.
I need some information concerning the initialization of the file-manager. I need to initialize my file-manager in a specific disk ( it's fix : public ), and a specific folder (depends, for example /pictures/id_1145).
But I didn't found the way to configure my file-manager on this way.
I saw a previous issue and the demo you posted. But I don't find the way to request the opening directly on the specific folder.
Do I need to launch a store function after the initialization of the file-manager ? If so, which one and how can I know that the file-manager is initialized ?
I don't know if I'm clear, I hope you will be able to help me.
I've two last questions :
After the initialization of my file-manager in this specific folder, for example /pictures/id_1145, is it possible to avoid the user to exit of this folder, I mean, he can navigate on this folder and his children but not go back on his parent (/pictures).
Is it possible to initialize the file manager if a specific way : hide the hidden files ( the eye button ) and in grid (not in list).
Thanks for your answers
Lucas
The application itself uses axios and by default, a token is sent to all requests in the headers. Tell me how to attach a token in your package?
Thank you in advance
I want to use vue-laravel-file-manager. However I don't know what type of data is passed from the backend? And how to configure vue-laravel-file-manager to get data from the backend? Can you help me? Thanks!
I tried for many hours each day and I am not able to get this to load.
I installed vue and vuex and put this in my app.js and also I installed the filemanager through node.
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});
I included bootstrap, app.js and app.css, font awesome and the file-manager tag. I added a web route as well. And I am getting a blank screen.
I was able to get vuejs working through the default laravel Component, but filemanager isn't loading for me.
I also ran npm run watch as well.
Hi,
It shown save successfully but it not saved actually, the image still remain uncropped.
thanks for the great package btw 👍
You can have sanitizing strings to be used as filenames, or at least avoid whitespace and accented characters?
Is there settings to got selected file after dblclick instead of view it?
Can you add drop files to upload ?
I got errors when edit json file. When editing plain text files works fine.
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Object.
found in
---> <Codemirror>
<TextEdit> at node_modules/laravel-file-manager/src/components/modals/views/TextEdit.vue
<Modal> at node_modules/laravel-file-manager/src/components/modals/Modal.vue
<FileManager> at node_modules/laravel-file-manager/src/FileManager.vue
<Root>
warn @ app.js:24080
assertProp @ app.js:25119
validateProp @ app.js:25047
updateChildComponent @ app.js:26336
prepatch @ app.js:27631
patchVnode @ app.js:29412
updateChildren @ app.js:29309
patchVnode @ app.js:29423
updateChildren @ app.js:29309
patchVnode @ app.js:29423
patch @ app.js:29583
Vue._update @ app.js:26157
updateComponent @ app.js:26275
get @ app.js:26629
run @ app.js:26706
flushSchedulerQueue @ app.js:26468
(anonymous) @ app.js:25324
flushCallbacks @ app.js:25245
app.js:24080 [Vue warn]: Error in callback for watcher "value": "TypeError: string.split is not a function"
found in
---> <Codemirror>
<TextEdit> at node_modules/laravel-file-manager/src/components/modals/views/TextEdit.vue
<Modal> at node_modules/laravel-file-manager/src/components/modals/Modal.vue
<FileManager> at node_modules/laravel-file-manager/src/FileManager.vue
<Root>
warn @ app.js:24080
logError @ app.js:25224
globalHandleError @ app.js:25219
handleError @ app.js:25208
run @ app.js:26722
flushSchedulerQueue @ app.js:26468
(anonymous) @ app.js:25324
flushCallbacks @ app.js:25245
app.js:25228 TypeError: string.split is not a function
at splitLinesAuto (app.js:1456)
at Doc.splitLines (app.js:6639)
at Doc.<anonymous> (app.js:6288)
at Doc.setValue (app.js:4103)
at CodeMirror.setValue (app.js:9866)
at VueComponent.handerCodeChange (app.js:80291)
at VueComponent.value (app.js:80291)
at Watcher.run (app.js:26720)
at flushSchedulerQueue (app.js:26468)
at Array.<anonymous> (app.js:25324)
Is it possible to make multi-select files ?
I have configured my base url
as MIX_LFM_BASE_URL=http://localhost:8080/blog.
But while loading the page the ajax request for initialization calling to
this 'http://localhost/file-manager/initialize 404 (Not Found)'
Did I miss anything?
please merge #44 and show me how i can change frontend language to farsi . thank you
Hi my friend, I am trying to create my own file manager. But I have no any experience in this job. I look at on your code for take an insight but I didn't know how you parse json for show file or folders. In other words, I want to know what object do you get from back-end? And, how do you parse it? Example:
You get from server:
{
"picture" :
{
"old": {"type":"dir","url":"www.example.con/..."},
"image1":{"type": "jpeg", "url": "..."},
}
}
On front-end:
directories= this.getDirectories();
for ([name, desc] of directories) {
//handling
}
Is your app algorithm like this? Or, are there a better way?
Hi,
How I cat get acces to the fmSetLink function inside vue component.
Thank You!
use the projec at vue. will throw error:
[Vue warn]: Error in render: "TypeError: Cannot read property 'back' of undefined"
found in
---> at node_modules/laravel-file-manager/src/components/blocks/Navbar.vue
at node_modules/laravel-file-manager/src/FileManager.vue
at src/views/cloud/FileManager/index.vue
at src/layout/components/AppMain.vue
at src/layout/index.vue
at src/App.vue
This is the vue page.
<script> export default { data() { return { settings: { // axios headers headers: { 'X-Requested-With': 'XMLHttpRequest', Authorization: `Bearer ${window.localStorage.getItem('user-token')}` }, baseUrl: 'http://localhost:8013/api/cloud/cloudDiskFileInfo/', windowsConfig: 2, lang: 'zh_CN', translation: { name: 'zh_CN', content: { about: '关于', back: '后退' } } } } } } </script>Hi,
I have installed Laravel in sub directory. The base URL always goes to main site.
This is my code in app.js
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, // required
baseUrl: 'http://mysite.com/newplatform/public/file-manager/initialize',
});
window.fm = new Vue({
el: '#fm',
store,
template: ''
});
But it still hits the url "http://mysite.com/file-manager/initialize"
I have also set this in .env
MIX_LFM_BASE_URL=http://mysite.com/newplatform/public/file-manager/initialize
But it's still not working. Can you please take a look?
Thanks
Hello sir,
I have followed your installation and i'm happy to use your package. But one little problem that confuse me was i got error on console called like this tittle, "cannot read property 'status' of undefined" means something object named status was undefined.
Here some picture that i captured for sake to inform you.
Below is the module package frontend look
Console return undefined error on status
Several file-manager settings in laravel config. Filesystem config set to default
Thank you for your help sir
Hi Dev master,
Is this library has anyway to selected default location of directory by using param disk and path ?
for example: if I set setting disk: diskA / path: directoryA/folderA, Can this app default at diskA/directoryA/folderA?
Thank you.
import FileManager from 'laravel-file-manager'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store()
Vue.use(FileManager, {store})
We are getting Vuex error when initialize new Vuex store.
vuex.esm.js?358c:97 Uncaught Error: [vuex] getters should be function but "getters.fm/diskList" in module "fm" is [].
hello I have a component in vuejs where I have a dynamic button that creates many file managers
file manager is displayed correctly but...
when I try to capture the url of the file manager I get the following error
my code
<div class="col-12" v-for="(line, index) in lines" :key="index">
<div class="form-group">
<img v-lazy-src="line.image" src="" :id="'image-'+index" @load="getImage" :alt="line.image" class="img-thumbnail">
</div>
<div class="form-group">
<button class="btn btn-outline-primary" type="button" :id="'button-image-'+index" @click="openGallery"><i class="fas fa-image"></i> Seleccionar Imagen de la Galeria</button>
</div>
</div>
<script>
var n = 0;
export default{
methods:{
openGallery: function(event){
window.open('../../file-manager/fm-button', 'fm', 'width=800,height=400')
function fmSetLink($url) {
//document.getElementById('image_label').value = $url;
document.getElementById('image-' + this.n).src = $url;
}
});
},
getImage: function(){
this.line.image = document.getElementById('image')
},
addLine: function() {
this.lines.push({
image:'',
n:n++
})
},
}
}
</script>
What am I doing wrong, I'm a novice help me pls
Hi. I init your app in my resources/js/app.js :
`
window.Vue = require('vue');
import Vuex from 'vuex';
import FileManager from 'laravel-file-manager'
//Registration FileManager component
Vue.use(Vuex);
const store = new Vuex.Store();
Vue.use(FileManager, {store});
const app = new Vue({
el: '#app',
store:store
});
`
FileManager loaded ok. But when I try upload some image I get response:
app.js:86753 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined`
I debug it in:
uploadFiles() { // if files exists if (this.countFiles) { // upload files this.$store.dispatch('fm/upload', { files: this.newFiles, overwrite: this.overwrite, }).then((response) => { console.log(response); // if upload is successful if (response.data.result.status === 'success') { // close modal window this.hideModal(); } }); } },
in Upload.vue
I missed something? Thank you for yours sugestions.
Hello!
I am trying to use your awesome file manager but I ran into two problems.
The first one: Images are not shown due to lack of authorization header. I can upload and delete images but the images themselves are not shown. Error in console -
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://api-a2key/file-manager/thumbnails?disk=images&path=logo.png with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
This is because the server's answer is {"error":"Unauthorized"}
as I use middleware on the server.
When I try the same file-manager's link in Postman with header Authorization: Bearer 'token is here'
I see the image needed. As I can see this header is not used for images src requests in my Vue app. When I remove the middleware - everything is shown correctly.
My app config:
Vue.use(FileManager, {
store,
baseUrl: process.env.VUE_APP_FILE_MANAGER_API,
windowsConfig: 2
})
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.token
axios.defaults.baseURL = process.env.VUE_APP_ROOT_API
I tried to add headers: {'Authorization': 'Bearer ...'}
to config, but that didn't help.
The second: can I initialize and use file manager in a separate component? There are a lot of dynamic imports in my app and I would like not to include file-manager in app.js as there are client and admin pages.
Hey, I saw that I can configurate more than one Disk, but I want to make it individualy, Ex:
3 disks, 3 diferent pages (and manager)
How can I do that?
Thx!
Добрый день! Отличный файл менеджер! Спасибо за него)
Как открыть файл менеджер в модальном окне? И чтобы была возможность выбора файла? И как отследить событие выбора файла? Но сделать это внутри компонента vue...
Hello !
The license to laravel-file-manager is MIT, but there doesn't seem to be any license to vue-laravel-file-manager. To all intents, vue-laravel-file-manager seems proprietary right now.
Is it the same license as laravel-file-manager ? Or is it governed by another license ? Thanks for your clarification.
Best regards !
Xyrop
Wonder how to use VueRouter and actually change url when navigating to folders in FileManagers. I want to use it like standalone, so this opportunity will be great
Hi,
This is very powerful package with every functionality needed.
There are few configuration that would be awesome to have in this project.
This is just some suggestions for improvement.
npm install laravel-file-manager --save
from
root laravel project folder
or
from resources/js
I compile my css and js with command
npm run dev
from root folder
I need initalize file picker callback in component?
Hi @alexusmai, Thank you for this package.
Screenshot: https://prnt.sc/pcven2
Here, I selected 2 images, I want to perform same action of "Insert" on the click of "Ok" button, When I click on "Ok" button then I want that 2 selected file.
I this possible?
Thank You
Vishal.
Add capability to open pdf file in new tab by double click, please.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.