I have a Laravel and React.js project that of which are separate code bases. When I login in Postman with login endpoint followed by uploading name of the file with another endpoint (both of them POST requests), the filePath, email and user_id are stored successfully in the db.
However, when I do try this on the browser - I get a 200 but oddly enough, nothing's stored in the db.
In Postman, it somehow detects what user's logged in which allows me to store the aforementioned information into the DB without problems.
What am I doing wrong here in my frontend and backend code that's not allowing me to do this on the browser? I've hit a wall with this one and not sure where to from here.
FYI: The dd($user); returns the correct information.
Please let me know if you need more information :)
Here's my Upload.js file:
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");
this.setState({
id: id,
email: email
})
console.log(id);
console.log(email);
}
onFormSubmit(e) {
e.preventDefault();
this.fileUpload(this.state.selectedFile);
}
onChange(e) {
this.setState({ selectedFile: e.target.files[0] }, () => this.state.selectedFile);
}
fileUpload(file) {
const formData = new FormData();
const accessToken = localStorage.getItem("access_token").slice(13,-8);
console.log(accessToken);
console.log(this.state.id);
console.log(this.state.email);
console.log(file.name);
formData.append('file',file);
const headers = {
'Authorization' : 'Bearer ' + accessToken,
'Content-type': 'multipart/form-data'
}
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" >
<input type="file" name="file" onChange={this.onChange}/>
<button type="submit" onClick={this.onFormSubmit}>Upload</button>
</form>
);
}
}
export default Upload;
Here's my FileUploadController.php file:
<?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) {
$user = Auth::user();
// dd($user);
if($user) {
$user_id = Auth::user()->id;
$email = Auth::user()->email;
$filePath = $request->file('file')->getClientOriginalName();
$data = [
'file_path' => $filePath,
'user_id' => $user_id,
'email' => $email
];
DB::table('mydb.photos')->insert($data);
}
return response()->json($user);
}
}
Here's my api.php file:
Route::middleware('auth:api')->group(function () {
Route::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');
});
});
