i need to get the value of the input with javascript.
Input:
<input id="user_id" value="5" name="user_id" type="hidden">
Controller:
public function savetoken(Request $request)
{
$this->validate($request, [
'user_id' => 'required',
'token' => 'required',
]);
Notificaciones::create([
'user_id' => $request->user_id,
'token' => $request->token
]);
return back()->with('success', 'token saved successfully!');
}
How to get the Value of the Input that is Hidden?
Javascript:
function guardarToken(token){
var formData=new FormData();
formData.append('token',token);
formData.append('user_id', user_id);
var config = {
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"').content
}
}
axios.post('/token',formData, config).then( respuesta=>{
console.log(respuesta);
}).catch( e=>{
console.log(e);
});
}
I tried this way but I have not succeeded
help please
Related
I have the following html
<div class="row" x-data="pageState()" x-init="mounted()">
<form method="post" enctype="multipart/form-data" #submit.prevent="postFormData()">
<div class="col-sm-4 p-2"><label>First Name</label><input x-model="form.firstname" name="firstname" type="text" required /></div>
<div class="col-sm-4 p-2"><label>Second Name</label><input x-model="form.secondname" name="secondname" type="text" required /></div>
<div class="col-sm-4 p-2"><label>Images</label><input name="images" type="file" x-on:change="selectFile($event)" accept="image/png, image/jpg, image/jpeg" multiple required /></div>
<button class="btn btn-primary mt-5">Submit Form Data</button>
</form>
</div>
and alpine js code
<script>
function pageState(){
return {
form: {
firstname: '',
secondname: '',
},
selectFile(event) {
this.form.images = event.target.files[0];
},
postFormData(){
//Create an instance of FormData
const data = new FormData()
let url = 'http://localhost:8000/alpine_form'
// Append the form object data by mapping through them
Object.keys(this.form).map((key, index) => {
data.append(key, this.form[key])
});
fetch(url, {
method: 'POST',
/**
headers: {
'Accept': 'application/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
*/
body: data
})
.then(response => {
console.log(response);
})
.finally(() => {
});
/**
axios.post('https://eot1ip4i6xwine.m.pipedream.net', {
firstname: this.firstname,
secondname: this.secondname
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
*/
},
mounted(){
this.$watch('form.firstname', (value, oldValue) => this.form.firstname = value);
this.$watch('form.firstname', (value, oldValue) => console.log(value, oldValue));
console.log('mounted');
}
}
}
</script>
In the backend i have this laravel code
public function alpine_form(Request $request){
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");
$data = $request->all();
$firstname = $data['firstname'];
$secondname = $data['secondname'];
$images = $data['images'];
$ai = '';
$uploaded_images_array = [];
//images
if($request->hasfile('images'))
{
foreach($request->file('images') as $fil)
{
$nam = mt_rand().uniqid().'.'.$fil->extension();
$fil->move(public_path().'/uploads/', $nam);
$uploaded_images_array[] = $nam;
}
$ai = json_encode($uploaded_images_array);
DB::table('form')->insert(
array(
'firstname' => $firstname,
'secondname' => $secondname,
'images' => $ai
)
);
}
}
I am able to receive firstname and secondname but he images array is always empty when i insert the data into the database. Am i acquiring the images posted correctly?
I appended my images like this
postFormData(){
//Create an instance of FormData
const data = new FormData()
data.append('firstname', this.form.firstname);
data.append('secondname', this.form.secondname);
let input_file = document.querySelector('input[type="file"]')
Array.from(input_file.files).forEach((f) => {
data.append('images[]', f)
})
let url = 'http://localhost:8000/alpine_form'
fetch(url, {
method: 'POST',
/**
headers: {
'Accept': 'application/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
*/
body: data
})
.then(response => {
console.log(response);
})
.finally(() => {
});
},
and no other modification was necessary.
i am getting redirect to pay.php and got session.id in pay.php but i am not redirecting to checkout page :(
var checkoutButton = document.getElementById("paymentform").submit();
i am trying to redirect to checkout page should i create product in stripe ?
<!DOCTYPE html>
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
<script src="https://js.stripe.com/v3/"></script>
</head>
<?php if(isset($_POST['productname']) && $_POST['productname']!="" && isset($_POST['amount']) && $_POST['amount']!="")
{ ?>
<form name="paymentform" class="paymentform" style="display:none" id="paymentform" method="post" action="pay.php">
<input name="productname" type="hidden" value="<?=$_POST['productname'];?>">
<input name="amount" type="hidden" value="<?=$_POST['amount'];?>">
</form>
<script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe("pk_test_576576576576576");
var checkoutButton = document.getElementById("paymentform").submit();
checkoutButton.addEventListener("click", function () {
fetch("/pay.php", {
method: "POST",
})
.then(function (response) {
return response.json();
})
.then(function (session) {
return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function (result) {
// If redirectToCheckout fails due to a browser or network
// error, you should display the localized error message to your
// customer using error.message.
if (result.error) {
alert(result.error.message);
}
})
.catch(function (error) {
console.error("Error:", error);
});
});
</script>
<?php } else{
header("location:http://www.example.com");
}?>
pay.php
<?php if(isset($_POST['productname']) && $_POST['productname']!="" && isset($_POST['amount']) && $_POST['amount']!="")
{
require 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('sk_test_86876876876');
header('Content-Type: application/json');
$YOUR_DOMAIN = 'https://localhost';
$checkout_session = \Stripe\Checkout\Session::create([
'payment_method_types' => ['card'],
'line_items' => [[
'price_data' => [
'currency' => 'usd',
'unit_amount' => $_POST['amount'],
'product_data' => [
'name' => $_POST['productname'],
'images' => ["https://i.imgur.com/EHyR2nP.png"],
],
],
'quantity' => 1,
]],
'mode' => 'payment',
'success_url' => $YOUR_DOMAIN . '/stripe/success.php',
'cancel_url' => $YOUR_DOMAIN . '/stripe/cancel.php',
]);
echo json_encode(['id' => $checkout_session->id]);
}else{
header("location:http://www.example.com");
}
?>
In your JavaScript code, you have added a .submit() before the Event Listener. This causes to redirect the page without submitting the information. Please check the below code.
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
<script src="https://js.stripe.com/v3/"></script>
</head>
<?php if(isset($_POST['productname']) && $_POST['productname']!="" && isset($_POST['amount']) && $_POST['amount']!="")
{ ?>
<form name="paymentform" class="paymentform" style="display:none" id="paymentform" method="post" action="pay.php">
<input name="productname" type="hidden" value="<?=$_POST['productname'];?>">
<input name="amount" type="hidden" value="<?=$_POST['amount'];?>">
</form>
<script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key
var stripe = Stripe("pk_test_576576576576576");
var paymentform = document.getElementById("paymentform");
let formData = new FormData();
formData.append('productname', paymentform.elements["productname"]);
formData.append('amount', paymentform.elements["amount"]);
fetch("/pay.php", {
method: "POST",
body: formData
})
.then(function (response) {
return response.json();
})
.then(function (session) {
return stripe.redirectToCheckout({ sessionId: session.id });
})
.then(function (result) {
// If redirectToCheckout fails due to a browser or network
// error, you should display the localized error message to your
// customer using error.message.
if (result.error) {
alert(result.error.message);
}
})
.catch(function (error) {
console.error("Error:", error);
});
</script>
<?php } else{
header("location:http://www.example.com");
}?>
In Postman - I'm logging in successfully with login endpoint and after that, I do a file upload which works successfully with the endpoint below. The id and file path get stored successfully in the db.
I can conclude that in Postman after logging in and only attaching one piece of form data (which's the file being uploaded) - that the id and email display correct values in Postman. I can confirm it because if I run the dd($id, $email);, the correct values are returned.
However, on the browser - I'm trying to send up user id and email but I keep getting a 500 error in the logs that says: "Trying to get property 'id' of non-object".
I'm guessing that in my FileUpload controller code (I'm using Laravel passport) that I need to do a check in order to see if the current user's authenticated, but how? I've looked at all the docs, tried a ton of suggestions but to no avail. I'm trying to send Bearer token in my post request but that's not doing it either. What else can I possibly try?
Here's my frontend code:
import React, {Component} from 'react';
import axios from 'axios';
class Upload extends Component {
constructor(props) {
super(props);
this.state = {
selectedFile: null,
id: null,
email: ''
};
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onChange = this.onChange.bind(this);
this.fileUpload = this.fileUpload.bind(this);
}
componentDidMount() {
console.log("Inside componentDidMount()");
let id = localStorage.getItem("id");
let email = localStorage.getItem("email");
console.log(id);
console.log(email);
this.getId(id);
this.getEmail(email);
}
getId(id) {
console.log("inside getId()");
this.setState({id: id}, () => console.log(this.state.id));
}
getEmail(email) {
console.log("inside getEmail");
this.setState({email: email}, () => console.log(this.state.email));
}
onFormSubmit(e) {
e.preventDefault();
this.fileUpload(this.state.selectedFile);
}
onChange(e) {
this.setState({selectedFile: e.target.files[0]});
}
fileUpload(file) {
const formData = new FormData();
const accessToken = localStorage.getItem("access_token").slice(13, -8);
console.log(accessToken);
formData.append('file', file);
const headers = {
Authorization: 'Bearer ' + accessToken
}
axios.post('http://127.0.0.1:8000/api/auth/wall-of-fame', formData, {headers})
.then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
}
render() {
return (
<form encType='multipart/form-data' id="login-form" className="form" onSubmit={this.onFormSubmit}>
<input type="file" name="file" id="file" onChange={this.onChange}/>
<button type="submit">Upload</button>
</form>
);
}
}
export default Upload;
Here's my backend fileUpload controller code (using Laravel Passport):
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
class FileUploadController extends Controller {
public function store(Request $request) {
$filePath = $request->file('file')->getClientOriginalName();
$id = $request->user()->id;
$email = $request->user()->email;
// dd($id, $email);
if (($user = Auth::user()) !== null) {
$data = [
'file_path' => $filePath,
'user_id' => $id,
'email' => $email
];
DB::table('my.db')->insert($data);
return response()->json($user);
}
return "failed";
}
}
Here's login method in controller:
public function login(Request $request) {
$request->validate([
'email' => 'required|string|email',
'password' => 'required|string',
'remember_me' => 'boolean'
]);
$credentials = request(['email', 'password']);
if(!Auth::attempt($credentials))
return response()->json([
'message' => 'Unauthorized'
], 401);
$user = $request->user();
$tokenResult = $user->createToken('Personal Access Token');
$token = $tokenResult->token;
if ($request->remember_me)
$token->expires_at = Carbon::now()->addWeeks(1);
$token->save();
return response()->json([
'access_token' => $tokenResult->accessToken,
'token_type' => 'Bearer',
'expires_at' => Carbon::parse(
$tokenResult->token->expires_at
)->toDateTimeString(),
$user
]);
}
Here's my middleware:
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::group([
'prefix' => 'auth'
], function () {
Route::post('login', 'AuthController#login');
Route::post('signup', 'AuthController#signup');
Route::post('wall-of-fame', 'FileUploadController#store');
Route::group([
'middleware' => 'auth:api'
], function() {
Route::get('logout', 'AuthController#logout');
Route::get('user', 'AuthController#user');
Route::get('wall-of-fame', 'FileUploadController#fileUpload');
});
});
I'm trying to update user details through an api.
public function update(Request $request, $id)
{
$validator = Validator::make($request->all(), [
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'string|min:6|confirmed',
'phone' => 'string|min:6',
'Age' => 'string',
'Blood' => 'string',
'Gender' => 'string',
'Height' => 'string',
'Weight' => 'string',
'record' => 'string'
]);
if($validator->fails()){
return response()->json($validator->errors()->toJson(), 400);
}
$doc = User::find($id);
if($request->hasFile('picture')){
// Get filename with the extension
$filenameWithExt = $request->file('picture')->getClientOriginalName();
// Get just filename
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
// Get just ext
$extension = $request->file('picture')->getClientOriginalExtension();
// Filename to store
$fileNameToStore= $filename.'_'.time().'.'.$extension;
// Upload Image
$path = $request->file('picture')->storeAs('public/images', $fileNameToStore);
} else {
$fileNameToStore = 'noimage.jpg';
}
$doc->name = $request->input('name');
$doc->email = $request->input('email');
$doc->phone = $request->input('phone');
if($request->hasFile('picture')){
$doc->picture = $fileNameToStore;
}
$doc->save();
return response()->json([
'message' => 'Success',
]);
}
When I run this code, I get this
"{\"name\":[\"The name field is required.\"],\"email\":[\"The email field is required.\"]}"
I noticed that I get this error when I use form-data in post man, if I sent it raw instead, it works.
Then I tried to use it in my react native app, I get the same error as if I used form-data.
This is my code in react-native
const update = dispatch => {
return async (name, email, phone, picture, Age, Blood, Gender, Height, Weight, id) => {
const data = new FormData();
data.append('name', name);
data.append('email', email);
data.append('phone', phone);
data.append('Age', Age);
data.append('Blood', Blood);
data.append('Gender', Gender);
data.append('Height', Height);
data.append('Weight', Weight);
data.append("picture", {
type: 'image/jpg',
uri: picture,
name: 'profilepic.jpg'
});
const config = {
method: 'put',
url: `http://27a50145.ngrok.io/api/userregister/${id}`,
data: data,
headers: { 'Content-Type': 'application/json' }
}
await axios(config)
navigate('UserAccount')
}
}
Where in this codes is the error?
The way you need to change on Frontend.
Use Body instead of Data param.
const config = {
method: 'put',
url: `http://27a50145.ngrok.io/api/userregister/${id}`,
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
}
I'm trying to validate form data on the backend with Laravel and Vue, but I'm not getting the 422 response.
This is in my controller function:
$this->validate($request, [
'name' => 'required',
'city' => 'required',
'state' => 'required'
]);
$location = $request->isMethod('put') ?
Locations::findOrFail($request->id) : new Locations;
$location->id = $request->input('id');
$location->name = $request->input('name');
$location->address = $request->input('address');
$location->city = $request->input('city');
$location->state = $request->input('state');
$location->zip = $request->input('zip');
$location->phone = $request->input('phone');
if($location->save())
{
return new LocationsResource($location);
}
Here is the Vue method:
addLocation() {
if (this.edit === false) {
// Add
fetch('api/location', {
method: 'post',
body: JSON.stringify(this.location),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
this.clearForm();
alert('Location Added');
this.fetchArticles();
});
} else {
// Update
fetch('api/location', {
method: 'put',
body: JSON.stringify(this.location),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(data => {
this.clearForm();
alert('Locations Updated');
this.fetchArticles();
})
}
}
Here is the form:
<form #submit.prevent="addLocation" class="mb-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" v-model="location.name">
<input type="text" class="form-control" placeholder="City" v-model="location.city">
<input type="text" class="form-control" placeholder="State" v-model="location.state">
</div>
<button type="submit" class="btn btn-light btn-block">Save</button>
</form>
When I open up the inspector and go into Network->XHR I get all the correct status codes back for CRUD, however when the form is supposed to fail I do not get back 422 HTTP status code. When I submit the form with no data, it doesnt save, but no status code gets sent, there is no response to give feedback to the user. Thanks for the help.
I had to add "accept": "application/json" to the header of the addLocation method.
$this->validate($request, [
'name' => 'required',
'city' => 'required',
'state' => 'required'
]);
I've never seen such usage. I don't think controller have the validate function. Try this:
$request->validate([
'name' => 'required',
'city' => 'required',
'state' => 'required'
]);
The following code what i have tried
const form_data = new FormData(document.querySelector('#form_data'));
fetch("{{route('url')}}", {
'method': 'post',
body: form_data,
}).then(async response => {
if (response.ok) {
window.location.reload();
}
const errors = await response.json();
var html = '<ul>';
for (let [key, error] of Object.entries(errors)) {
for (e in error) {
html += `<li>${error[e]}</li>`;
}
}
html += '</ul>';
//append html to some div
throw new Error("error");
})
.catch((error) => {
console.log(error)
});
Controller
use Illuminate\Support\Facades\Validator;//Use at top of the page
$rules = [
'file' => 'image|mimes:jpeg,png,jpg|max:1024',
'field1' => 'required',
'field2' => 'required'
];
$validator = Validator::make($request->post(), $rules);
if ($validator->fails()) {
return response()->json($validator->errors(), 400);
}
session()->flash('flahs', ['status' => 'status', 'message' => 'message']);