We Keep Coding

Failed to FETCH (JS)

Problem:
I am request data from my client (the js file) with $_GET in my PHP and sending the a response back. The problem is that the response is an error.
HTML
<div>
<input type="text" id="text">
<div id="send" onclick="sendData()">send</div>
</div>
<h1 id="data"></h1>
JS
function sendData() {
var text = document.getElementById('text').value
console.log(text);
fetch(`./home.php?data=${text}`)
.then(data => {
console.log(data.text());
document.getElementById('data').innerHTML=data
})
.catch(err => {
console.log(err);
document.getElementById('data').innerHTML=err
})
}
PHP:
if(isset($_GET["data"])){
$output = $_GET["data"];
echo $output;
}

Here's how you can fix the code:
JS:
function sendData() {
var text = document.getElementById('text').value
console.log(text);
fetch(`./home.php?data=${text}`)
.then(response => response.text())
.then(data => {
console.log(data);
document.getElementById('data').innerHTML = data;
})
.catch(err => {
console.log(err);
document.getElementById('data').innerHTML = err;
});
}
PHP:
if (isset($_GET['data'])) {
$output = $_GET['data'];
echo $output;
}

Processing formData from alpine js form

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.

get value from an input using javascript and laravel

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

How can I check if the user's currently authenticated using Laravel Passport?

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');
});
});

Vue and Laravel Form Validation not returning 422 response

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']);