diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-blade.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-blade.md
deleted file mode 100644
index acc3e3ea3..000000000
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-blade.md
+++ /dev/null
@@ -1,228 +0,0 @@
----
-title: Handling uploads with Blade
-weight: 4
----
-
-You can make use of the `x-media-library-attachment` and `x-media-library-collection` Blade components to handle uploads.
-
-## Getting started
-
-The Blade components that handle uploads leverage [Livewire](https://laravel-livewire.com) under the hood. That's why
-you must follow [Livewire's installation instructions](https://laravel-livewire.com/docs/installation) as well.
-
-Make sure Alpine is available on the page as well. The easiest way is to include it from a cdn
-
-```html
-
-```
-
-Visit [the Alpine repo](https://github.com/alpinejs/alpine) for more installation options.
-
-In some cases, you'll have to clear your Laravel caches by running `php artisan optimize:clear` to get the components to show up.
-
-## Use inside other Livewire components
-
-Our Blade components are meant to be used in regular HTML forms. If you want to use Media Library Pro within your own Livewire components, read this page on [handling uploads with Livewire](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/handling-uploads-with-livewire).
-
-## Demo application
-
-In [this repo on GitHub](https://github.com/spatie/laravel-medialibrary-pro-app), you'll find a demo Laravel application in which you'll find examples of how to use Media Library Pro inside your Blade views.
-
-If you are having troubles using the components, take a look in that app to see how we've done it.
-
-## Handling a single upload
-
-You can use `x-media-library-attachment` to upload a single file. Here's an example:
-
-```html
-
-```
-
-
-
-The `x-media-library-attachment` will take care of the upload. Under the hood the upload is processed by
-a [Livewire](https://laravel-livewire.com) component.
-
-After a file has been uploaded it will be stored as a temporary upload. In case there are validation errors when
-submitting the form, the `x-media-library-attachment` will display the temporary upload when you get redirected back to
-the form. There's no need for the user to upload the file again.
-
-In the controller handling the form submission you should validate the temporary upload and transfer it to an Eloquent
-model. You can read more on that [on this page](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/processing-uploads-on-the-server).
-
-## Are you a visual learner?
-
-In this video you'll see a demo of the attachment component.
-
-
-
-Want to see more videos like this? Check out our [free video course on how to use Laravel Media Library](https://spatie.be/courses/discovering-laravel-media-library).
-
-## Handling multiple uploads
-
-Here's an example of how you can allow multiple uploads
-
-```html
-
-```
-
-
-
-After files have been uploaded, they will be stored as a temporary uploads.
-
-In the controller handling the form submission you should validate the temporary upload and transfer it to an Eloquent
-model. You can read more on that [on this page](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/processing-uploads-on-the-server).
-
-Here's a video where multiple uploads are being demoed:
-
-
-
-## Setting a maximum amount of uploads
-
-To set a maximum number of files you can add a `max-items` attribute. Here is an example where users can only upload two
-files.
-
-```html
-
-```
-
-## Validating uploads in real time
-
-The upload can be validated before the form is submitted by adding a `rules` attribute. In the value of the attribute
-you can use any of Laravel's available validation rules that are applicable to file uploads.
-
-Here's an example where we only accept `png` and `jpg` files that are 1MB or less.
-
-```html
-
-```
-
-This validation only applies on the creation of the temporary uploads. You should also perform validation
-when [processing the upload on the server](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/processing-uploads-on-the-server).
-
-## Administer the contents of a media library collection
-
-You can manage the entire contents of a media library collection with `x-media-library-collection` component. This
-component is intended to use in admin sections.
-
-Here is an example where we are going to administer an `images` collection of a `$blogPost` model. We assume that you
-already [prepared the model](/docs/laravel-medialibrary/v10/basic-usage/preparing-your-model) to handle uploads.
-
-```html
-
-```
-
-This component will display the contents of the entire collection. Files can be added, removed, updated and reordered.
-New files will be uploaded as temporary uploads.
-
-The value you pass in `name` of the component will be use as the key name in which the component will send the state of
-the collection to the backend. In the controller handling the form submission you should validate the new contents of
-the collection and sync it with the collection of the eloquent model. You can read more on that [on this page](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/processing-uploads-on-the-server).
-
-Like the `x-media-library-attachment` component, the `x-media-library-collection` accepts `max-items` and `rules` props.
-
-In this example, the collection will be allowed to hold `png` and `jpg` files that are smaller than 1 MB.
-
-```html
-
-```
-
-In this video you'll see the collection component in action
-
-
-
-Want to see more videos like this? Check out our [free video course on how to use Laravel Media Library](https://spatie.be/courses/discovering-laravel-media-library).
-
-### Using custom properties
-
-Media library supports [custom properties](/docs/laravel-medialibrary/v10/advanced-usage/using-custom-properties) to be saved on a media item. By
-default, the `x-media-library-collection` component doesn't show the custom properties. To add them you should create a
-blade view that will be used to display all form elements on a row in the component.
-
-In this example we're going to add a custom property form field called `extra_field`.
-
-```html
-@include('media-library::livewire.partials.collection.fields')
-
-
-```
-
-You should then pass the path to that view to the `fields-view` prop of the `x-media-library-collection` component.
-
-```html
-
-```
-
-This is how that will look like.
-
-
-
-Custom properties can be validated using [a form request](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/processing-uploads-on-the-server).
-
-In this video, you'll see an example of how extra fields can be added.
-
-
-
-## Uploading directly to S3
-
-Under the hood, the `attachment` and `collection` components use Livewire to perform uploads. Currently, Livewire does not support uploading multiple files to S3. That's why only the `attachment` component can be used to upload files to S3.
-
-To get started with uploading files to `s3`, make sure to follow Livewire's instructions on [how to upload directly to S3](https://laravel-livewire.com/docs/2.x/file-uploads#upload-to-s3).
-
-Next, make sure you have configured the media disk that uses the S3 driver.
-
-With that configuration in place, the `attachment` component will now upload directly to S3.
-
-
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-2.md
similarity index 98%
rename from docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire.md
rename to docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-2.md
index 464b966fd..ee5c29483 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-2.md
@@ -1,13 +1,15 @@
---
-title: Handling uploads with Livewire
+title: Handling uploads with Livewire 2
weight: 4
---
+Media Library Pro v2 is compatible with Livewire v2.
+
You can make use of the `x-media-library-attachment` and `x-media-library-collection` inside of the views of your own Livewire components.
## Getting started
-Make sure to have followed [Livewire's installation instructions](https://laravel-livewire.com/docs/installation).
+Make sure to have followed [Livewire's installation instructions](https://livewire.laravel.com).
Make sure Alpine is available on the page as well. The easiest way is to include it from a CDN:
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-3.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-3.md
new file mode 100644
index 000000000..a27a11758
--- /dev/null
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-3.md
@@ -0,0 +1,361 @@
+---
+title: Handling uploads with Livewire 3
+weight: 5
+---
+
+Media Library Pro v3 is compatible with Livewire v3.
+
+You can make use of the `livewire:media-library` and `livewire:media-library` inside of the views of your own Livewire components.
+
+## Getting started
+
+Make sure to have followed [Livewire's installation instructions](https://livewire.laravel.com).
+
+### Livewire 3
+
+You must add `@mediaLibraryStyles` before the closing `` tag of your layout file.
+
+## Demo application
+
+In [this repo on GitHub](https://github.com/spatie/laravel-medialibrary-pro-app), you'll find a demo Laravel application in which you'll find examples of how to use Media Library Pro inside your Livewire components.
+
+If you are having troubles using the components, take a look in that app to see how we've done it.
+
+## Handling a single upload
+
+You can use `livewire:media-library` component to upload a single file.
+
+
+
+Here's how that might look like in the view of your Livewire component:
+
+```html
+
+```
+
+In your Livewire component you must:
+- use the `Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia` trait
+- add a public property for binding the media library component to (in the example above: `myUpload`, of course you can use any name you want)
+- for each component that you are going to use you should add a public property with the name you use in the view for that component (in the example above: `myUpload`)
+
+Here is an example component:
+
+```php
+namespace App\Http\Livewire;
+
+use App\Models\YourModel;
+use Livewire\Component;
+use Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia;
+
+class MyForm extends Component
+{
+ use WithMedia;
+
+ public $name;
+
+ public $message = '';
+
+ public $myUpload;
+
+ public function submit()
+ {
+ $formSubmission = YourModel::create([
+ 'name' => $this->name,
+ ]);
+
+ $formSubmission
+ ->addFromMediaLibraryRequest($this->myUpload)
+ ->toMediaCollection('images');
+
+ $this->message = 'Your form has been submitted';
+
+ $this->name = '';
+ $this->myUpload = null;
+ }
+
+ public function render()
+ {
+ return view('livewire.my-form');
+ }
+}
+```
+
+Immediately after a file has been uploaded it will be stored as a temporary upload. In the method that handles the form submission you must use the `addFromMediaLibraryRequest` method to move the uploaded file to the model you want.
+
+To clear out an uploaded file from being displayed, you can set bound property `myUpload` to `null`. This will only clear the uploaded file from view, uploaded files will not be deleted.
+
+### Validating a single upload
+
+You can pass any Laravel validation rule to the rules prop of the `livewire:media-library` component. Here's an example where only `jpeg` and `png` will be accepted.
+
+```html
+
+```
+
+You can make the upload required by validating it in your Livewire component:
+
+```php
+// in the method that handles the form submission inside your livewire component
+
+public function submit()
+{
+ $this->validate([
+ 'myUpload' => 'required',
+ ]);
+
+ // process the form submission
+}
+```
+
+## Handling multiple uploads
+
+Uploading multiple files is very similar to uploading a single file. The only thing you need to add is a `collection` property
+
+```html
+
+```
+
+
+
+In your Livewire component you must:
+- use the `Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia` trait
+- add a public property `$images` that we can bind to upload to
+
+
+Here is an example component:
+
+```php
+namespace App\Http\Livewire;
+
+use App\Models\YourModel;
+use Livewire\Component;
+use Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia;
+
+class MyForm extends Component
+{
+ use WithMedia;
+
+ public $name;
+
+ public $message = '';
+
+ public $images;
+
+ public function submit()
+ {
+ $formSubmission = YourModel::create([
+ 'name' => $this->name,
+ ]);
+
+ $formSubmission
+ ->addFromMediaLibraryRequest($this->images)
+ ->toMediaCollection('images');
+
+ $this->message = 'Your form has been submitted';
+
+ $this->name = '';
+
+ $this->images = [];
+ }
+
+ public function render()
+ {
+ return view('livewire.my-form');
+ }
+}
+```
+
+### Validating multiple uploads
+
+You can pass any Laravel validation rule to the rules prop of the `livewire:media-library` component. Here's an example where only `jpeg` and `png` will be accepted.
+
+```html
+
+```
+
+You can make the upload required by validating it in your Livewire component. Here's an example where at least one upload is required, but more than three uploads are not allowed.
+
+```php
+// in the method that handles the form submission inside your Livewire component
+
+public function submit()
+{
+ $this->validate([
+ 'images' => 'required|max:3',
+ ]);
+
+ // process the form submission
+}
+```
+
+## Administer the contents of a media library collection
+
+You can manage the entire contents of a media library collection with `livewire:media-library` component. This
+component is intended for use in admin sections.
+
+Here is an example where we are going to administer an `images` collection of a `$blogPost` model. We assume that you
+already [prepared the model](/docs/laravel-medialibrary/v10/basic-usage/preparing-your-model) to handle uploads.
+
+```html
+
+```
+
+In your Livewire component you must:
+- use the `Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia` trait
+- add a public property `$images` that we can bind to upload to (you can use any name you want)
+
+
+Here is an example component:
+
+```php
+namespace App\Http\Livewire;
+
+use App\Models\BlogPost;
+use Livewire\Component;
+use Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia;
+
+class MyForm extends Component
+{
+ use WithMedia;
+
+ public $name;
+
+ public $message = '';
+
+ public $images;
+
+ public $images;
+
+ public function submit()
+ {
+ $formSubmission = BlogPost::create([
+ 'name' => $this->name,
+ ]);
+
+ $formSubmission
+ ->addFromMediaLibraryRequest($this->images)
+ ->toMediaCollection('images');
+
+ $this->message = 'Your form has been submitted';
+ }
+
+ public function render()
+ {
+ return view('livewire.my-form');
+ }
+}
+```
+
+### Validating the collection
+
+You can pass any Laravel validation rule to the rules prop of the `livewire:media-library` component. Here's an example where only `jpeg` and `png` will be accepted.
+
+```html
+
+```
+
+You can make the upload required by validating it in your Livewire component. Here's an example where at least one upload is required, but more than three uploads are not allowed.
+
+```php
+// in the method that handles the form submission inside your livewire component
+
+public function submit()
+{
+ $this->validate([
+ 'images' => 'required|max:3',
+ ]);
+
+ // process the form submission
+}
+```
+
+### Using custom properties
+
+Media library supports [custom properties](/docs/laravel-medialibrary/v10/advanced-usage/using-custom-properties) to be saved on a media item. By
+default, the `livewire:media-library` component doesn't show the custom properties. To add them you should create a
+blade view that will be used to display all form elements on a row in the component.
+
+In this example we're going to add a custom property form field called `extra_field`.
+
+```html
+@include('media-library::livewire.partials.collection.fields')
+
+
+```
+
+You should then pass the path to that view to the `fields-view` prop of the `livewire:media-library` component.
+
+```html
+
+```
+
+This is how that will look like.
+
+
+
+In your Livewire component, you can validate the custom properties like this. This example assumes that you have set the `name` attribute of `livewire:media-library` to `images`.
+
+```php
+// inside the method in your Livewire component that handles the form submission
+public function submit()
+{
+ $this->validate([
+ 'images.*.custom_properties.extra_field' => 'required',
+ ], ['required' => 'This field is required']);
+
+ // process the form submission
+}
+```
+
+## Uploading directly to S3
+
+Currently, Livewire does not support uploading multiple files to S3. That's why only the `attachment` component can be used to upload files to S3.
+
+To get started with uploading files to `s3`, make sure to follow Livewire's instructions on [how to upload directly to S3](https://livewire.laravel.com/docs/uploads#storing-uploaded-files).
+
+Next, make sure you have configured the media disk that uses the S3 driver.
+
+With that configuration in place, the `livewire:media-library` component will now upload directly to S3.
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
index 9e851d3fe..d0db6844b 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-react.md
@@ -1,6 +1,6 @@
---
title: Handling uploads with React
-weight: 6
+weight: 7
---
Media Library Pro provides beautiful UI components for React. They pack a lot of features: temporary uploads, custom property inputs, frontend validation, and robust error handling.
diff --git a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
index f468b823c..e09c6f5a1 100644
--- a/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
+++ b/docs/handling-uploads-with-media-library-pro/handling-uploads-with-vue.md
@@ -1,6 +1,6 @@
---
title: Handling uploads with Vue
-weight: 5
+weight: 6
---
Media Library Pro provides beautiful UI components for Vue 2 and Vue 3. They pack a lot of features: temporary uploads, custom property inputs, frontend validation, and robust error handling.
diff --git a/docs/handling-uploads-with-media-library-pro/installation.md b/docs/handling-uploads-with-media-library-pro/installation.md
index 31439ec34..f74e1f126 100644
--- a/docs/handling-uploads-with-media-library-pro/installation.md
+++ b/docs/handling-uploads-with-media-library-pro/installation.md
@@ -15,7 +15,7 @@ Single application licenses maybe installed in a single Laravel app. In case you
## Current version
-The current version of Media Library Pro is v2. We highly recommand to use at least v2.1.7 as previous versions contain a security issue.
+The current version of Media Library Pro is v3.
You will find upgrade instructions [here](/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/upgrading).
@@ -75,7 +75,7 @@ If you are using [Laravel Forge](https://forge.laravel.com), you don't need to c
With the configuration above in place, you'll be able to install the Media Library Pro into your project using this command:
```bash
-composer require "spatie/laravel-medialibrary-pro:^2.0.0"
+composer require "spatie/laravel-medialibrary-pro:^3.0.0"
```
## Prepare the database
diff --git a/docs/handling-uploads-with-media-library-pro/upgrading.md b/docs/handling-uploads-with-media-library-pro/upgrading.md
index 6d068f6b4..fb30f5b5d 100644
--- a/docs/handling-uploads-with-media-library-pro/upgrading.md
+++ b/docs/handling-uploads-with-media-library-pro/upgrading.md
@@ -7,6 +7,87 @@ weight: 10
This file contains instructions on how to upgrade to another major version of the package.
+## From v2 to v3
+
+The main change in v3 is that we now use Livewire 3.0 instead of Livewire 2.0. If you're using the JavaScript component, then there are no breaking changes.
+
+### Update the Livewire version requirement to v3:
+
+```
+- "livewire/livewire": "^2.0",
++ "livewire/livewire": "^v3.0",
+```
+
+### Add the Blade directives to your views
+
+```blade
+-
+-
+-
++ @mediaLibraryStyles
+
+
++ @mediaLibraryScripts
+```
+
+### Update usage of the `WithMedia` trait:
+
+```php
+- use Spatie\MediaLibraryPro\Http\Livewire\Concerns\WithMedia;
++ use Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia;
+```
+
+### `clearMedia` has been removed
+
+The `->clearMedia()` method has been removed from the trait. Since you can now use model binding you can set your collection back to an empty array if you need to clear your media.
+
+```php
+public function submit()
+{
+ // submit the form
+
+- $this->clearMedia();
++ $this->media = [];
+}
+```
+
+### Make sure you're setting your media properties to a default empty array
+
+```php
+- public $media;
++ public $media = [];
+```
+
+### The `$mediaComponentNames` property has been removed in favour of Livewire model binding.
+
+```php
+- public $mediaComponentNames = ['images', 'downloads'];
+
+public $images = [];
+
+public $downloads = [];
+```
+
+### Use the Livewire components directly instead of the Blade components
+
+We now have 1 Livewire component that can handle both Attachment and Collection use cases, use this Livewire component directly instead of using the provided Blade component.
+
+If you're not using Livewire yourself, you can still use the Blade components like before.
+
+#### Attachment
+
+```blade
+-
+ +
+```
+
+#### Collection
+
+```blade
+-
++
+```
+
## From v1 to v2
No changes to the public API were made. Support for PHP 7 and Laravel 8 was dropped.