Dropzone.js vuejs laravel message: "Undefined index: width" - laravel

Question

When I select a file it is uploaded to the public/upload-images folder. In the laravel Controller the validation fails because the params are not included in the request. When I dump and die. This is what I get. As you can see... the params are missing. Below that is the Dropzone setup.
echo '<pre>';
print_r(request()->all());
echo '</pre>';
die();
$data = request()->validate([
'image' => '',
'width' => '',
'height' => '',
'location' => '',
]);
$image = $data['image']->store('user-images', 'public');
$userImage = auth()->user()->images()->create([
'path' => $image,
'width' => $data['width'],
'height' => $data['height'],
'location' => $data['location'],
]);
return new UserImageResource($userImage);
(
[image] => Illuminate\Http\UploadedFile Object
(
[test:Symfony\Component\HttpFoundation\File\UploadedFile:private] =>
[originalName:Symfony\Component\HttpFoundation\File\UploadedFile:private] => 20220406_125155.jpg
[mimeType:Symfony\Component\HttpFoundation\File\UploadedFile:private] => image/jpeg
[error:Symfony\Component\HttpFoundation\File\UploadedFile:private] => 0
[hashName:protected] =>
[pathName:SplFileInfo:private] => /tmp/phpdAwZvd
[fileName:SplFileInfo:private] => phpdAwZvd
)
)
props: [
'imageWidth',
'imageHeight',
'location',
],
data: () => {
return {
dropzone: null,
}
},
mounted() {
this.dropzone = new Dropzone(this.$refs.userImage, this.settings);
},
computed: {
settings() {
return {
paramName: 'image',
url: '/api/user-images',
acceptedFiles: 'image/*',
params: {
'width': this.imageWidth,
'height': this.imageHeight,
'location': this.location,
},
headers: {
'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content,
},
success: (e, res) => {
alert('uploaded!');
},
error: (e, error) => {
console.log(error);
}
};
}
}