Collection | laravel-medialibrary-pro | Spatie

 SPATIE

laravel-medialibrary-pro
========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-medialibrary-pro](https://spatie.be/docs/laravel-medialibrary-pro/v6)  Livewire  Collection

 Version   v6

 Other versions for crawler [v6](https://spatie.be/docs/laravel-medialibrary-pro/v6)

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary-pro/v6/introduction)
- [ Requirements ](https://spatie.be/docs/laravel-medialibrary-pro/v6/requirements)
- [ License ](https://spatie.be/docs/laravel-medialibrary-pro/v6/license)
- [ Getting help ](https://spatie.be/docs/laravel-medialibrary-pro/v6/getting-help)
- [ Upgrading ](https://spatie.be/docs/laravel-medialibrary-pro/v6/upgrading)
- [ About us ](https://spatie.be/docs/laravel-medialibrary-pro/v6/about-us)
- [ ](https://spatie.be/docs/laravel-medialibrary-pro/v6/demo-application)

Blade
-----

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/usage)

Livewire
--------

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/installation)
- [ Attachments ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/attachments)
- [ Collection ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/collection)
- [ Uploading to S3 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/uploading-to-s3)

React
-----

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/usage)
- [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/available-props)
- [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/inertia)
- [ Next.js ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/nextjs)
- [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/translations)
- [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/vapor)
- [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/creating-custom-components)

Vue.js
------

- [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/installation)
- [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/usage)
- [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/available-props)
- [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/inertia)
- [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/translations)
- [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/vapor)
- [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/creating-custom-components)

Security
--------

- [ Authorisation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/authorisation)
- [ Configure allowed mime types ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/allowed-mime-types)
- [ Rate limiting ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/rate-limiting)

Advanced
--------

- [ Customizing CSS ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customizing)
- [ Customize the preview images ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/custom-preview-images)
- [ Customize the upload URL ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customiz-upload-url)
- [ Usage in a frontend repository ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/usage-in-a-frontend-repository)

Legacy
------

- [ Livewire 2 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/livewire-2)
- [ Laravel Mix ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/laravel-mix)

 Collection
==========

###  On this page

1. [ Administer the contents of a media library collection ](#content-administer-the-contents-of-a-media-library-collection)

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/v11/basic-usage/preparing-your-model) to handle uploads.

```

    Submit

```

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)
- pass the Eloquent model that the collection is saved on to the component, in this case `$blogPost`

Here is an example component:

```
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 $blogPost;

    public function mount()
    {
        $this->blogPost = BlogPost::first();
    }

    public function submit()
    {
        $this->blogPost->update(['name' => $this->name]);

        $this->blogPost
            ->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.

```

```

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.

```
// 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/v11/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`.

```
@include('media-library::livewire.partials.collection.fields')

    Extra field
    livewireCustomPropertyAttributes('extra_field') }}
    />

    @error($mediaItem->customPropertyErrorName('extra_field'))

       {{ $message }}

    @enderror

```

You should then pass the path to that view to the `fields-view` prop of the `livewire:media-library` component.

```

```

This is how that will look like.

![Screenshot of custom property](/docs/laravel-medialibrary-pro/v6/images/extra.png)

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`.

```
// 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
}
```