Alright, we have a fully functional gallery working right now that we can upload images to and see them displayed down below. Something I'd like to add though is a bit more restriction on what can be uploaded. For instance, maybe I don't want people to upload WebP or GIFs to our gallery. Taking a look at our source code, modifying that is pretty straightforward on the front end. We just have to go up to our FilePond component here. And under the Accepted File Types, change Image.* to the file types that we want to accept. So we can do Image.jpg, Image.jpg, and Image.png.

Okay I got one, so now if I click... I can't select this cat jump because it's a GIF. And if I try to drag it into our uploader manually... It errors out before even hitting the back end, saying the file is of an invalid type. It expects a JPEG or a PNG. We have this working in the front end, but also don't forget that we have some validation in our Laravel app as well. So let's take a look at that. In our ImageController, under the store method, we have this validation happening right now that just specifies that the file coming in should be an image.

In our ImageController, under the store method, we have this validation happening right now that just specifies that the file coming in should be an image. But we can modify this to be a bit more strict. So along with required, file, and image, we can also say mimes, which expects a list of MIME types. Not only will this check the extension of the file, but it'll actually open up the file contents and try to validate that what is in the file is actually what it says it is. And for that we want jpeg, jpeg, and png. So now our validation on the front end matches the validation on the back end. This method, and the server that I'm running this on in general, also has an upload limit.

So now our validation on the front end matches the validation on the back end. This method, and the server that I'm running this on in general, also has an upload limit of 2 megabytes. But our users wouldn't know that because there's currently no restriction on size in the front end. If I try to upload a large file, this is what happens. So we'll use this image here. And we get an error. And if we open up our console, we can see here that we're getting back a 413, that the photo is too large.

And if we open up our console, we can see here that we're getting back a 413, that the photo is too large. But we should add a restriction to that on our front end plugin as well so it doesn't hit the back end each time someone tries to upload a large image. Back in our source code, the first thing that we need to do is open up the command line because we're going to be installing a new package. This is going to be like the FilePondPluginFileValidate type, except this is going to be validating size. So we run npm install save-dev FilePondPluginFileValidate-size. And once that finishes up, we can import it underneath this plugin here.

So we run npm install savedev FilePondPluginFileValidateSize. And once that finishes up, we can import it underneath this plugin here. Import FilePondPluginFileValidateSize from FilePondPluginValidateSize. And then all we have to do is include it in our list of plugins in the ViewFilePond method. Now to actually use it, we can add some options into our FilePond component up here. So now we have access to a list of properties that we can see on the FilePond documentation. So by default, file size validation is set to true when that plugin is installed. But we're looking for max file size. So that expects a string it looks like for the maximum size that each file should be. Our server is limited to two megabytes, so I'm going to do a little bit lower than that.

So that expects a string it looks like for the maximum size that each file should be. Our server is limited to two megabytes, so I'm going to do a little bit lower than that just to be sure. So I'm going to say maxSize is one megabyte. This should be maxFileSize. Alright now let's compile our assets. And take a look at this in the browser. Okay now let's try uploading that image again. And you can see that it immediately errored out. The file is too large.

from our Laravel backend. So let's see how this works right now. If we open up our ImageController. And in the store method, let's just make an early return of a response. And say error. This is a test. And we'll give it a response code of 500. Which is normal for a server-side error. Now let's see what happens when we try to upload an image. We just see error during upload, tap to retry.

Now let's see what happens when we try to upload an image. We just see an error during upload, tap to retry. With no real helpful message or anything to the user, that could possibly let them know why their image upload failed. And if we take a look at the console, we're just getting back a 500 error type with the body of internal server error. No real helpful information there. The network response does give us the error back though, and this string is what I'd like to display instead of the error during upload. So let's go back to our source code.

to display instead of the error during upload. So let's go back to our source code. And in the app.vue file, let's scroll down to where we initialize FilePond. Above this set options here, and we're going to create a new constant called serverMessage. Right now this is just an empty object. But in our process option below the url, we're going to add a new one called onError. It's a function that just has the argument response. And in the return, we're going to set the serverMessage equal to the response that we get back from the server. We're getting JSON back, so first we need to parse that.

get back from the server. We're getting JSON back, so first we need to parse that. And now this serverMessage constant should be the response back from the server whenever there's an error on one of the files being uploaded. Now to use that, under our server option, we're going to add a new one called labelFileProcessingError. This is also a function with no arguments, and in the return for it, we're just going to return the message that we get back from the server. In our case, that was set with an error key, so it's just serverMessage['error']. Alright, let's save this and recompile our assets. Heading back into our browser, let's see if this works.

Alright, let's save this and recompile our assets. Heading back into our browser, let's see if this works. So let's upload an image. And nothing. We're getting the error back, serverMessage is read-only. This might be because of my use of const here. I think it might be the way that Vue is using strict mode, but let's change this to let and see what happens now. Let's recompile and go back to our browser. Okay let's upload an image again.