Axios post method fails with status code 500 with Laravel - php

Question

as the title says, I'm having the Axios post fail when trying to pass form data to my Laravel controller when using Vue. I've seen many people with the issue, but none of the solutions have worked for me. What I've found is that the 500 status code is a bit too vague. Digging deeper into the issue I'm having, I've found that the main issue is that I have a field in my database that can't be null, here is the error I get in laravel.log
[2018-11-07 18:45:21] development.ERROR: SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'string_date' cannot be null (SQL: insert into `action_logs` (`string_date`, `user_id`, `company_name`, `name`, `communication_type`, `contact`, `status`, `action_item`, `activity_key`, `assigned_to`, `updated_at`, `created_at`) values (, 1, , , , , , , 1,2, no one, 2018-11-07 18:45:21, 2018-11-07 18:45:21)) {"userId":1,"email":"frank#*******.com","exception":"[object] (Illuminate\\Database\\QueryException(code: 23000): SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'string_date' cannot be null (SQL: insert into `action_logs` (`string_date`, `user_id`, `company_name`, `name`, `communication_type`, `contact`, `status`, `action_item`, `activity_key`, `assigned_to`, `updated_at`, `created_at`) values (, 1, , , , , , , 1,2, no one, 2018-11-07 18:45:21, 2018-11-07 18:45:21))
This seems to be showing that the data from the form isn't being passed at all, or the controller can't access the data for some reason. I'm not totally sure why though, I built this following an example that worked for me before. I tried a suggestion I saw that by default Axios sends a JSON object. I tried parsing accordingly in the Laravel controller, but that did not fix the issue. I've checked to make sure the csrf token was working properly, and it is. I was able to log a message from the controller, so I know that Vue is finding the route okay. I'm, however, calling my route trying to pass in the company name, like so:
Route::post('/action-log/{url}', 'ActionLogController#store');
I have not tried removing this yet, but that's only because I can see that it was still calling the store method as expected. Here is the relevant code from my Vue component:
<template>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th><a id="sortby-date" class="action-nav" href="?sortby=date&sortdirection=desc">Date</a></th>
<th><a id="sortby-company" class="action-nav" href="?sortby=company&sortdirection=desc">Company</a></th>
<th><a id="sortby-name" class="action-nav" href="?sortby=name&sortdirection=desc">Name</a></th>
<th><a id="sortby-communication-type" class="action-nav" href="?sortby=communication-type&sortdirection=desc">Communication Type</a></th>
<th><a id="sortby-contact" class="action-nav" href="?sortby=contact&sortdirection=desc">Contact</a></th>
<th><a id="sortby-subject" class="action-nav" href="?sortby=subject&sortdirection=desc">Subject</a></th>
<th><a id="sortby-action" class="action-nav" href="?sortby=action&sortdirection=desc">Comment/Action Item</a></th>
<th>Archive</th>
<!-- check if admin?? -->
<th><a id="sortby-assigned-to" class="action-nav" href="?sortby=date&sortdirection=desc">Assigned To</a></th>
<!-- /check if admin?? -->
</tr>
</thead>
<tbody v-if="actions.length > 0">
<tr v-for="action in actions" :key="action.id">
<td>
{{ action.string_date }}
</td>
<td>
{{ action.company_name }}
</td>
<td>
{{ action.name }}
</td>
<td>
{{ action.communication_type }}
</td>
<td>
{{ action.contact }}
</td>
<td>
{{ action.status }}
</td>
<td>
{{ action.action_item }}
</td>
<td>
<input type="checkbox" :id="'archive-' + action.id" class="archive" :name="'archive-' + action.id">
</td>
<td :id="'record-' + action.id" class="assigned-to">
{{ action.assigned_to }}
</td>
</tr>
</tbody>
</table>
<!-- Button trigger modal -->
<p id="add-action" style="text-align: center;">
<button id="action-log-modal" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addAction">
Add New Action Log
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="addAction" tabindex="-1" role="dialog" aria-labelledby="addActionTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<form id="action-log-form" class="" name="action-log-form" role="form" method="post" :action="this.url" enctype="multipart/form-data">
<div class="modal-content">
<input type="hidden" name="_token" :value="csrf">
<div class="modal-header">
<h5 class="modal-title" id="addActionTitle">Add Action Log</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Errors -->
<div class="alert alert-danger" v-if="createAction.errors.length > 0">
<p>
<strong>Whoops!</strong> Something went wrong.
</p>
<p></p>
<ul>
<li v-for="error in createAction.errors">
{{ error }}
</li>
</ul>
</div>
<div class="form-group">
<label for="date">Date</label>
<input id="date" class="form-control form-control-sm" name="date" type="text" value="01/01/1970" placeholder="MM/DD/YYYY" required>
</div>
<div class="form-group">
<label for="company">Company</label>
<input type="text" id="company" class="form-control" name="company" :value="this.companyName" :placeholder="this.companyName" #keyup.enter="store" required readonly>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" name="name" :value="this.userFullName" :placeholder="this.userFullName" #keyup.enter="store" required readonly>
</div>
<div class="form-group">
<label for="communication-type">Communication Type</label>
<select id="communication-type" name="communication_type" class="custom-select mr-sm-2" #change="store" v-model="actions.communication_type">
<option value="not-selected">Choose...</option>
<option value="phone">Phone</option>
<option value="email" selected>Email</option>
<option value="in-person">In Person</option>
<option value="fax">Fax</option>
<option value="customer-site">Customer Site</option>
</select>
</div>
<div class="form-group">
<label for="contact">Contact</label>
<input type="text" id="contact" class="form-control form-control-sm" name="contact" value="test contact" #keyup.enter="store" v-model="actions.contact" required>
</div>
<div class="form-group">
<label for="current-status">Current Status</label>
<input type="text" id="current-status" class="form-control form-control-sm" name="current_status" value="test current status" #keyup.enter="store" v-model="actions.current_status" required>
</div>
<div class="form-group">
<label for="action-item">Action</label>
<textarea id="action-item" class="form-control" name="action_item" rows="3" #keyup.enter="store" v-model="actions.action_item">test action</textarea>
</div>
<div class="form-group">
<label>Product Document</label>
<div class="custom-file">
<input type="file" id="productDocument" class="custom-file-input" name="product_document">
<label class="custom-file-label" for="productDocument">Choose file</label>
</div>
</div>
<div class="form-group">
<label>Test Data</label>
<div class="custom-file">
<input type="file" id="testData" class="custom-file-input" name="test_data">
<label class="custom-file-label" for="testData">Choose file</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" #click="store">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['companyName', 'userFullName'],
data() {
return {
actions: [],
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
createAction: {
errors: [],
date: '',
company: '',
name: '',
communication_type: '',
contact: '',
current_status: '',
action_item: ''
},
url: ''
}
},
mounted() {
// console.log('Action Log Mounted.');
this.getActions();
// updates the date when changed in add new action form
$('#date').on('changeDate', () => { this.actions.date = $('#date').val() });
},
methods: {
getActions() {
//get company name to pass to request
var currentLocation = window.location.href;
// console.log(currentLocation);
var companyName = currentLocation.split('/');
companyName = companyName[companyName.length - 1];
let url = '/action-log/' + companyName;
this.url = url;
// console.log("just stored this.url with " + this.url);
//get actions
axios.get(url)
.then(response => {
this.actions = response.data;
this.actions.company = this.companyName;
this.actions.name = this.userFullName;
})
.catch(error => {
console.log(error);
});
},
store() {
let url = window.location.href;
url = url.replace('home', 'action-logs');
console.log(this.url);
this.persistAction(
'post',
// '/' + this.url,
this.url,
this.actions,
'#addAction'
);
},
persistAction(method, uri, form, modal) {
// console.log("method = " + method);
// console.log("uri = " + uri);
// console.log("form = " + form);
// console.log("modal = " + modal);
console.log("date = " + form.date);
console.log("company = " + form.company);
console.log("name = " + form.name);
console.log("contact = " + form.contact);
console.log("current_status = " + form.current_status);
console.log("action_item = " + form.action_item);
form.errors = [];
axios[method](uri, form)
.then(response => {
this.getActions();
// console.log('seemingly successful');
form.date = '';
form.company = '';
form.name = '';
form.communicationType = 'not-selected';
form.contact = '';
form.currentStatus = '';
form.actionItem = '';
form.productDocument = '';
form.testData = '';
form.errors = [];
})
.catch(error => {
if (typeof error.response.data === 'object') {
form.errors = _.flatten(_.toArray(error.response.data));
}
else {
form.errors = ['Something went wrong. Please try again.'];
}
console.log('there was an error: ' + error);
});
}
}
}
</script>
And the code I'm trying to use from my controller:
public function store(Request $request)
{
// get company being viewed
$companyViewing = explode('/', $request->path());
$companyViewing = $companyViewing[count($companyViewing) - 1];
$data = $request->json()->all();
// Log::debug($request);
// Log::debug($data);
$action = new ActionLog();
$action->string_date = $request->date;
$action->user_id = Auth::user()->id;
$action->company_name = $request->company;
$action->name = $request->name;
$action->communication_type = $request->communication_type;
$action->contact = $request->contact;
$action->status = $request->current_status;
$action->action_item = $request->action_item;
$client_id = Company::where('name', '=', $companyViewing)->first(['id']);
$action->activity_key = '1,' . $client_id->id;
if($request->assigned_to !== null) {
$action->assigned_to = $request->assigned_to;
}
else {
$action->assigned_to = "no one";
}
$action->save();
$actions = '';
if(Auth::user()->role == 'admin') {
$actions = ActionLog::where('user_id', '=', Auth::user()->id)
->where('activity_key', '=', '1,' . $client_id->id) //return only relevant activities between AST and client, even if the client is AST!
->orderBy('created_at', 'desc')
->get();
}
else {
$actions = ActionLog::where('user_id', '=', Auth::user()->id)
->where('activity_key', '=', '1,' . $client_id->id)
->orderBy('created_at', 'desc')
->get(['id', 'string_date', 'company_name', 'name', 'communication_type', 'contact', 'status', 'action_item']);
}
return response()->json(['success' => 'Data is successfully added', 'actions' => $actions, 'role' => Auth::user()->role]);
}
EDIT: Here is the output for when I call console.log for the form data from vue.
date = 01/01/1970 app.js:47573:13
company = AST app.js:47574:13
name = Frank app.js:47575:13
contact = zxcv app.js:47576:13
current_status = test app.js:47577:13
action_item = asdf app.js:47578:13
there was an error: Error: Request failed with status code 500
Output in laravel.log when I call Log::debug($request->all()) and Log::debug($data). Both calls give this same array of information, which actually is not relevant to what I'm posting. These are the current records that already exist in the database table, which seems strange since I'm trying to get the data from the form.
[2018-11-07 19:50:14] development.DEBUG: array (
0 =>
array (
'id' => 4,
'user_id' => 1,
'company_name' => 'AST',
'name' => 'Frank',
'communication_type' => 'email',
'contact' => 'asdf',
'status' => 'fdas',
'action_item' => 'asdf',
'assigned_to' => 'no one',
'string_date' => '11/11/2018',
),
1 =>
array (
'id' => 3,
'user_id' => 1,
'company_name' => 'AST',
'name' => 'Frank',
'communication_type' => 'email',
'contact' => 'fdas',
'status' => 'fda',
'action_item' => 'fdas',
'assigned_to' => 'no one',
'string_date' => '10/24/2018',
),
2 =>
array (
'id' => 2,
'user_id' => 1,
'company_name' => 'AST',
'name' => 'Frank',
'communication_type' => 'fax',
'contact' => 'asdf',
'status' => 'asdf',
'action_item' => 'asdf',
'assigned_to' => 'rob',
'string_date' => '10/10/2018',
),
3 =>
array (
'id' => 1,
'user_id' => 1,
'company_name' => 'AST',
'name' => 'Frank',
'communication_type' => 'in-person',
'contact' => 'asdf',
'status' => 'asdf',
'action_item' => 'asdf',
'assigned_to' => 'bob',
'string_date' => '10/02/2018',
),
)
Thank you in advanced for any insight and help!

Answer 1

Thanks to the help of #rickdenhaan and #adam, I found that my output in the controller showed data from my database. While it seems like that there are quite a few reasons you might get a 500 response from an Axios call, my case was that I was passing the incorrect array to the call with data that didn't have anything to do with my form data and I also was binding the data in the form to the incorrect array.