axios.post vs Spark.post

I have a form that I'm using to enter data for the project and upload an image for it.

I am having difficulties getting Validator to validate the file from input by using Spark.post.

I have seen that Spark uses axios.post with new FormData when updating profile photos but for an existing user.

The issue is that when I use FormData, fill it in with input file value alongside other form fields, and submit to the corresponding controller so it goes to interaction for validation, my form is not getting errors back.

No such problem with Spark.post and it works fine but I can't use Spark.post in order to post the file upload.

            axios.post('/project/branding/upload', this.gatherFormData() )
                .then(
                    () => {
                        Bus.$emit('updateProjectBranding');
                        self.form.finishProcessing();
                        console.log('finished processing upload ->', self.form);
                    },
                    (error) => {
                        console.log('Houston we have a problem...');
                        self.form.setErrors(error.data.responseJSON);
                    }
                ).catch(function(error) {
                    console.log(error)
            });

        gatherFormData() {
            const data = new FormData();
            data.append('user_id', this.user.id);
            data.append('title', this.form.title);
            data.append('description', this.form.description);
            data.append('projectphoto', this.form.projectphoto); // input file
            return data;
        }

validator from

class ProjectBrandingUpload implements Contract

    public function validator($user, array $data)
    {
        return Validator::make($data, [
            'title' => 'required',
            'projectphoto' => 'image|max:4000',
        ]);
    }

As you can see, I don't want photo upload to be required. This will not pass validation.

If I do enter both fields, meaning I enter title and projectphoto upload, it will go through, but if I leave any of the fields that does not satisfy the validator, I am not getting the error data back to the Vue component and the form appears as if it is busy. I get 422 http error in the console but the errors are not returned back.

Any ideas how I could solve this. Thanks.