Apr 16, 2020
0
Level 4
Laravel 7 Upload image failed with validation & with vue
I try to update photo from .vue file to my back end Laravel Controller file not uploaded giving an error The bank field is required.
my Vue code
<template>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-12 col-xs-12 col-md-12 col-lg-12 d-flex justify-content-center">
<h3>NatTest Form</h3>
</div>
</div>
<div class="row">
<div class="col-12 col-xs-12 col-md-12 col-lg-12">
<main>
<form method="POST" action="/student/test/form" @submit.prevent="onFormSubmit">
<div class="form-header">
<h1 class="form-header__title">NatTest Form</h1>
<p class="form-header__progress">Step 2 of 1</p>
</div>
<fieldset class="mailing">
<label for="testname">
Test Name
<input id="testname" name="testname" autocomplete="testname" value="old('testname')" autocorrect="off" type="text" autofocus @keydown="errors.testname = null" v-model="testname" readonly/>
<p class="alert-danger" role="alert" v-if="errors.testname">{{ errors.testname[0] }}</p>
</label>
<label for="date_of_test">
Date of Test</label>
<input class="form-control" id="date_of_test" name="date_of_test" autocomplete="date_of_test" value="old('date_of_test')" autocorrect="off" type="date" autofocus @keydown="errors.date_of_test = null" v-model="date_of_test" readonly/>
<p></p>
<p class="alert-danger" role="alert" v-if="errors.date_of_test">{{ errors.date_of_test[0] }}</p>
<p></p>
<label for="date_of_place">
Place Of Exam
<input id="date_of_place" name="date_of_place" autocomplete="date_of_place" value="old('date_of_place')" autocorrect="off" type="text" autofocus @keydown="errors.date_of_place = null" v-model="date_of_place" readonly/>
<p class="alert-danger" role="alert" v-if="errors.date_of_place">{{ errors.date_of_place[0] }}</p>
</label>
<label for="submittion_date">
Last Submittion Date</label>
<input class="form-control" id="submittion_date" name="submittion_date" autocomplete="date_of_test" value="old('submittion_date')" autocorrect="off" type="date" autofocus @keydown="errors.submittion_date = null" v-model="submittion_date" readonly/>
<p></p>
<p class="alert-danger" role="alert" v-if="errors.submittion_date">{{ errors.submittion_date[0] }}</p>
<p></p>
<label for="grade">
Grade </label>
<select class="form-control" id="grade" name="grade" @change="errors.grade = null" v-model="grade">
<option selected disabled>Choose...</option>
<option v-for="val in grades" :data-fee="val.fee">{{ val.grade }} </option>
</select>
<p></p>
<p class="alert-danger" role="alert" v-if="errors.grade">{{ errors.grade[0] }}</p>
<p></p>
<label for="fee">
Fee
<input id="fee" name="fee" autocomplete="fee" autocorrect="off" type="text" autofocus @keydown="errors.fee = null" value="" readonly/>
<p class="alert-danger" role="alert" v-if="errors.fee">{{ errors.fee[0] }}</p>
</label>
<label for="transaction_detail">
Bank Detail
<input id="transaction_detail" name="transaction_detail" autocomplete="transaction_detail" value="old('transaction_detail')" autocorrect="off" type="text" autofocus @keydown="errors.transaction_detail = null" v-model="transaction_detail"/>
<p class="alert-danger" role="alert" v-if="errors.transaction_detail">{{ errors.transaction_detail[0] }}</p>
</label>
<label for="transaction_number">
Transaction Number
<input id="transaction_number" name="transaction_number" autocomplete="transaction_number" value="old('transaction_number')" autocorrect="off" type="text" autofocus @keydown="errors.transaction_number = null" v-model="transaction_number"/>
<p class="alert-danger" role="alert" v-if="errors.transaction_number">{{ errors.transaction_number[0] }}</p>
</label>
<label for="mode_of_payment">
Mode Of Payment Done </label>
<select class="form-control" id="mode_of_payment" name="mode_of_payment" @change="errors.mode_of_payment = null" v-model="mode_of_payment">
<option selected disabled>Choose...</option>
<option value="1">NEFT</option>
<option value="2">IMPS</option>
<option value="3">BHIM</option>
<option value="4">CASH</option>
<option value="5">Google pay</option>
<option value="6">Paytm</option>
<option value="7">Mobikwik</option>
<option value="8">Amazon Pay</option>
<option value="9">Airtel Pay</option>
<option value="10">Whatsapp upi</option>
<option value="11">Other Payment Way</option>
</select>
<p></p>
<p class="alert-danger" role="alert" v-if="errors.mode_of_payment">{{ errors.mode_of_payment[0] }}</p>
<p></p>
<label for="bank">
Bank Transaction Receipt </label>
<!-- <input type="file" name="filename" id="inputFileUpload" v-on:change="onFileChange"> -->
<input id="bank" name="bank" type="file" @click="errors.bank = null"/>
<p></p>
<p class="alert-danger" role="alert" v-if="errors.bank">{{ errors.bank[0] }}</p>
<label for="institute">
Institute/Company
<input id="institute" name="institute" autocomplete="institute" value="old('institute')" autocorrect="off" type="text" autofocus @keydown="errors.institute = null" v-model="institute"/>
<p class="alert-danger" role="alert" v-if="errors.institute">{{ errors.institute[0] }}</p>
</label>
</fieldset>
<input class="btn btn-success mb-5 mt-2" name="submit" type="submit" value="Submit" />
</form>
</main>
<!-- <div class="card p-lg-3">-->
<!-- <div class="card-body">-->
<!-- <p class="card-text">-->
<!-- Custom design and open/close animation-->
<!-- </p>-->
<!-- <p class="mb-0">-->
<!-- <a data-fancybox data-animation-duration="500" data-src="#animatedModal" href="javascript:;" class="btn btn-primary">Open demo</a>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<div style="display: none;" id="animatedModal" class="animated-modal text-center p-5">
<h2>
Success!
</h2>
<p>
You have successfully Submit Profile<br />
</p>
<p class="mb-0">
<svg width="150" height="150" viewBox="0 0 510 510" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="#fff" d="M150.45,206.55l-35.7,35.7L229.5,357l255-255l-35.7-35.7L229.5,285.6L150.45,206.55z M459,255c0,112.2-91.8,204-204,204 S51,367.2,51,255S142.8,51,255,51c20.4,0,38.25,2.55,56.1,7.65l40.801-40.8C321.3,7.65,288.15,0,255,0C114.75,0,0,114.75,0,255 s114.75,255,255,255s255-114.75,255-255H459z"></path>
</svg>
</p>
</div>
<div style="display: none;" id="animatedModalerror" class="animated-modal text-center p-5">
<h2>
Unsuccessful!
</h2>
<p>
Something went wrong please try again<br />
</p>
<p class="mb-0">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 215.038 215.038" style="enable-background:new 0 0 215.038 215.038;" xml:space="preserve">
<polygon style="fill:#F9AC54;" points="194.56,174.079 149.497,184.319 69.086,184.319 20.48,174.079 20.48,58.026 194.56,58.026
"/>
<path d="M149.497,187.732H69.086c-0.237,0-0.473-0.024-0.703-0.073l-48.606-10.24c-1.58-0.333-2.71-1.727-2.71-3.34V58.026
c0-1.886,1.527-3.413,3.413-3.413h174.08c1.886,0,3.413,1.527,3.413,3.413v116.053c0,1.594-1.103,2.976-2.657,3.33l-45.063,10.24
C150.004,187.702,149.75,187.732,149.497,187.732z M69.443,180.906h79.671l42.033-9.55V61.439H23.893v109.87L69.443,180.906z
M194.56,174.079h0.034H194.56z"/>
<path d="M77.664,133.802h-16.3v-29.24h16.3v3.021H64.763v9.421h12.121v3H64.763v10.761h12.901V133.802z"/>
<path d="M93.643,111.482c0.973,0,1.847,0.08,2.62,0.241l-0.461,3.081c-0.906-0.2-1.707-0.3-2.4-0.3c-1.773,0-3.29,0.72-4.55,2.161
c-1.26,1.44-1.889,3.234-1.889,5.379v11.761h-3.319v-21.92h2.739l0.381,4.06h0.16c0.814-1.427,1.794-2.526,2.941-3.301
C91.011,111.868,92.269,111.482,93.643,111.482z"/>
<path d="M110.363,111.482c0.973,0,1.847,0.08,2.62,0.241l-0.461,3.081c-0.906-0.2-1.707-0.3-2.4-0.3c-1.773,0-3.29,0.72-4.55,2.161
s-1.889,3.234-1.889,5.379v11.761h-3.319v-21.92h2.739l0.381,4.06h0.16c0.814-1.427,1.794-2.526,2.941-3.301
C107.732,111.868,108.989,111.482,110.363,111.482z"/>
<path d="M136.003,122.823c0,3.574-0.899,6.364-2.7,8.37c-1.801,2.005-4.287,3.011-7.46,3.011c-1.959,0-3.7-0.461-5.221-1.381
c-1.521-0.92-2.693-2.239-3.519-3.959c-0.826-1.72-1.241-3.734-1.241-6.04c0-3.574,0.893-6.357,2.679-8.351
c1.787-1.993,4.267-2.99,7.439-2.99c3.067,0,5.504,1.021,7.31,3.06C135.096,116.582,136.003,119.343,136.003,122.823z
M119.303,122.823c0,2.801,0.56,4.934,1.679,6.4c1.12,1.466,2.767,2.2,4.941,2.2s3.823-0.73,4.949-2.19
c1.126-1.459,1.69-3.596,1.69-6.41c0-2.787-0.563-4.903-1.69-6.35c-1.126-1.447-2.79-2.169-4.99-2.169
c-2.173,0-3.813,0.713-4.92,2.14C119.854,117.87,119.303,119.997,119.303,122.823z"/>
<path d="M151.823,111.482c0.973,0,1.847,0.08,2.62,0.241l-0.461,3.081c-0.906-0.2-1.707-0.3-2.4-0.3c-1.773,0-3.29,0.72-4.55,2.161
c-1.26,1.44-1.889,3.234-1.889,5.379v11.761h-3.319v-21.92h2.739l0.381,4.06h0.16c0.814-1.427,1.794-2.526,2.941-3.301
C149.192,111.868,150.45,111.482,151.823,111.482z"/>
<circle style="fill:#EC5582;" cx="170.667" cy="54.612" r="34.133"/>
<path d="M170.667,92.159c-20.704,0-37.547-16.843-37.547-37.547s16.843-37.547,37.547-37.547s37.547,16.843,37.547,37.547
S191.37,92.159,170.667,92.159z M170.667,23.892c-16.94,0-30.72,13.78-30.72,30.72s13.78,30.72,30.72,30.72s30.72-13.78,30.72-30.72
S187.607,23.892,170.667,23.892z"/>
<path d="M170.667,64.852c-1.886,0-3.413-1.527-3.413-3.413V34.132c0-1.886,1.527-3.413,3.413-3.413s3.413,1.527,3.413,3.413v27.307
C174.08,63.325,172.553,64.852,170.667,64.852z"/>
<path d="M170.667,78.506c-1.886,0-3.413-1.527-3.413-3.413v-3.413c0-1.886,1.527-3.413,3.413-3.413s3.413,1.527,3.413,3.413v3.413
C174.08,76.978,172.553,78.506,170.667,78.506z"/>
<path style="fill:#DDDDDD;" d="M136.533,174.079l-3.413,6.827h-51.2l-3.413-6.827H3.413c0,11.31,9.17,20.48,20.48,20.48h167.253
c11.31,0,20.48-9.17,20.48-20.48H136.533z"/>
<path d="M191.147,197.972H23.893C10.72,197.972,0,187.253,0,174.079c0-1.886,1.527-3.413,3.413-3.413h75.093
c1.294,0,2.473,0.73,3.053,1.886l2.47,4.941h46.979l2.47-4.941c0.58-1.157,1.76-1.886,3.053-1.886h75.093
c1.886,0,3.413,1.527,3.413,3.413C215.04,187.253,204.32,197.972,191.147,197.972z M7.17,177.492
c1.587,7.781,8.48,13.653,16.724,13.653h167.253c8.243,0,15.136-5.873,16.724-13.653h-69.226l-2.47,4.941
c-0.58,1.157-1.76,1.886-3.053,1.886h-51.2c-1.294,0-2.473-0.73-3.053-1.886l-2.471-4.941H7.17z"/>
<g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg>
</p>
</div>
<div style="display: none;" id="animatedModalerrortimeout" class="animated-modal text-center p-5">
<h2>
Unsuccessful!
</h2>
<p>
Connection timeout please retry after some time. <br />
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
$(document).ready(function(){
$('#grade').on('change', function(){
let fee = $(this).children('option:selected').data('fee');
$('#fee').val(fee);
//this.fee = fee
});
});
export default {
data() {
return {
id: '',
testname: '',
date_of_test: '',
date_of_place: 'Pune',
submittion_date: '',
grades: null,
grade:'',
fee: null,
transaction_detail: '',
transaction_number: '',
mode_of_payment: '',
bank_photo: '',
institute: '',
errors: [],
success : false,
}
},
mounted() {
let self = this;
axios('/user')
.then(function (response){
self.id = response.data.id
console.log(self.id)
})
.catch(function (error){
console.log(error.response.data)
})
axios
.all([
axios.get('/testname'),
axios.get('/cycledate'),
axios.get('/grade')
])
.then(axios.spread(( testname,cycledate,grade ) => {
self.testname = testname.data
self.date_of_test = cycledate.data.testdate
self.submittion_date = cycledate.data.to
self.grades = grade.data
//console.log(testname.data)
} ))
.catch(function (error){
console.log(error)
})
// axios('/testname')
// .then(function (response){
// self.testname = response.data
// })
// .catch(function (error){
// console.log(error)
// })
// axios('/cycledate')
// .then(function (response){
// self.date_of_test = response.data.testdate
// self.submittion_date = response.data.to
// //console.log(response.data)
// })
// .catch(function (error){
// console.log(error)
// })
// axios('/grade')
// .then(function (response){
// self.grades = response.data
// })
// .catch(function (error){
// console.log(error)
// })
},
methods: {
onFormSubmit() {
//let currentObj = this;
const config = {
headers: {
'content-type': 'multipart/form-data',
//'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
}
};
//document.getElementById("number").value
const fileInput = document.querySelector( '#bank' );
//console.log(fileInput.files[0])
const formData = new FormData();
formData.append( 'user_id', this.id );
formData.append( 'testname', this.testname);
formData.append( 'date_of_test', this.date_of_test );
formData.append( 'date_of_place', this.date_of_place );
formData.append( 'submittion_date', this.submittion_date );
formData.append( 'grade', this.grade);
formData.append( 'fee', document.getElementById("fee").value);
formData.append( 'transaction_detail', this.transaction_detail );
formData.append( 'transaction_number', this.transaction_number );
formData.append( 'mode_of_payment', this.mode_of_payment );
formData.append( 'bank_photo', fileInput.files[0]);
formData.append( 'institute', this.institute );
axios.post( '/form', formData)
//.then(response => alert('Success'))
// .catch(error => this.errors.record( error.response.data ));
.then( response => {
this.errors = [];
this.success = true;
$("#animatedModal").fancybox().trigger('click');
this.students = response.data;
console.log(response.data);
}).catch((error) => {
if (error.code === 'ECONNABORTED'){
console.log(error.code);
console.log(error.message);
console.log(error.stack);
$('#animatedModalerrortimeout').fancybox().trigger('click');
}else{
this.errors = error.response.data.errors;
this.success = false;
console.log(error.response.data)
$('#animatedModalerror').fancybox().trigger('click');
}
});
}
}
}
</script>
<style scoped>
/*
Styles for animated modal
=========================
*/
/* Start state */
.animated-modal {
max-width: 550px;
border-radius: 4px;
overflow: hidden;
background: linear-gradient(45deg, #543093 32%, #d960ae 100%);
transform: translateY(-80px);
transition: all .5s; /* Should match `data-animation-duration` parameter */
}
.animated-modal * {
color: #fff;
}
.animated-modal h2,
.animated-modal p {
transform: translateY(-40px);
opacity: 0;
transition-property: transform, opacity;
transition-duration: .3s;
}
/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p {
transform: translateY(0);
opacity: 1;
transition-duration: .3s;
}
/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
transition-delay: .1s;
}
.fancybox-slide--current .animated-modal p {
transition-delay: .4s;
}
.fancybox-slide--current .animated-modal p:first-of-type {
transition-delay: .2s;
}
</style>
My Laravel Controller
public function store(Request $request)
{
$active_user = User::find(Auth::user()->id);
$date_of_test = Cycledate::where('active',1)->first()->testdate;
$test_name = Testname::where('is_selected', 1)->first()->test_name;
$validate = $request->validate([
'test_name',
'date_of_test' => ['required'],
'date_of_place' => ['required'],
'fee' => ['required'],
'submittion_date' => ['required'],
'grade' => ['required'],
'transaction_detail' => ['required','min:3','max:50','string'],
'mode_of_payment' => ['required'],
'transaction_number' => ['required','string','min:3'],
'institute' => ['required','min:3','max:30','string'],
'bank' => ['required','image','mimes:jpg,jpeg','max:100'],
]);
$validate['user_id'] = $active_user->id;
$validate['test_name'] = $test_name;
$validate['date_of_place'] = 'Pune';
$validate['date_of_test'] = $date_of_test;
$validate['is_submitted'] = 1;
$bank = $request->file('bank');
$new = rand() . '_' . $bank->getClientOriginalName();
$new = preg_replace("/[^a-zA-Z0-9.]/", "", $new);
$bank->move(public_path('images'), $new);
$validate['bank'] = $new;
Form::create($validate);
return $validate;
}
Please or to participate in this conversation.