Laravel Image Validation - laravel

Question

I am writing a vue component where users can upload a profile picture that I want to validate on the backend using Laravel's built-in image validation. I use an axios post call with a JSON object that has the following key value pair.
When I go the backend I send it through a custom Laravel request and put the following validation rule on it.
<?php
namespace App\Http\Requests;
use App\Department;
use Illuminate\Validation\Rule;
use Illuminate\Foundation\Http\FormRequest;
class ChangePersonalInfo extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* #return bool
*/
public function authorize()
{
if(auth()->user()) return true;
else return false;
}
/**
* Convert certain request parameters before validation
*
* #return void
*/
protected function prepareForValidation()
{
$this->merge([
'assigned_states' => explode(',', $this->assigned_states),
'customer_price_level' => json_encode($this->customer_price_level),
'customer_price_list' => json_encode($this->customer_price_list),
'customer_type' => json_encode($this->customer_type),
'email_notifications' => filter_var($this->email_notifications, FILTER_VALIDATE_BOOLEAN),
'employee' => filter_var($this->employee, FILTER_VALIDATE_BOOLEAN),
'read_notification_terms' => filter_var($this->read_notification_terms, FILTER_VALIDATE_BOOLEAN),
'reviewed' => filter_var($this->reviewed, FILTER_VALIDATE_BOOLEAN),
'text_notifications' => filter_var($this->text_notifications, FILTER_VALIDATE_BOOLEAN),
'verified' => filter_var($this->verified, FILTER_VALIDATE_BOOLEAN),
'termsCode' => json_encode($this->termsCode)
]);
}
/**
* Get the validation rules that apply to the request.
*
* #return array
*/
public function rules()
{
$departments = Department::select(['department_name'])->pluck('department_name')->toArray();
return [
'api_token' => 'string|alpha_num',
'assigned_states' => 'array|nullable',
'assigned_states_description' => 'string|nullable',
'avatar_file' => 'string|nullable',
'bc_details' => 'string|json|nullable',
'bc_guid' => 'string|nullable',
'company_address_id' => 'numeric|integer|nullable',
'company_name' => 'string|nullable',
'company_website' => 'string|nullable',
'created_at' => 'string|nullable',
'customer_price_level' => 'json',
'customer_price_list' => 'json',
'customer_type' => 'json',
'customer_price_level.id' => 'numeric|integer',
'customer_price_list.id' => 'numeric|integer',
'customer_type.id' => 'numeric|integer',
'department' => ['string', 'nullable', Rule::in($departments)],
'email' => 'required|email',
'email_notifications' => 'boolean',
'employee' => 'boolean',
'first_name' => 'string|nullable|max:30',
'id' => 'string|integer|alpha_num',
'imageExtension' => 'string|nullable',
'imageFile' => 'sometimes|nullable|image|max:2048',
'last_name' => 'string|nullable|max:30',
'marketing_preferences' => 'string|nullable',
'notes' => 'string|nullable',
'price_level_id' => 'required|numeric|integer',
'price_list_id' => 'numeric|integer|nullable',
'primary_address_id' => 'numeric|integer|nullable',
'pimary_billing_address' => 'numeric|integer|nullable',
'primary_phone_number_id' => 'numeric|integer|nullable',
'read_notification_terms' => 'boolean',
'reviewed' => 'boolean',
'statusName' => 'string',
'status_id' => 'numeric|integer|nullable',
'termsCode' => 'json',
'termsCode.id' => 'numeric|integer',
'terms_code_id' => 'numeric|integer|required',
'text_notifications' => 'boolean',
'timezone' => 'timezone',
'title' => 'string|nullable',
'type_id' => 'required|numeric|integer',
'updated_at' => 'string|nullable',
'username' => 'string|nullable',
'verificationStatus' => 'string',
'verification_token' => 'string|nullable',
'verified' => 'boolean'
];
}
}
I'm getting a 500 error back with this message.
{"message":"The given data was invalid.","errors":{"imageFile":["The image file must be an image."]}}
Could anyone help me know why it appears to be an image file on the frontend but fails to meet the backend validation?

Answer 1

check this format
'imageFile' => 'required|file|max:512|mimes:jpg,png,jpeg'

Answer 2

You can Try This
'image' => 'required|file|image|max:2048'

Answer 3

I used the FormData in order to get this work. It was fairly simple after that with a basic axios post request. I will add the finalized code I used. This JavaScript code was able to send an image properly to the backend which was validated in Laravel as an image.
let formData = new FormData();
Object.keys(this.form).forEach(key => {
formData.append(key, this.form[key]);
});
formData.append('imageFile', this.imageFile);
axios({
method: 'POST',
url: this.routes.save,
data: formData
})