Laravel-filemanager: vue js integration?

Created on 20 Sep 2018  路  10Comments  路  Source: UniSharp/laravel-filemanager

hello, i already using this extension with tiny-mce and it works wonder, i also tried to do the standalone one and it works just like expected...

now i am migrating my admin page to spa vue js and i have no idea how to integrate it into vue js... is there any documentation avaiable for integrating it with vue js?

WIP enhancement
Source
picture t0n1zz

Most helpful comment

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

picture streamtw on 20 Sep 2018
👍2

All 10 comments

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

streamtw picture streamtw on 20 Sep 2018
👍2

Instead of opening in a new window. How can we make it open in a dialog box like it does on tinymce?

antoniodesa picture antoniodesa on 20 Sep 2018

yes i agree, instead of opening new windows it can be like i put it into modals? since my application is vue js SPA

t0n1zz picture t0n1zz on 21 Sep 2018

I solved it this way - Through Ref links.
Perhaps this approach is a bit impractical, but at least it works.

Component by template
<tiny-mce api-key="####****#####" ...your props... :init="{ ...your params... file_browser_callback: file_browser_callback }" ref="tinymce" v-model="text" > </tiny-mce>

Script method

export default {
  ...
  methods: {
          file_browser_callback(field_name, url, type, win) {
                let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                let cmsURL = '/laravel-filemanager?field_name=' + field_name;

                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                this.$refs.tinymce.editor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            },
}
  ...
}
valanhol picture valanhol on 8 Oct 2018
👍1

Need document enhancements for this thread.

streamtw picture streamtw on 30 Nov 2018

I solved it this way - Through Ref links.
Perhaps this approach is a bit impractical, but at least it works.

Component by template
<tiny-mce api-key="####****#####" ...your props... :init="{ ...your params... file_browser_callback: file_browser_callback }" ref="tinymce" v-model="text" > </tiny-mce>

Script method

export default {
  ...
  methods: {
          file_browser_callback(field_name, url, type, win) {
                let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                let cmsURL = '/laravel-filemanager?field_name=' + field_name;

                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                this.$refs.tinymce.editor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            },
}
  ...
}

this doesn't work on mine. says this.$refs is undefined

nebed picture nebed on 23 Mar 2019

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

I tried this. It worked, but i meet issue with CORS when select an image from open window

dukinfotech picture dukinfotech on 13 Dec 2019

Is there any update on the Vue.js integration?

ive tried the above methods and navigating straight to www.myapp.com/laravel-filemanager but this only opens my index component showing the header and footer.

kinger251285 picture kinger251285 on 28 Jan 2020

@t0n1zz you can try the following:

HTML:

<div class="input-group">
  <div class="input-group-btn">
    <a class="btn btn-info" @click="openFileManager">
      <i class="fa fa-picture-o"></i> Choose
    </a>
  </div>
  <input type="text" class="form-control" v-model="form.main_image">
</div>
<img class="mt-3" :src="form.main_image" />

Javascript:

export default {
  ...
  methods: {
    openFileManager () {
      window.open(`/laravel-filemanager?token=${Cookie.get('api_token')}`, 'width=900,height=600')
      var self = this
      window.SetUrl = function (items) {
        self.form.main_image = items[0].url
      }
      return false
    }
  }
  ...
}

We should append it to the integration document before next release.

v-on handler: "ReferenceError: Cookie is not defined"

How to get cookie laravel passport?

ahmadbagwi picture ahmadbagwi on 14 Apr 2020

I solved it this way - Through Ref links.
Perhaps this approach is a bit impractical, but at least it works.

Component by template
<tiny-mce api-key="####****#####" ...your props... :init="{ ...your params... file_browser_callback: file_browser_callback }" ref="tinymce" v-model="text" > </tiny-mce>

Script method

export default {
  ...
  methods: {
          file_browser_callback(field_name, url, type, win) {
                let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                let cmsURL = '/laravel-filemanager?field_name=' + field_name;

                if (type == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                this.$refs.tinymce.editor.windowManager.open({
                    file : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no"
                });
            },
}
  ...
}

For anyone else who is on TinyMCE v5 file_browser_callback needs to be changed with file_picker_callback for the browse button to appear in the editor.
Source: https://stackoverflow.com/a/56737927

This is an updated code:

file_picker_callback(callback, value, meta) {
        var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
        var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

        var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + meta.fieldname;
        if (meta.filetype == 'image') {
          cmsURL = cmsURL + "&type=Images";
        } else {
          cmsURL = cmsURL + "&type=Files";
        }

        this.$refs.tinymce.editor.windowManager.openUrl({
          url: cmsURL,
          title: 'Filemanager',
          width: x * 0.8,
          height: y * 0.8,
          resizable: "yes",
          close_previous: "no"
        });
      }
dima2306 picture dima2306 on 11 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

intergalactisch picture intergalactisch  路  5Comments
Dzhangar1980 picture Dzhangar1980  路  4Comments
farshidrezaei picture farshidrezaei  路  4Comments
t67132 picture t67132  路  3Comments
ikkosatrio picture ikkosatrio  路  4Comments