How come in Postman my post request works but not in the browser even though I'm doing the same?

Question

In Postman, I can successfully authenticate (I'm using Passport) using my endpoint. I can then open up a new tab and use a different endpoint to post to my SQL database - the file name (which the user uploads), email, and user_id.

In the browser, I can successfully authenticate. However, when I try to upload a file and send along the user's bearer token (to detect which user's uploading), I get a 500 error that says:

ErrorException: Trying to get property 'id' of non-object in file.  

I've tried to send the email and id in my post request but I get the same error. What am I doing wrong?

Backend controller code:

public function store(Request $request) {
    $filePath = $request->file('file')->getClientOriginalName();
    $id = $request->user()->id;
    $email = $request->user()->email;
    
    $data = [
        'file_path' => $filePath,
        'user_id' => $id,
        'email' => $email
    ];

    DB::table('my db.photos')->insert($data);
    echo "Record inserted successfully.<br/>";
}

Frontend code:

fileUpload(file) {
    const formData = new FormData()

    console.log(this.state.access_token);

    formData.append('file', file);
    formData.set('access_token', "Bearer " + this.state.access_token);
    // formData.set('email', this.getEmail());
    // formData.set('user_id', this.getId());

    fetch('http://127.0.0.1:8000/api/auth/myendpont/wall-of-fame', {
        method: 'POST',
        body: formData
    })
        .then(response => console.log(response))
        .catch(error => { console.error(error) });
}

Answer 1

maybe like this?

formData.append('access_token', "Bearer " + this.state.access_token);