In my laravel 5.6 application I have image upload and preview system with javascript, this is my file,
@extends('layouts.app')
@section('content')
<div class="container">
<div class="col-md-8 offset-md-2">
<h1>New Category</h1>
<hr/>
<form method="POST" action="http://localhost:8000/laravel-crud-image-gallery/create" accept-charset="UTF-8" enctype="multipart/form-data"><input name="_token" type="hidden" value="1LLYc0D1spmVSFMboLDjGM9MR4O5APVwng7giejx">
<div class="form-group row required">
<label for="description" class="col-form-label col-md-3 col-lg-2">Description</label>
<div class="col-md-8">
<input class="form-control" autofocus placeholder="Description" name="description" type="text" id="description">
</div>
</div>
<div class="form-group row">
<label for="image" class="col-form-label col-md-3">Image</label>
<div class="col-md-5">
<img id="preview"
src="http://localhost:8000/images/noimage.png"
height="200px" width="200px"/>
<input class="form-control" style="display:none" name="image" type="file" id="image">
<br/>
<a href="javascript:changeProfile();">Add Image</a> |
<a style="color: red" href="javascript:removeImage()">Remove</a>
<input type="hidden" style="display: none" value="0" name="remove" id="remove">
</div>
</div>
<!-- <div class="form-group row required">
<label for="description" class="col-form-label col-md-3 col-lg-2">Description</label>
<div class="col-md-8">
<input class="form-control" autofocus placeholder="Description" name="description" type="text" id="description">
</div>
</div>-->
<div class="form-group row">
<div class="col-md-3 col-lg-2"></div>
<div class="col-md-4">
<a href="{{route('categories.index')}}" class="btn btn-danger">
Back</a>
<button type="submit" class="btn
btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
function changeProfile() {
$('#image').click();
}
$('#image').change(function () {
var imgPath = $(this)[0].value;
var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
readURL(this);
else
alert("Please select image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
$('#remove').val(0);
}
}
}
function removeImage() {
$('#preview').attr('src', 'http://localhost:8000/images/noimage.png');
$('#remove').val(1);
}
</script>
but after add @section('content') to my script my image upload preview is not working without @section('content') is is working. how can fix this problem?
@yield('scripts') in your main template in the spot where you want your custom scripts added to the html@section('scripts') before and an @endsection below your scriptsThis way you can add scripts to the main view when needed.
When you are extending a main template, all other code should be within @section blocks
@lostdreamer_nl this is my app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Acxian</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Acxian
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<a href="{{ route('manage.dashboard') }}">
Manage
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
then, How can I add @yield('scripts')?
@@lostdreamer_nl did you mean this way?
@extends('layouts.app')
@section('js')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
function changeProfile() {
$('#image').click();
}
$('#image').change(function () {
var imgPath = $(this)[0].value;
var ext = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (ext == "gif" || ext == "png" || ext == "jpg" || ext == "jpeg")
readURL(this);
else
alert("Please select image file (jpg, jpeg, png).")
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#preview').attr('src', e.target.result);
$('#remove').val(0);
}
}
}
function removeImage() {
$('#preview').attr('src', 'http://localhost:8000/images/noimage.png');
$('#remove').val(1);
}
</script>
@endsection
@section('content')
<div class="container">
<div class="col-md-8 offset-md-2">
<h1>New Category</h1>
<hr/>
<form method="POST" action="http://localhost:8000/laravel-crud-image-gallery/create" accept-charset="UTF-8" enctype="multipart/form-data"><input name="_token" type="hidden" value="1LLYc0D1spmVSFMboLDjGM9MR4O5APVwng7giejx">
<div class="form-group row required">
<label for="description" class="col-form-label col-md-3 col-lg-2">Description</label>
<div class="col-md-8">
<input class="form-control" autofocus placeholder="Description" name="description" type="text" id="description">
</div>
</div>
<div class="form-group row">
<label for="image" class="col-form-label col-md-3">Image</label>
<div class="col-md-5">
<img id="preview"
src="http://localhost:8000/images/noimage.png"
height="200px" width="200px"/>
<input class="form-control" style="display:none" name="image" type="file" id="image">
<br/>
<a href="javascript:changeProfile();">Add Image</a> |
<a style="color: red" href="javascript:removeImage()">Remove</a>
<input type="hidden" style="display: none" value="0" name="remove" id="remove">
</div>
</div>
<!-- <div class="form-group row required">
<label for="description" class="col-form-label col-md-3 col-lg-2">Description</label>
<div class="col-md-8">
<input class="form-control" autofocus placeholder="Description" name="description" type="text" id="description">
</div>
</div>-->
<div class="form-group row">
<div class="col-md-3 col-lg-2"></div>
<div class="col-md-4">
<a href="{{route('categories.index')}}" class="btn btn-danger">
Back</a>
<button type="submit" class="btn
btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
@endsection
Your js scripts are not loaded. You need to add them inside the section either the same or a new one. Just below your @yield('contents') add a line @yield('scripts') then in your other blade files where you need to add scripts use @section('scripts') ...... your scripts here @endsection you can also use @stop instead of @endsection that would be much convenient in my opinion.
Here's an excerpt from laravel frontend tutorial from webtrickshome where two sections are added in a blade. @extends('frontend.master')
@section('meta') {{$data->meta_title}} @stop
@section('content')
@webtrickshome I am still struck????
app.blade.php:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Acxian</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Acxian
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<a href="{{ route('manage.dashboard') }}">
Manage
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
@yield('js')
</body>
</html>
That should work with the template as you posted 55 minutes ago.
note the @yield('js') in the bottom
@lostdreamer_nl nice it is working....
Please or to participate in this conversation.