Using multipart/form-data header to upload files using vuejs, laravel, axios causes 401 - laravel

Question

I am trying to upload file using axios library.
axios.post('/images/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then( response => console.log(response))
Route::middleware('auth:api')
->group( function() {
Route::post('/images/upload', 'ImageController#store');
})
I get the following error with status code
{"message": "unauthenticated"}
The moment I remove the header part i.e. "multipart/form-data", the request goes through, but that's no bueno since I need to send the file as well.

Answer 1

I found the problem when trying to reproduce this
Send a Bearer header with the api_token in the header
for example
<meta name="csrf-token" content="{{ csrf_token() }}">
<div id="app">
<input type="file" name="image" id="image" onchange="upload()">
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
<script>
function upload() {
let image = document.getElementById('image').files[0];
let formData = new FormData();
formData.append('image', image);
axios.post('/images/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer {{ auth()->user()->api_token }}',
}
}).then( response => console.log(response))
}
</script>
Assuming a controller function like this
public function store(Request $request)
{
$path = $request->file('image')->store('public');
return $path;
}
You would get the stored image url in the response
Hope this helps :)