Laravel - POST 422 (Unprocessable Entity)

The 422 is likely a validation failure - you should be able to see more information about the request and response inside your Network tab in the browser's Developer tools. The commented line means a request is not made, so the validation can't be executed.

The error it gives is:

{message: "The given data was invalid.", errors: {avatar: ["The avatar must be an image."]}}
errors
:
{avatar: ["The avatar must be an image."]}
avatar
:
["The avatar must be an image."]
message
:
"The given data was invalid."

I don't get it, I uploaded an image but it says it is invalid. I added this to my input file, Maybe this has something to do with it?

<input type="file" name="avatar" accept="image/*" @change="onChange">

Thanks for helping!

Your avatar object emitted from the ImageUpload component doesn't have a file property, it has a bestand property:

this.$emit('loaded', { src, bestand });

So, replace this.persist(avatar.file);, with this.persist(avatar.bestand);

Okay, I got it working now, But for some reason, it can't find the photo. It says: GET http://ict-hulp.dev/profiel/avatars/BvmDnLQg95a1Ocg3wdWoqj2GMSYPlQZqS6XMYLPb.jpeg 404 (Not Found)

I don't get it because the URL is correct, look: https://imgur.com/a/eMH4C And it filled the image source: https://imgur.com/a/QAzPT

It also doesn't show the placeholder if I haven't selected an image. Which is should

EDIT: Somehow it didn't upload the image to the folder, that's why it can't be found.

You might also have an issue with the relative file path used for the image src - see how it expects to find the image in a profiel directory (I assume this is the current URI). You should use an absolute path an specify the full path relative to the image having the public directory as root.

I never specified it needed to look in a profiel directory, Can you show me an example of what you mean? of for instance, where to specify the full path?

Just add a leading slash to the src attribute in your image tag.

Okay, I got it working now. But there is one small minor problem which you may know. If a user did not set a profile picture it is supposed to show a placeholder but instead, it doesn't show anything and the URL says /storage/null. I've made a IF statement which does that very thing but somehow it does not work correctly. This is the if statement:

if (! $this->avatar_path) {
            return '/images/avatars/placeholder.png';
        }
        return '/storage/' . $this->avatar_path;

I've put this IF statement in my user model.