Attachments | 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  Attachments

 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)

 Attachments
===========

###  On this page

1. [ Handling a single upload ](#content-handling-a-single-upload)
2. [ Handling multiple uploads ](#content-handling-multiple-uploads)

Handling a single upload
--------------------------------------------------------------------------------------------------------------------------------

You can use `livewire:media-library` component to upload a single file.

![Screenshot of the attachment component](/docs/laravel-medialibrary-pro/v6/images/attachment.png)

Here's how that might look like in the view of your Livewire component:

```

    Submit

```

In your Livewire component you must:

- use the `Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia` trait
- add a public property that defaults to an empty array 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:

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

```

```

You can make the upload required by validating it in your Livewire component:

```
// 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 `multiple` property

```

    Submit

```

![Screenshot of the attachment component](/docs/laravel-medialibrary-pro/v6/images/multiple.png)

In your Livewire component you must:

- use the `Spatie\MediaLibraryPro\Livewire\Concerns\WithMedia` trait
- add a public property `$images` that we can bind the uploads to

Here is an example component:

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

```

```

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