Laravel file upload not working: Call to a member function getClientOriginalName() on string - axios

Question

I am trying to upload a file from an input field. I have the following fields:
<tr>
<td>
<input id="item" class="form-control-file my-2 w-100" type="file">
</td>
<td>
<input id="remark" class="form-control my-2 w-100" type="text">
</td>
</tr>
Then my axios post:
self.$http.post('http://127.0.0.1:8000/api/item/new', {
batchcode: document.getElementById("batchcode_form").value, // is somewhere else in the code, works fine.
product_code: document.getElementById("item").files[0].name,
remark: document.getElementById("item"),
input_type: 'item'
}).then(function (response) {
if (response.data.status === 'success') {
// success
} else {
// failed
}
});
The headers are displaying the following data:
batchcode "batchcode i filled in"
input_type: "file"
product_code: "filenamewithoutpath.png"
remark: "remark i filled in"
Now I have the following code in my itemscontroller:
public function store(Request $request)
{
if ($request->product_code != "" && $request->remark != "") {
// create item
$item = new Item;
$item->batchcode = $request->batchcode;
$item->remarks = $request->remark;
if ($request->input_type === "file") {
// upload file
$file = $request->product_code;
$item->product_code = $file->getClientOriginalName();
$new_name = time().$file->getClientOriginalName();
$path = public_path() . '/uploads/';
$file->move($path, $new_name);
$item->product_code = '/uploads/' . $new_name;
} else {
$item->product_code = $request->product_code;
}
$item->save();
return response()->json([
'status' => 'success',
'data' => $item
]);
} else {
return response()->json([
'status' => 'error',
'data' => 'Not all data was given.'
]);
}
}
When I execute this I get the following error:
Call to a member function getClientOriginalName() on string
I get the correct filename, but the upload part isn't working. I can't figure out or find anything on google why it doesn't work.

Answer 1

You can use FormData. Example:
let payload = new FormData()
And then add the fields to the form you want to send :
payload.set('input_type', 'item')
If you are uploading images or files, you may want to use .append
payload.append('remark', imageFile);
And then you can use axios post method (You can amend it accordingly)
self.$http.post('http://127.0.0.1:8000/api/item/new', payload, {
headers: {'Content-Type': 'multipart/form-data' }
})
.then(function (response) {
//handle success
console.log(response);
})
.catch(function (response) {
//handle error
console.log(response);
});