Now the last file input that I want to go in depth into is the File Upload. So this will allow you to upload images or PDFs or anything you need to to your models. So let's go into our code and let's actually go to the CreateSpeakerMigration. And let's update this a little bit. I want to add an avatar so we can have a picture of who they are. So I'm going to make this a text. And the reason I'm making this a text instead of a string is because when you upload files with Filament, Filament will automatically rename those files. And then there's some other things where that name can end up getting pretty long. And I've actually run into cases where it ends up being more than 255 characters. So just to be safe, I like to name it as a text. Another thing I want to do here is make a few other fields fillable just because that's how I want the app to work.

So just to be safe, I like to name it as a text. Another thing I want to do here is make a few other fields fillable just because that's how I want the app to work. So qualifications, bio, and Twitter handle, all those will be nullable. So this is all we need to do. Let's go ahead and run our migrations. And now let's go back to the code and let's look at the Speaker model, which is where we have the form defined. And what I want to do after name is just add a file upload component. And I'm going to name it avatar because that's what I named my database column. And this is actually all we have to do to get started. So let's go to the browser. And now here I'm at speakers and I'm going to add a new speaker. You can see I now have an avatar field here.

And now here I'm at speakers and I'm going to add a new speaker. You can see I now have an avatar field here. So I can go ahead and choose any file I want. In this case, I have a fake person. So we'll do that and test speaker. We'll fill this out. I haven't done my factory fill on this yet. So test email.com. And these are still required. I need to change that in the form. So we'll do that in a minute. But you can see I created this speaker and the file has now been uploaded. Like I said, it renames the file with a random string. The reason it does that is because if someone has headshot.jpg and then the next speaker you add, you upload their headshot, which is also named the exact same thing, it's going to override it.

The reason it does that is because if someone has headshot.jpg and then the next speaker you add, you upload their headshot, which is also named the exact same thing, it's going to override it. So Filament helps you out by giving you a random name for that image so that you don't have those collisions. Now you can customize that and we'll see that in a minute, but that's why it renames the file. And so if we go to our speakers, now we have one. Let me go back to the file input here. And let's also remove required off these ones that don't need to be required anymore. So we'll do that. And so what can we do with a file upload? Well, there's a couple things. First thing we can do is we can have a max size. So this is going to take actually bytes. So if we did something really tiny like 1, then basically nothing is going to work.

So this is going to take actually bytes. So if we did something really tiny like one, then basically nothing is going to work. So you have to do the calculation like Copilot said there of 1024 times 1024 times 2. This would be two megabytes. Let's just make it 10 megabytes. Another thing that we can do is define what file inputs we're allowed to use. And one of the nice ways to do that when I am doing an avatar is I can just pass an image. So this is going to do two things. Number one on the back end, it's the validation rule that checks to make sure it's actually one of the MIME types that is accepted as an image. The other thing it does is it informs FilePond, which is the JavaScript library that the file upload uses on the front end to only accept images.

The other thing it does is it informs FilePond, which is the JavaScript library that the file upload uses on the front end to only accept images. So if we go back to the browser and let's go to add a new Speaker here. And when I go to find an image in here, you can see this PDF is no longer selectable because Filament informed FilePond that we're only taking images. So it's not going to allow you to upload a PDF, which is really nice. Now in this case, let's go ahead and get a different photo, another Speaker. And let's give an email and let's go ahead and create this one. So we've got a couple image or a couple Speakers and they've got images attached, which is really nice. Now, if we go back to the file upload component, let's see what else we can do here.

So we've got a couple image or a couple speakers and they've got images attached, which is really nice. Now, if we go back to the file upload component, let's see what else we can do here. Well, we are doing an avatar. So one of the really nice things here is we can just pass in actually avatar. And I'm not sure if this is documented. But if we take a look at what this does is it just adds a bunch of modifiers that you could have added individually. But if you're uploading an avatar, this might be what you want. So you can actually look through here. You can read the documentation on a file upload to see what all of these things do. But you can see image here is already there.

You can read the documentation on a file upload to see what all of these things do. But you can see image here is already there. So I can actually get rid of image and go back to the browser now. And instead of that big box, we have actually an avatar that kind of looks like an avatar. And so if this was going to show up here where the letter K is, this is kind of mimicking what that might look like, which is really nice. Now, another thing here is what if you have an image, but it's not exactly the image that you want? Like in this example, I had some AI generate a random picture of a developer. But this is not really a headshot. If I just want the headshot, that image needs to be edited. Well, let's go back to PhpStorm and we can pass in image editor.

If I just want the headshot, that image needs to be edited. Well, let's go back to PhpStorm and we can pass in image editor. And what this does now when I go back to the page and reload is it gives me this nice little pencil here. And when I click on it, it actually brings this up and I can edit this image. And so this is all just comes right out of the box. Very great for your users and super simple to implement. And now if I save here, this is no longer just a picture of the whole body, but it's actually a headshot. And obviously I have to save. And so now you can see that the headshot saved. So it's good to understand how file uploads work in Livewire.

And so now you can see that the headshot saved. So it's good to understand how file uploads work in Livewire. So if you're not familiar with that, let's look into it really quickly. If we go back to PhpStorm and open up our directory, and we need to go down to the storage directory. And we'll see that when you upload a file, a couple of things happen. First, when it's uploaded, it goes into a temp directory. And that's what's called side loading. So if we go back to the browser, let's add one more speaker. And if we browse here, and let's just pick any person, again, these are AI generated faces. So now this image is here, but it hasn't actually been saved yet.

