I was experimenting with Stripe JS and got in some issues with this error. Following is my Route View & JS File. When i submit the post, it gives me the following error, MethodNotAllowedHttpException
Route
> Route::get('buy', function () {
> return view('buy'); });
JS File
$( document ).ready(function(){
var StripeBilling = {
init: function(){
this.form = $('.billing-form');
this.submitButton = this.form.find('input[type=submit]');
var stripeKey = $('meta[name="secret-key"]').attr('content');
Stripe.setPublishableKey(stripeKey);
this.bindEvents();
},
bindEvents: function () {
this.form.on('submit', $.proxy(this.sendToken, this));
},
sendToken: function (event) {
this.submitButton.val('One Moment');
Stripe.createToken(this.form, $.proxy(this.stripeResponseHandler, this));
event.preventDefault();
},
stripeResponseHandler: function(status, response){
console.log(status, response);
}
};
StripeBilling.init();
})
Default View
#section('content')
<div class="row">
<h1>Buy for $1</h1>
{!! Form::open(['id' => '#billing-form']) !!}
<div class="form-row">
<label>
<span>Card Number:</span>
<input type="text" data-stripe="number">
</label>
</div>
<div class="form-row">
<label>
<span>CVC:</span>
<input type="text" data-stripe="cvc">
</label>
</div>
<div class="form-row">
<label>
<span>Expiration:</span>
{!! Form::selectMonth(null , null, ['data-stripe' => 'exp-month']) !!}
{!! Form::selectYear(null, date('Y'),date('Y') + 10, null, ['data-stripe' => 'exp-year'] ) !!}
</label>
</div>
<div>
{!! Form::submit('submit') !!}
</div>
{!! Form::close() !!}
</div>
#stop
#section('footer')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://js.stripe.com/v2/"></script>
<script src="/js/billing.js"></script>
#stop
In your routes file you defined the path as a GET request but your form submission is doing a POST request either change your form to submit as a GET request or update your routes so it is a POST request
Related
it's been a while since I stuck in this problem. So I want to make a dynamic selection, when I select a nis (student_id) then the column nama (name) is filled with the student name.
Input form
Output i want
method create
public function create()
{
return view('admin.counseling.create', [
'title' => 'Tambah Bimbingan dan Konseling',
'students' => Student::all()
]);
}
create_blade.php
<form action="/admin/counseling/store" method="post" enctype="multipart/form-data">
#csrf
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Nomor Induk Siswa</label>
<select name="nis" required class="form-control" id="nis">
<option value="0" disabled="true" selected="true">-Pilih-</option>
#foreach($students as $student)
<option value="{{$student->id}}">{{$student->nis}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" name="name" required />
</div>
</div>
</div>
<div class="row">
<div class="col text-right">
<button
type="submit"
class="btn btn-success px-5"
>
Simpan
</button>
</div>
</div>
</div>
</form>
I have watched and read some questions with similar problems, and yet I still didn't get it
UPDATE
My method in my controller
public function find_nis(Request $request)
{
$data = Student::find($request->id); //Counseling::with('student', 'student.student_class')->where('student_id', $request->id)->first();
return response()->json(['view' => view('admin.counseling.create', ['data' => $data])->render()]);
}
My Ajax in create.blade.php
<script type="text/javascript">
$(document).ready(function (){
$(document).on('change','.student_nis',function () {
var student_id = $(this).val();
var a = $(this).parent();
console.log(student_id);
var op="";
$.ajax({
type : 'GET',
url : '{!! URL::to('find_nis') !!}',
data : 'id=' + student_id,
success:function(data){
console.log(data);
a.find('.student_name').val(data.name);
},
error:function(){
}
});
});
});
</script>
My Route
Route::get('/admin/counseling/find_nis', [CounselingController::class, 'find_nis'])->name('find_nis');
this is output in my browser console when i select nis 1212
i think for getting response from DB without refresh page you should use ajax,
post student_id with ajax to Controller get username from DB and return your view like this:
in your blade:
first you must set this meta tag inside of :
<meta name="csrf-token" content="{{ csrf_token() }}">
then config and post your data with ajax like this:
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var studentId = $("input[name=student]").val();
$.ajax({
xhrFields: {withCredentials: true},
type:'POST',
url:"{{ route('getStudentInfo') }}",
data:{studentId:studentId},
success:function(data){
$('html').html(data.view);
}
});
</script>
in your Controller inside of getStudentInfo():
$student = DB::table('user')->find($studen_id);
$username = $student->username;
return response()->json(['view' => view('admin.counseling.create', compact('username'))->render()]);
Here the working solutions
*Route
Route::get('/admin/counseling/find_student', [CounselingController::class, 'find_nis'])->name('find_student');
*Controller
public function create()
{
return view('admin.counseling.create', [
'title' => 'Tambah Bimbingan dan Konseling',
'students' => Student::all(),
'problems' => Problem::all()
]);
}
public function find_nis(Request $request)
{
$student = Student::with('student_class')->findOrFail($request->id);
return response()->json($student);
}
*blade
<div class="container-fluid mt--7">
<div class="mt-8">
<div class="dashboard-content">
<div class="row">
<div class="col-12">
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form action="/admin/counseling/store" method="post" enctype="multipart/form-data">
#csrf
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Nomor Induk Siswa</label>
<select name="nis" required class="form-control" id="nis">
<option value="0" disabled="true" selected="true">-Pilih-</option>
#foreach($students as $student)
<option value="{{$student->id}}">{{$student->nis}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label>Nama</label>
<input type="text" class="form-control" name="student_name" id="student_name" disabled required/>
</div>
<div class="form-group">
<label>Kelas</label>
<input type="text" class="form-control" name="student_class_name" id="student_class" disabled required/>
</div>
<div class="form-group">
<label>Permasalahan</label>
<div class="row">
<div class="col">
#foreach ($problems as $problem)
<div class="form-check">
<input type="checkbox" id="" name="problem_name[]" value="{{ $problem->name }}">
<label class="fs-6 fw-light">{{ $problem->name }}</label>
</div>
#endforeach
</div>
</div>
</div>
<div class="form-group">
<label>Bobot Permasalahan</label>
<select name="priority" required class="form-control" id="nis">
<option value="null" disabled="true" selected="true">-Pilih-</option>
<option value="1">Normal</option>
<option value="3">Penting</option>
<option value="5">Sangat Penting</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col text-right">
<button
type="submit"
class="btn btn-success px-5"
>
Simpan
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
*ajax
<script type="text/javascript">
$(document).ready(function (){
$(document).on('change', '#nis', function() {
var student_id = $(this).val();
var a = $('#student_name').parent();
$.ajax({
type : 'GET',
url : '{{ route('find_student') }}',
data : 'id=' + student_id,
success:function(data){
a.find('#student_name').val(data.name);
},
error:function(){
}
});
});
$(document).on('change', '#nis', function() {
var student_id = $(this).val();
var a = $('#student_class').parent();
$.ajax({
type : 'GET',
url : '{{ route('find_student') }}',
data : 'id=' + student_id,
success:function(data){
a.find('#student_class').val(data.student_class.name);
},
error:function(){
}
});
});
});
</script>
I'm using vue and laravel and I'm also using sweet alert 2 for my error messages and I'm trying to get my error message to display if my product's status is not approved or it's empty, but it isn't showing up and I'm not getting anything in my console, but in my network tab the error is showing up.
Here is my code
<template>
<div>
<div class="row justify-content-center my-5">
<div class="col-md-6">
<div class="form">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" v-model="product.name">
</div>
</div>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description" v-model="product.description">{{ product.description }}</textarea>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success" #click="updateProduct()">Update Product</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['product'],
data() {
return {
}
},
methods: {
updateProduct(){
axios.put('/api/admin/products/'+this.product.id, {
'name': this.product.name,
'description': this.product.description
}).then(response => {
Swal.fire(
'Changes Saved',
'The product details have been updated',
'success'
)
}).catch(error => {
console.log(error);
Swal.fire(
'Oops!',
err.message,
'error'
)
})
}
},
mounted(){
}
}
</script>
My function
public function updateProduct(Product $product)
{
$outstanding = Product::where('status', 'pending')
->first();
if(!empty($outstanding->status) && $outstanding->status != 'Approved')
{
return [
'error' => "This product is not approved"
];
}
}
Add an error status code to it using response() function. Default status code is 200 which means successful in axios. You need to tell axios that it is an error and catch it. So, providing an error status code will do this for you. more info
if(!empty($outstanding->status) && $outstanding->status != 'Approved')
{
return response([
'error' => "This product is not approved"
], 400);
}
Additionally, you have a typo in your axios code. Change err to error
.catch(error => {
console.log(error);
Swal.fire(
'Oops!',
error.response.data.error,
'error'
)
})
I am uploading a file in Laravel 8 with having one bootstrap modal which works dynamically . everything is working fine but I want to improve my output more:
1) Update one of my forms through a modal without refreshing the page?
2) keep the modal open if the validation fails and print the errors to modal instead of my redirect page?
I will appreciate your time helping me.
my form for updating the file
<form action="{{ route('storefile' , $requisition->id) }}" method="POST"
enctype="multipart/form-data">
#csrf
#method('PUT')
<div class="form-group row">
<div class="col-sm-12">
<label for="title"> Account Status: </label>
<select class="form-control" name="acc_status">
<option value="0" {{ $requisition->acc_status == 0 ? 'selected' : '' }}> Inactive
</option>
<option value="1" {{ $requisition->acc_status == 1 ? 'selected' : '' }}> Active
</option>
</select>
</div>
<div class="col-sm-12 pt-4">
<label for="title"> Account document File: </label>
<div>
#if (!empty($requisition->acc_document))
<label class="badge-success">
{{ $requisition->acc_document }}
</label>
#else
<label class="badge-danger">
Nothing uploaded </label>
#endif
</div>
<input type="file" name="acc_document" class="form-control" id="acc_document" />
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-6 text-left">
<input type="submit" value="Upload document" class="btn btn-primary">
</div>
</div>
</div>
</div>
</form>
my controller and route
public function uploadFile($id) {
$requisition = Requisition::find($id);
return view('requisition.createFile' , compact('requisition'));
}
public function storeFile(Request $request , $id) {
$request->validate([
'acc_status' => 'required',
'acc_document' => 'required|mimes:doc,docx,pdf,txt,zip|max:2000',
]);
$requisition = Requisition::find($id);
$requisition->acc_status = $request->get('acc_status');
$FileName = uniqid() .$request->file('acc_document')->getClientOriginalName();
$path = $request->file('acc_document')->storeAs('uploads', $FileName , 'public');
$requisition->acc_document = '/storage/' . $path;
}
$requisition->save();
//$requisition->update($request->all());
return back()
->with('success', 'Your file has been uploaded successfully.');
}
Route::get('upload/{id}', [RequisitionController::class, 'uploadFile'])->name('upload');
Route::put('requisition/{id}/files', [RequisitionController::class, 'storeFile'])->name('storefile');
and last part my modal and ajax in my index page to upload the file and popup will open
<div class="col-md-6">
<a style="display:inline-block; text-decoration:none; margin-right:10px;"
class="text-secondary" data-toggle="modal" id="mediumButton"
data-target="#mediumModal" title="upload"
data-attr="{{ route('upload' , $requisition->id) }}">
<i class="fas fa-upload"></i>
</a>
</div>
<script>
// display a modal (medium modal)
$(document).on('click', '#mediumButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
// #if (count($errors) > 0) #endif
$('#mediumModal').modal("show");
$('#mediumBody').html(result).show();
$("#date-picker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
});
} ,
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
});
});
</script>
<!-- medium modal -->
<div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body" id="mediumBody">
<form id="modal-form" method="get">
<div>
<!-- the result of displayed apply here -->
</div>
</form>
</div>
</div>
</div>
</div>
#endsection
what I want to implement looks like enter image description here
There are several ways to do this kind of thing. One way to do it, is to do something like this:
Html:
<div class="modal" id="the-modal">
<form action="{{ $theAction }}" method="POST" id="the-form">
<input type="text" name="input-name" id="the-input">
<button type="submit">
</form>
<p id="the-text"></p>
</div>
In your Controller you will return an error or an 200 response, if everything is ok.
public function theAction(Request $request , $id) {
//Do stuff
if (!$error) {
return response("OK"); //This will return a 200 response
} else {
return response("An error happened", 500); //This will return a 500 error
}
}
Then, in your JS, you'll intercept form submission and then, you're going to be able to separate errors from ok messages:
<script>
$("#the-form").on('submit', function(event) {
event.preventDefault();
let theInput = $("#the-input");
$.ajax({
url: theUrl,
data: {
the-input: theInput
}
// 200 response
success: function(result) {
$("#the-text").empty();
$("#the-text").append(result.repsonse);
} ,
error: function(jqXHR, testStatus, error) {
$("#the-text").empty();
$("#the-text").append(error.response);
}
});
});
</script>
If you want to do all this stuff inside a modal, the concept is just the same: You intercept form submission, send to controller, return separate responses for errors and 200 responses, and then update manually the inputs/texts.
I did't test the code, but the concept should work.
I'm trying to integrate ckeditro with laravel livewire but everytime I enter content into the editor, livewire removes the editor from my textarea.
My code is as follows
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model="description"
></textarea>
</div>
The following is the javascript
$(document).ready(function () {
CKEDITOR.instances['description'].on('change', function(e){
#this.set('description', e.editor.getData());
});
});
Any help would be appreciated
Thanks
Update
I am slowly getting there. The only issue I have is that when I save the form, the ckeditor is removed from the textarea.
<div class="form-group" wire:ignore>
<label class="required" for="description">Page Description</label>
<textarea class="form-control ckeditor" id="description" name="description" cols="30" rows="10"
wire:model.debounce.9999999ms="description"
x-data
x-init="
CKEDITOR.instances['description'].on('change', function(e){
$dispatch('input', e.editor.getData())
});
"></textarea>
</div>
How I did solved CKEDITOR problem in Laravel-Livewire.
Textarea
<div wire:ignore class="form-group row">
<x-label class="col-md-3 col-form-label" for="message" :value="__('Compose message')" />
<div class="col-md-9">
<textarea wire:model="message" class="form-control required" name="message" id="message"></textarea>
<x-error-message :value="__('message')" />
</div>
</div>
CKEDITOR-4
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>
const editor = CKEDITOR.replace('message');
editor.on('change', function(event){
console.log(event.editor.getData())
#this.set('message', event.editor.getData());
})
</script>
CKEDITOR-5
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#message'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('message', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
Livewire has a .defer modifier that batches data updates with the next network request. More on Livewire Official Documentation
Tested on Laravel 8.4
Livewire v2.0
<form wire:submit.prevent="submit">
<div wire:ignore>
<textarea wire:model.defer="description" class="form-control" id="description" name="description">{!! $description !!}</textarea>
</div>
</form
Your CK editor instance
<script>
ClassicEditor
.create(document.querySelector('#description'))
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
I had the same problem.
You can re-initialize ckeditor with 'dehydrate'.
public function dehydrate() {
$this->emit('initializeCkEditor');
}
And in the parent view you can initialize the CKEditor again
Livewire.on('initializeCkEditor', function () {
ClassicEditor.create(document.getElementById('idOfTextarea')).then(editor => { thisEditor = editor });
});
When you save the form, Livewire reloads the Livewire component. Currently, you are loading ckeditor when the doc is ready.
On your save event, emit an event like:
$this->emitUp('postAdded');
And then in your javascript, add a listener for the event like:
<script>
window.livewire.on('postAdded' => {
CKEDITOR.instances['description'].on('change', function(e){
#this.set('description', e.editor.getData());
});
});
</script>
This should load ckeditor on the newly updated component code.
(https://laravel-livewire.com/docs/events)
Also, I would recommend changing this:
wire:model.debounce.9999999ms="description"
to this:
wire:model.lazy="description"
as this will wait until the textarea loses focus for Livewire to update.
(https://laravel-livewire.com/docs/properties#lazy-updating)
use wire:ignore in your container. This will prevent livewire to re-rendered the component. The explanation is here, just search in the code.
https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker
<div id="where-the-livewire-id-attached">
<div id="container-wrapper" wire:ignore>
<textarea id="your-editor" cols="30" rows="10"></textarea>
<div id="word-count"></div>
</div>
</div>
I did this using alpinejs x-init initialize the editor wire:model binds data value from the editor wire:ignore is for letting know livewire to skip the editor from re-rendering when the state changes
<div class="row">
<div class="col mb-3">
<label for="productDescription" class="form-label">Product
Description</label>
<div wire:ignore>
<textarea x-data x-init="ClassicEditor
.create(document.querySelector('#description'), {
})
.then(editor => {
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData());
})
})
.catch(err => {
console.error(err.stack);
});" id="description" wire:model.lazy="description" name="description" required>
{!! $description !!}
</textarea>
</div>
#error('description')
<span
class="text-warning"><small><strong>{{ $message }}</strong></small></span>
#enderror
<div class="form-text"><small class="text-muted">Enter a detailed
description of the product</small></div>
</div>
</div>
To make it work with ckeditor here is how we can do it
ClassicEditor
.create( document.querySelector( '#yourCkId' ) )
.then( editor => {
console.log( editor );
editor.model.document.on( 'change:data', () => {
// Below #this.set breaks down my ckeditor so I am avoiding it to set ckeditor value
// #this.set("description", editor.getData());
//instead use this
$('#yourTextAreaId').val(editor.getData());
} );
} )
.catch( error => {
console.error( error );
} );
and the HTML
<form wire:submit.prevent="store(document.querySelector('#yourTextAreaId').value)">
<div wire:ignore>
<div id="yourCkId">{!! $description !!}</div>
</div>
<textarea id="yourTextAreaId" wire:key="uniqueKey" wire:model="description" style="display: none">
{!! $description !!}
</textarea>
</form>
And Your Livewire Controller
public function store($note){
$this->note = $note;
}
<script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
<div>
<div wire:ignore>
<textarea class="form-control" wire:model="description" x-data x-init="
ClassicEditor
.create( $refs.editorDescription)
.then(function(editor){
editor.model.document.on('change:data', () => {
#this.set('description', editor.getData())
})
})
.catch( error => {
console.error( error );
} );" x-ref="editordescription">
</textarea>
</div>
I have a component that works on create form, but not on an update form. The image is being shown in the update form, but when I try to upload it, in the backend, I don't get any file for the field 'image'
This is the component:
<template>
<div>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" #change="onFileChange">
</div>
<div v-else>
<img :src="image" />
<input type="file" name="image" style="display:none">
<button #click="removeImage">Remove image</button>
</div>
</div>
</template>
<script>
export default {
props: {
image: {
type: String,
default: ""
}
},
data() {
return {
formData:new FormData(),
file: null
}
},
methods: {
onFileChange: function onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
this.formData.append('file', files[0]);
this.file = files[0];
},
createImage: function createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = function (e) {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
removeImage: function removeImage(e) {
this.image = '';
}
}
}
</script>
And this is how I call it in the create view:
<image-upload></image-upload>
And this is for the update view:
<image-upload image="/uploads/{{ $magazine->image }}"></image-upload>
But, when I do dd($request->all()) in the update function in my controller I get this output:
array:8 [▼
"_method" => "PUT"
"_token" => "oNkMAyKsKsxOpqeonRDvyusqtFrfVgBEQOnyNrFw"
"image" => "1.png"
"name" => "Article name"
"summary" => ""
"visual_id" => ""
"spid_id" => ""
"files" => "1"
]
And for the create function where it actually works I get:
array:6 [▼
"_token" => "oNkMAyKsKsxOpqeonRDvyusqtFrfVgBEQOnyNrFw"
"name" => "Article name"
"summary" => ""
"visual_id" => ""
"spid_id" => ""
"image" => UploadedFile {#222 ▶}
]
This is the form:
{!! Form::model($magazine, ['method' => 'PUT', 'route' => ['magazines.update', 'id' => $magazine->id, 'files' => true]]) !!}
<div class="row magasin-form large-6 large-offset-3 columns">
<ul class="tabs">
<li class="tabs-title is-active">Tilbake</li>
</ul>
<div class="tabs-content">
<div class="tabs-panel is-active">
#section('errors')
#include('layouts.partials.errors')
#show
<p>Redigere</p>
<div class="row">
<div class="large-12 columns">
<label>Navn
{!! Form::text('name', $magazine->name, ['placeholder' => 'Navn']) !!}
</label>
</div>
</div>
<image-upload image="/uploads/{{ $magazine->image }}"></image-upload>
<div class="row">
<div class="large-12 columns">
<label>Visual ID
{!! Form::text('visual_id', $magazine->visual_id, ['placeholder' => 'Visual id']) !!}
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Spid ID
{!! Form::text('spid_id', $magazine->spid_id, ['placeholder' => 'spid id']) !!}
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Summary
{!! Form::textarea('summary', $magazine->name) !!}
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
{!! Form::submit('Lagre', ['class'=> 'secondary button']) !!}
</div>
<div class="large-6 columns">
<a class="secondary hollow button" href="{{ route('magazines.index')}}">Avbryte</a>
</div>
</div>
</div>
</div>
</div>
{!! Form::close() !!}
Updated
I have also tried with changing my component to this:
<template>
<div class="Image-input">
<div class="Image-input__input-wrapper">
<h2>+</h2>
<input #change="previewThumbnail" class="Image-input__input" name="thumbnail" type="file">
</div>
<div class="Image-input__image-wrapper">
<i v-show="! imageSrc" class="icon fa fa-picture-o"></i>
<img v-show="imageSrc" class="Image-input__image" :src="imageSrc">
</div>
</div>
</template>
<script>
export default {
props: ['imageSrc'],
methods: {
previewThumbnail: function(event) {
var input = event.target;
if (input.files && input.files[0]) {
var reader = new FileReader();
var vm = this;
reader.onload = function(e) {
vm.imageSrc = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
}
}
</script>
But I get the same output for my form on update.
It looks like you're accidentally passing the files boolean to the route array instead. Try updating your form opening to:
{!! Form::model($magazine, ['method' => 'PUT', 'route' => ['magazines.update', 'id' => $magazine->id], 'files' => true]) !!}
Your input field doesn't have a name so that might be why the form won't pick it up
Not sure why you are modifying the FormData. Any Reason you can't just submit the <input> with the form instead of extracting it?
Try showing us how the form looks, the place where you put your image-upload component