i want to preview the uploaded picture before someone is clicking submit or save. I want to preview it before the request is sent. I tried it like that:How to show image preview before uploading from controller in php laravel <- not working for me
@extends('layouts.app')
@section('content')
<script>
function readURL(input)
{
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e) {
$('#category-img-tag').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#cover_image").change(function(){
readURL(this);});
</script>
<h1>Edit Post</h1>
{!! Form::open(['action' => ['PostsController@update', $post->id], 'method' => 'POST', 'enctype' => 'multipart/form-data']) !!}
{{Form::submit('Submit', ['class'=>'btn btn-primary pull-right', 'name' => 'Submit', 'value' => 'Submit', 'style' => 'margin: 10px 10px 10px 10px'])}}
<div class="form-group">
{{Form::label('title', 'Title')}}
{{Form::text('title', $post->title, ['class' => 'form-control', 'placeholder' => 'Title'])}}
</div>
<div class="form-group">
{{Form::label('body', 'Body')}}
{{Form::textarea('body', $post->body, ['id' => 'article-ckeditor', 'class' => 'form-control', 'placeholder' => 'Body Text'])}}
</div>
<div class="form-group">
{{Form::file('cover_image', ['id' => 'cover_image', 'type' => 'file'])}}
<img src="#" id="category-img-tag" width="200px" />
</div>
{{Form::hidden('_method','PUT')}}
{{Form::submit('Speichern', ['class'=>'btn btn-secondary', 'name' => 'Speichern', 'value' => 'Speichern'])}}
{!! Form::close() !!}
<br>
<div class="col-md-4 col-sm-4" style=" padding: 18px 0px 0px 0px;">
<img style="width:100%" src="/storage/cover_images/{{$post->cover_image}}">
</div>
@endsection
but the javascript is not working and the
<img src="#" id="category-img-tag" width="200px" />
is not displaying the picture once i selected one. please help
