Template
<form #submit.prevent=" addUser()">
<div class="form-group">
<label for="addUser">Password</label>
<input type="tex" class="form-control" id="name" placeholder="Name" name="name" v-model="form.name"
:class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="tex" class="form-control" id="email" placeholder="Email" name="email" v-model="form.email"
:class="{ 'is-invalid': form.errors.has('email') }">
<has-error :form="form" field="email"></has-error>
</div>
<div class="form-group">
<label for="picture">Picture</label>
<input type="file" class="form-control" id="image" placeholder="Picture" name="image" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
JavaScript
import Form from 'vform'
export default {
name: "Users",
data() {
return {
form: new Form({
name: '',
email: '',
})
}
},
methods: {
addUser() {
this.form.post('/addUser').
then((response) => {
console.log('I clicked');
})
}
}
}
Laravel
$this->validate($request,[
'name'=> 'required',
'email'=> 'required '
]);
$newUser = New NewUser();
$newUser->name = $request->name;
$newUser->email = $request->email;*/
if($request->hasFile('image')){
$imageN = $request->image;
$request->image->storeAs('public/upload',$imageN);
}
$newUser->save();
The image file is not being save because it is never being send with the request to laravel.
You could either add the image to the new Form() or check out the following post on how to upload an image: How do I upload image in vuejs?
Related
I want to create a membership form with picture upload and other input data required. I have a form with input file and input text which to be considered as multi-part data. I am using the Laravel 8 and Inertia.js.
Here is what I've tried:
In my Form, I have like this:
<form action="/member" method="POST" #submit.prevent="createMember">
<div class="card-body">
<div class="form-group">
<label for="exampleInputFile">Picture</label>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="exampleInputFile" #input="form.picture">
<label class="custom-file-label" for="exampleInputFile">Choose image</label>
</div>
<div class="input-group-append">
<span class="input-group-text">Upload</span>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">First name</label>
<input type="text" class="form-control" id="fname" placeholder="First name" v-model="form.firstname">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Middle name</label>
<input type="text" class="form-control" id="mname" placeholder="Middle name" v-model="form.middlename">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Last name</label>
<input type="text" class="form-control" id="lname" placeholder="Last name" v-model="form.lastname">
</div>
<div class="col-md-12">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Name ext</label>
<input type="text" class="form-control" id="next" placeholder="Name extension" v-model="form.name_ext">
</div>
<div class="form-group">
<label>Membership Date:</label>
<div class="input-group date" id="reservationdate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="mem_date" data-target="#reservationdate" v-model="form.membership_date"/>
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label>Date of Birth:</label>
<div class="input-group date" id="reservationdate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date_of_birth" data-target="#reservationdate" v-model="form.date_of_birth"/>
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label>Sex:</label>
<div class="radio-inline">
<label class="radio radio-solid">
<input type="radio" name="travel_radio" class="details-input" value="Male" v-model="form.sex"/> Male
<span></span>
</label>
<label class="radio radio-solid">
<input type="radio" name="travel_radio" class="details-input" value="Female" v-model="form.sex"/> Female
<span></span>
</label>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
then I have tried vue and inertia implementation like this:
export default {
props: [],
components: {
AppLayout,
},
data() {
return {
form: {
picture: '',
firstname: '',
middlename: '',
lastname: '',
name_ext: '',
date_of_birth: '',
sex: '',
membership_date: '',
}
}
},
methods: {
createMember() {
this.$inertia.post('/member', this.form, {
_method: 'put',
picture: this.form.picture,
onSuccess: () => {
console.log('success');
// $('.toastrDefaultSuccess').click(function() {
// toastr.success('Successfully Added');
// });
},
onError: (errors) => {
console.log(errors);
},
})
}
}
}
then from my backend, I tried to dd the request and got null from picture:
public function store(MemberPost $request) {
dd($request);
}
Assuming you are using inertia 0.8.0 or above, you can use the inertia form helper. This will automatically transform the data to a FormData object if necessary.
Change your data method to:
data() {
return {
form: this.$inertia.form({
picture: '',
firstname: '',
middlename: '',
lastname: '',
name_ext: '',
date_of_birth: '',
sex: '',
membership_date: '',
})
}
}
and the createMember function to:
createMember() {
// abbreviated for clarity
this.form.post('/member')
}
More info: docs. If you need to migrate FormData from inertia < 0.8.0 to a current version, see this page.
if you using multi-upload remove array from files
before: <input type="file" #input="form.image = $event.target.files[0]" multiple/>
after: <input type="file" #input="form.image = $event.target.files" multiple/>
add enctype="multipart/form-data" to form tag
and you need move the picture to directory. example
$name = $file->getClientOriginalName();
$file->move('uploads/posts/',$name);
sorry, i dont know how to implement this code to inertia.
This way works for me
this.$inertia.post('/member', this.form)
this is the variable that holds the form data
userForm: new Form({
last_name: '',
first_name: '',
other_name: '',
email: '',
dob: '',
gender: '',
phone_number: '',
}),
on click of the edit button, i use the row id to fetch the data from backend and am using vform method fill to fill the userForm variable with the response data
'click .edit': function (e, value, row){
axios
.get('/data/admin/'+row.id)
.then(response => {
this.loading = false;
//let data = response;
this.userForm.fill(response.data);
$('#adminEditModal').modal('show');
}).catch(error => {
this.loading = false;
this.error = error.response.data.message || error.message;
});
},
this is my form
<form #submit.prevent="UpdateUser" ref="userForm">
<div class="modal-body">
<div class="login-logo">
<img src="" width="100" height="auto" alt="user">
</div>
<div class="form-group">
<label>Last Name</label>
<input v-model="userForm.last_name" type="text" name="last_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('last_name') }">
<has-error :form="userForm" field="last_name"></has-error>
</div>
<div class="form-group">
<label>Firat Name</label>
<input v-model="userForm.first_name" type="text" name="first_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('first_name') }">
<has-error :form="userForm" field="first_name"></has-error>
</div>
<div class="form-group">
<label>Other Name</label>
<input v-model="userForm.other_name" type="text" name="other_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('other_name') }">
<has-error :form="userForm" field="other_name"></has-error>
</div>
<div class="form-group">
<label>Email</label>
<input v-model="userForm.email" type="email" name="email"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('email') }">
<has-error :form="userForm" field="email"></has-error>
</div>
<div class="form-group">
<label>Date Of Birth</label>
<input v-model="userForm.dob" type="date" name="dob"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('dob') }">
<has-error :form="userForm" field="dob"></has-error>
</div>
<div class="form-group">
<label>Gender</label>
<select v-model="userForm.gender" type="text" name="gender"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('gender') }" >
<option>Male</option>
<option>Female</option>
</select>
<has-error :form="userForm" field="gender"></has-error>
</div>
<div class="form-group">
<label>Phone Number</label>
<input v-model="userForm.phone_number" type="text" name="phone_number"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('phone_number') }">
<has-error :form="userForm" field="phone_number"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update <i class="fas fa-upload"></i></button>
</div>
</form>
I want to bind the select option with returned JSON data. However, when I do the API call and set the options model groups to the returned JSON, I get the error 'TypeError: Cannot set property 'groups' of undefined'.
Here is the vue file
<template>
<div class="register">
<div class="container">
<div class="row">
<div class="col">
<h3 class="mb-10">Register as a volunteer</h3>
<form action="">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" v-model="first_name" placeholder="First Name" class="form-control" id="first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" v-model="last_name" placeholder="Last Name" class="form-control" id="last_name">
</div>
<div class="form-group">
<label for="group">Select Institution/Organization/Company</label>
<select v-model="group" class="form-control" id="group">
<option v-for="group in groups" v-bind:name="name">{{ group.code }}</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" v-model="adv_phone" placeholder="Phone" class="form-control" id="phone">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" v-model="adv_password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" v-model="adv_password" class="form-control" id="confirm-password" placeholder="Confirm Password">
</div>
<div class="from-group">
<input type="submit" class="btn btn-primary" value="Register">
<router-link :to="{name:'home'}">
<a class="btn btn-outline-secondary">Cancel</a>
</router-link>
</div>
</form>
</div>
</div>
</div>
<div class="register-form"></div>
</div>
</template>
<script>
export default {
mounted(){
this.getGroups()
},
data (){
return {
group: '',
groups:'',
first_name:'',
last_name:'',
adv_email:'',
adv_phone:'',
adv_password:'',
confirm_password:''
}
},
methods:{
getGroups(){
axios.get('/api/group/get/all')
.then(function (response) {
console.log(response);
this.groups = response.data;
//console.log(groups);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
}
}
}
</script>
and here is my json returned
[{"id":8,"name":"Villa Maria Academy","code":"Vil-9458-3786","advisors":25,"students":99,"subscription_time":99,"subscription_type":0,"admin_name":"","admin_email":"","phone":"817879234","address":"Abcde street","state":"Pennsylvania","zip":16502,"apt":"","city":"Erie"},{"id":9,"name":"Cathedral Prep","code":"Cat-1959-1432","advisors":99,"students":99,"subscription_time":99,"subscription_type":0,"admin_name":"","admin_email":"","phone":"0","address":"","state":"","zip":0,"apt":"","city":""}]
Why am I getting a type error, when I set this.groups = response.data?
You can use arrow function to fix problem.
methods:{
getGroups(){
axios.get('/api/group/get/all')
.then(response => {
console.log(response);
this.groups = response.data;
//console.log(groups);
})
.catch(error => {
console.log(error);
})
.then(() => {
// always executed
});
}
}
I cannot seem to update my record.
My controller
public function add()
{
return view('cars.add');
}
public function edit($id)
{
$car = Cars::whereId($id)->firstOrFail();
return view('cars.edit', compact('car'));
}
public function store(CarFormRequest $request)
{
$car = new Cars(array(
'name' => $request->get('name'),
'color_id' => $request->get('color')
));
$car->save();
$car->position_id = $car->id;
$car->save();
session()->flash('status', 'Successfully Added a Car!');
return view('cars.add');
}
public function update($id, CarFormRequest $request)
{
$car = car::whereId($id)->firstOrFail();
$car->name = $request->get('name');
$car->color_id = $request->get('color');
if($request->get('status') != null) {
$car->status = 0;
} else {
$car->status = 1;
}
$car->save();
return redirect(action('CarController#edit', $car->id))->with('status', 'The ticket '.$id.' has been updated!');
}
my routes:
Route::get('/', 'PagesController#home');
Route::get('/about', 'PagesController#about');
Route::get('/contact', 'PagesController#contact');
Route::get('/cars', 'CarsController#index');
Route::get('/cars/edit/{id?}', 'CarsController#edit');
Route::post('/cars/edit/{id?}', 'CarsController#update');
Route::get('/cars/add', 'CarsController#add');
Route::post('/cars/add', 'CarsController#store');
here is my view:
<div class="container col-md-8 col-md-offset-2">
<div class="well well bs-component">
<form class="form-horizontal" method="post">
<input type="hidden" name="_token" value="{!! csrf_token() !!}">
<input type="text" id="color_id" name="color_id" value="{!! $car->color_id !!}">
<fieldset>
<legend>Edit Car Information</legend>
<div class="form-group">
<label for="title" class="col-lg-2 control-label">Car Name</label>
<div class="col-lg-10">
<input type="text" value="{{ $car->name }}" class="form-control" id="name" placeholder="Car Name">
</div>
</div>
<div class="form-group">
<label for="title" class="col-lg-2 control-label">Car Color</label>
<div class="col-lg-10">
<div class="btn-group" data-toggle="buttons">
<label id="opt1" class="btn btn-primary">
<input type="radio" name="color" id="option1" autocomplete="off"> Red
</label>
<label id="opt2" class="btn btn-primary">
<input type="radio" name="color" id="option2" autocomplete="off"> Blue
</label>
<label id="opt3" class="btn btn-primary">
<input type="radio" name="color" id="option3" autocomplete="off"> Yellow
</label>
<label id="opt4" class="btn btn-primary">
<input type="radio" name="color" id="option4" autocomplete="off"> Green
</label>
<label id="opt5" class="btn btn-primary">
<input type="radio" name="color" id="option5" autocomplete="off"> Black
</label>
<label id="opt6" class="btn btn-primary">
<input type="radio" name="color" id="option6" autocomplete="off"> White
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
The $id variable in whereIn must be array and you need to specify the database column too. This should be like -
public function edit($id)
{
$car = Cars::whereId('id', [$id])->firstOrFail();
return view('cars.edit', compact('car'));
}
Change all occurrence of
$car = car::whereId($id)->firstOrFail();
My stripe form is not submitting. When I press submit it goes to page cannot be displayed. I replaced the route code to resolve to an echo "test"; and the post request shows the echo. Any help would be appreciated. This code is from a tutorial http://www.sitepoint.com/selling-downloads-stripe-laravel/
Route
Route::get('/buy/{id}', function($id)
{
$download = Download::find($id);
return View::make('buy', array('download' => $download));
});
Route::post('/buy/{id}', function($id)
{
Stripe::setApiKey(Config::get('laravel-stripe::stripe.sk_test_aaaaaaaaaaaaaaaaaaaaaaaa'));
$download = Download::find($id);
$token = Input::get('stripeToken');
// Charge the card
try {
$charge = Stripe_Charge::create(array(
"amount" => $download->price,
"currency" => "gbp",
"card" => $token,
"description" => 'Order: ' . $download->name)
);
// If we get this far, we've charged the user successfully
Session::put('purchased_download_id', $download->id);
return Redirect::to('confirmed');
} catch(Stripe_CardError $e) {
// Payment failed
return Redirect::to('buy/'.$id)->with('message', 'Your payment has failed.');
}
});
View
#extends('layouts.default')
#section('content')
<h1>Your Order</h1>
<h2>{{ $download->name }}</h2>
<p>£{{ ($download->price/100) }}</p>
<form action="" method="POST" id="payment-form" role="form">
<input type="hidden" name="did" value="{{ $download->id }}" />
<div class="payment-errors alert alert-danger" style="display:none;"></div>
<div class="form-group">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number" class="form-control input-lg" />
</label>
</div>
<div class="form-group">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc" class="form-control input-lg" />
</label>
</div>
<div class="form-group">
<label>
<span>Expires</span>
</label>
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-3">
<input type="text" size="2" data-stripe="exp-month" class="input-lg" placeholder="MM" />
</div>
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-3">
<input type="text" size="4" data-stripe="exp-year" class="input-lg" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Submit Payment</button>
</div>
</form>
#stop