my form:
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
</textarea>
</form>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
var options = {
filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
};
setTimeout(function(){
CKEDITOR.replace( 'editor1', options );
},100);
</script>
my route:
Route::middleware(['auth'])->group(function () {
Route::get('/laravel-filemanager', '\UniSharp\LaravelFilemanager\Controllers\LfmController#show');
Route::post('/laravel-filemanager/upload', '\UniSharp\LaravelFilemanager\Controllers\UploadController#upload');
});
Ckeditor is displayed. When I click on the img icon a window will open. But no files will be displayed.
I had a similar problem. Make sure you publish the vendor files
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
and clear the cache
php artisan cache:clear
It is also essential that the .env has the correct domain address.
Finally replace your routes with
Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
\UniSharp\LaravelFilemanager\Lfm::routes();
});
Related
Hy Guys,
I need to call a Vue.js function inside app.blade.php file. It should be triggered on a button click.
Here is the code sample I've used.
<button onclick="changeItem()">Saved Items</button>
changeItem() is a Vue.js function.
Kindly help :)
In your app.blade define the component
<div id="app">
<example-component></example-component>
</div>
By defualt laravel will include Vue JS packages in resources\js\app.js
In your resources\js\components\ExampleComponent.vue (Below Code)
<template>
<button v-on:click="say">Say what</button>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
// define methods under the `methods` object
methods: {
say: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ')
// `event` is the native DOM event
if (event) {
alert(event.target.tagName + " Clicked ")
}
}
}
}
</script>
Run : npm run watch // To compile app.js
Please mark/upvote if this finds helpful :)
<div id="app">
<button #click="changeItem">
{{message}}
</button>
</div>
new Vue({
data: {
message: "Save Items"
},
methods: {
changeItem() {
alert("Clicked!")
}
}
})
#click="changeItem" it is short form v-on:click="changeItem"
Please read this
I'm trying to create a SPA with laravel and vue. Also installed Voyager for admin purposed. Voyager is http://localhost:8000/admin .. which used laravel web route.
Can't access it now i'm using Vue Router for my routes:
Example for my Home Route (vue) http://localhost:8000/home
app.js
...
import VueRouter from 'vue-router';
import App from './components/App.vue';
import Home from './components/Home.vue';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
App.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
Home.vue
<template>
<p>This is the homepage</p>
</template>
index.blade.php
#extends('layouts.app')
#section('content')
<app></app>
#endsection
web.php
Auth::routes();
Route::get('/{vue_capture?}', function () {
return view('index');
})->where('vue_capture', '[\/\w\.-]*');
Route::group(['prefix' => 'admin'], function () {
Voyager::routes();
});
ok i solved it!!
exchanging the order of routes declaration in we.
web.php
Auth::routes();
Route::group(['prefix' => 'admin'], function () {
Voyager::routes();
});
Route::get('/{vue_capture?}', function () {
return view('index');
})->where('vue_capture', '[\/\w\.-]*');
I'm using Vue in Laravel 5.3. I have already worked with Laravel 5.2. But Laravel 5.3 and Vue.js is new for me. So I'm playing with these pair. I have completed Laravel Passport tutorial successfully. Now what I want to do is put my html template in blade file and js code in Vue component. But I'm getting this error:
[Vue warn]: Failed to mount component: template or render function not defined. (found in component )
So I can't understand reason of this error as I'm new in Vue.js. If any one knows answer, it will be appreciated. Here is my code.
Blade file
<body>
<div id="app">
<tasks></tasks>
</div>
<template id="tasks-template">
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
#{{task.body}}
</li>
</ul>
</template>
<script src="/js/app.js"></script>
</body>
/resources/assets/js/app.js
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
el: '#app'
});
/resources/assets/js/components/Tasks.js
export default {
template: '#tasks-template',
data: function () {
return {
list: ''
};
},
created: function() {
this.$http.get('/api/tasks').then((response) => {
this.list = response.body;
}, (response) => {
alert(0);
});
}
}
UPDATE
Blade file
<body>
<div id="app">
<tasks></tasks>
</div>
</body>
/resources/assets/js/components/Tasks.js
template: require('../components/tasks-template.html'),
instead of
template: '#tasks-template'
/resources/assets/js/components/tasks-template.html
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body}}
</li>
</ul>
But now getting this error.
Uncaught Error: Module parse failed: /var/www/html/casesync/resources/assets/js/components/tasks-template.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|
|
| #{{task.body}}
Lets say you have your template file as
/* resources/assets/js/components/tasks.template.html */
<div class="tasks-component component">
<ul class="list-group">
<li class="list-group-item" v-for="task in list">
{{task.body}}
</li>
</ul>
</div>
Then the Tasks.js would be
/* resources/assets/js/components/Tasks.js */
export default {
template: require('./tasks.template.html'),
data: function () {
return {
list: ''
};
},
created: function() {
this.$http.get('/api/tasks').then((response) => {
this.list = response.body;
}, (response) => {
alert(0);
});
}
}
The you can have your app.js as
/* app.js */
require('./bootstrap');
Vue.component('tasks', require('./components/Tasks').default);
const app = new Vue({
//el: '#app'
}).$mount('#app');
//your main index.php or entry point could be
<body>
<div id="app">
<tasks></tasks>
</div>
</body>
UPDATE
For the default/out-of-box webpack configuration to work on Laravel5.3, you will need to pull in html-loader through npm
npm install html-loader --save-dev
Then in the gulpfile.js - specify html-loader to be used for .html files.
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
const config = {
module: {
loaders:[
{
test: /\.html$/,
loader: 'html'
}
]
}
};
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js', null, null, config);
});
Finally you can register global components in your main/entry file app.js as
Vue.component('test-component', require('./test-component').default);
/* Or using ES2015 import */
import TestComponent from './test-component';
Vue.component('test-component', TestComponent);
I got help from #Alfa here
It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.
I had the same problem importing a vue component.
You have to change
Vue.component('tasks', require('./components/Tasks'));
change it to
Vue.component('tasks', require('./components/Tasks').default);
I'm learning Laravel and I have a problem returning the old inputs to the form.
ERROR:
TokenMismatchException in VerifyCsrfToken.php line 67:
ROUTES - all in the file
Route::group(['middleware' => ['web']], function () {
Route::get('/', function () {
return view('artigo');
$artigo = \App\Comentario::find(2)->artigo;
var_dump($artigo->title);
$comentarios = \App\Artigo::find(1)->comentario;
foreach($comentarios as $comentario){
var_dump($comentario->body);
}
});
Route::post('/', function(){
$rules = array(
'title'=>'required|max:10',
'body'=>'required|max:4'
);
$validator = Validator::make($_POST,$rules);
if($validator->fails())
return Redirect::to('/')->withInput()->withErrors($validator->errors());
return 'yooo';
});
});
BLADE VIEW
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/">
<input type="text" name="title" placeholder="titulo" value="{{ old('title') }}">
<input type="text" name="body" placeholder="body">
<input type="submit" value="go">
</form>
</body>
</html>
Any help?
ATENTION: im not using sessions yet
Assuming you are using version 5.2 this is might be because your requests are not utilising the sessions. In Laravel 5.2 Sessions are available only if you are using the web middleware.
You should include all routes using sessions within a middleware group called web which is defined in app/Http/Kernel.php under $middlewareGroups
Route::group(['middleware' => ['web']], function () {
// Routes using sessions
});
Hello i use same script for Laravel 4.2 and Laravel 5.1 and problem is for Laravel 4.2 work perfectly, but on Laravel 5.1 i can't understand why it's return bad result
Problem is why I got $request->ajax() false for Laravel 5.1?
routes.php
Route::post('/upload-image', [
'as' => 'upload-image-post',
'uses' => 'PageController#profileImage'
]);
PageController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class PageController extends Controller
{
public function profileImage(Request $request)
{
//here is problem
//result good: (Laravel 4.2 shows true)
//result bad: (Laravel 5.1 shows false)
var_dump($request->ajax());
}
}
upload-image.blade.php (js)
<script>
jQuery(document).ready(function($) {
$('#upload_image').click(function(event) {
$('#image').trigger('click');
});
$('#image').change(function(event) {
/* Act on the event */
$('#imageform').submit();
});
$('#imageform').ajaxForm({
beforeSubmit: function() {
},
success: function(msg) {
},
error: function(request, status, error) {
},
complete: function(xhr) {
if(xhr.status != 401) {
$('#image').val('');
result = xhr.responseText;
result = $.parseJSON(result);
if( !$.isEmptyObject(result.file_base_url) ) {
var img = new Image();
img.onload = function() {
$('#register_profile_photo').attr('src', img.src);
$('#register_profile_photo').attr('alt', result.image_alt);
//spinner.stop();
$('#upload-image-error').text('');
}
img.src = result.file_base_url;
} else {
$('#upload-image-error').text(result.image[0]);
}
}
}
});
});
upload-image.blade.php (html)
<form enctype="multipart/form-data" name='imageform' role="form" id="imageform" method="post" action="{!! route('upload-image-post') !!}">
{!! csrf_field() !!}
<div style="display:none;">
<input type="file" name="image" id="image" placeholder="Please choose your image" >
</div>
</form>
<div class="profile-img">
<img style="float: right" id="register_profile_photo" src="default.png" alt="Default image">
<div style="float: right" class="img-edit">Edit picture</div>
</div>
PS. If you test for laravel 4.2 this code need change from "{!! .. !!}" to "{{ .. }}"
I do not think this problem is caused by Laravel version. Laravel sources show, that ajax() call is propagated to Symfony's request component. And that source changed good 5 years back.
You should trace if X-Requested-With header is sent to your application in both cases. You can also set breakpoint to Symfony\Component\HttpFoundation\Request::isXmlHttpRequest() and see what you have in headers.