And if we browse here, and let's just pick any person, again, these are AI generated faces. So now this image is here, but it hasn't actually been saved yet. What it's done is it's been side loaded. So if we go to PhpStorm, we look at this Livewire temp directory, you can see a file here. And what it's doing is it's sitting there waiting for the form to actually be saved. And when it is saved, it's going to move it over into this public directory here. So if I go back to the browser, and fill this out, and when I create this one, it's going to be saved. And if I go back to PhpStorm, we can see now that it moved out of the temporary directory, and it moved over here. So by default, everything is being stored locally, because the file system disk that's defined in my .env file is local.

So by default, everything is being stored locally, because the file system disk that's defined in my .env file is local. If you need to do S3 or some other external file system, that's fine. Just make sure you have your core set up. I'm not going to go through that. But so whether this is on S3, or whether it's your local file system, everything right now is just being stored in this public directory here. Now, if you want to change the directory, you can just pass in directory. And so if we want this to be avatars, we can do that. And then the next time we upload a file, when it gets saved, it's going to be put in avatars, and then the file name there. I mentioned that Filament does give you this random string to create a unique file name.

And then the next time we upload a file, when it gets saved, it's going to be put in avatars, and then the file name there. I mentioned that Filament does give you this random string to create a unique file name. If you want to change that behavior, first of all, you could preserve file names. And like I said, I don't recommend this, because this is opening yourself up to having some collisions with the files that are being uploaded. So I don't actually recommend this. So now in order to see what other options we have, let's go to the Filament docs. And so if we're in the file upload page, and you can see there's a controlling file names here, this is where you can pass in this method to define how you want the file name to be stored. Or you can actually store the original file names in a separate column in your database. So that's up to you.

Or you can actually store the original file names in a separate column in your database. So that's up to you. And you can read through this documentation and figure out how you want to do that. Now there's a lot of other functionality. I'm just really touching on a high level here. But if you scroll through these docs, and you look at the image editor and the different options that you have, and then some other things, like for example, altering the appearance of the file upload area, this is something that I've had to do in the past. Because let's say your images are uploading a logo with a transparent background. And that logo is going to sit on top of a black background or a really light background.

Because let's say your images are uploading a logo with a transparent background. And that logo is going to sit on top of a black background or a really light background. And so it's important for them to see how it's going to look on the background it will sit against. This allows you to alter that. And ultimately, this is using FilePond. So if you go to the FilePond website, you can see all the different options that you have with your file uploads. Now I do want to go over one more thing, which if we scroll up to the top, you can see, at the very top, you can see the Filament also supports the Spossy media library. So I know a lot of developers use this Spossy package to manage all of their images or different uploads that are attached to models.

So I know a lot of developers use this Spossy package to manage all of their images or different uploads that are attached to models. And so there is actually a first party filament plugin that's available to do that. So let's go ahead and look at that documentation. So we can see this is officially supported. It's a first party filament plugin. So let's do the installation really quickly. Now that installation actually went out and installed the Spossy media library package for me. So I'm going to need to install that package. One of the things the filament docs give us the instructions here is we need to publish the migrations and run them.

So I'm going to need to install that package. One of the things the Filament docs give us the instructions here is we need to publish the migrations and run them. So let's do that. And let's run those migrations. Okay, and then if we go back to the Filament docs, it also helps you, it links to the Spossy docs where we need to prepare our Eloquent model. So let's go ahead and look at that really quickly. And we just need to implement this contract and use this trait. So let's actually do that on the Venue. Let's say we just want to capture a bunch of pictures of the building.

So let's actually do that on the venue. Let's say we just want to capture a bunch of pictures of the building. So the venue is going to implement as media. And we need to use interactsWithMedia. So here, because we're using Spossy's table to store all these images, we don't have to make any changes to the venue model itself. So all we have to do now is go down here. And when we're creating a venue, let's have a Spossy media library file upload input. So let's call this images. And this is very similar to the file upload that comes standard, but it does have a few extra options.

So let's call this images. And this is very similar to the file upload that comes standard, but it does have a few extra options. Let's go back to the browser. And let's go back to the plugin documentation. And it's all pretty straightforward. You can define the collection that we want to use for all of these images. And there's some reordering. There's other things. You can review these docs. But let's go ahead and implement it really quickly.

You can review these docs. But let's go ahead and implement it really quickly. We have a collection. Let's say this is venueImages. In this case, we want multiple. So we just pass in multiple as a method that we can chain on here. And these are images as well. I think this is good. So let's go back to the browser. And now let's go to our venues.

So let's go back to the browser. And now let's go to our venues. You'll see I have the ability to add multiple images here. So let's just... I've got a couple. I'm going to take all three. And when we upload those, they're all going to come through. Let me fill in the rest of this information. And we've got these three. So when I click create,

And we've got these three. So when I click create, it was created and all three of these were stored. If we go into the database, we can see now there is a media table. And if we look at that, we've got all three of our images saved there. If we go back to the browser, they are here on the edit page. If we needed to remove one, we could do that.

they are here on the edit page. If we needed to remove one, we could do that and save the changes and everything's going to work. So you can see how powerful Filament is and particularly the forms that we've covered. Now there are a lot more form inputs that are available to you. I'm not going to go over all of these, but this is a really good starting point for you to understand all the different types

but this is a really good starting point for you to understand all the different types of things you can do with filling out forms in Filament.