I'm confused as what it is you want to do, and what your code is supposed to to, and what it actually does.
However, upload ing a file with ajax would look somethonh like this.
async function storeRecord() {
let formData = new FormData();
formData.append('_token', '{{ csrf_token() }}');
formData.append('artist_name', getElement('#artist_name').value);
formData.append('title', getElement('#title').value);
formData.append('released', getElement('#released').value);
formData.append('genre_id', getElement('#genre').value);
formData.append('format_id', getElement('#format').value);
formData.append('cover_image', getElement('#cover_image').files[0])
fetch(`/records`, {
method: 'POST',
body: formData
}).then(response => response.json()).then(response => {
if (response.message === 'Success') {
window.location.assign(`/`);
}
});
}
If you have a upload that allows for more than one file to be selected, you need to append them one by one.
The getElement is just a helper function to make document.querySelector shorter to type.
function getElement(selector) {
return document.querySelector(selector);
}
And then store it to the filesystem and the database.
public function store(RecordRequest $request): Response
{
$path = '';
$valid = $request->validated();
if ($request->has('cover_image')) {
$file = $request->file('cover_image');
$path = $file->store('cover_images', 'public');
}
$record = Record::create(array_merge($valid, [
'cover_image' => $path,
]));
return response('{"message": "Success"}', 200);
}
And of course if you have more than one image you need to look over them.