Upgrading | laravel-medialibrary | Spatie

 SPATIE

  Laravel Media Library
========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v10)  Handling-uploads-with-media-library-pro  Upgrading

 Version   v11   v10   v9   v8   v7   v6   v5   v4   v3

 Other versions for crawler [v11](https://spatie.be/docs/laravel-medialibrary/v11) [v10](https://spatie.be/docs/laravel-medialibrary/v10) [v9](https://spatie.be/docs/laravel-medialibrary/v9) [v8](https://spatie.be/docs/laravel-medialibrary/v8) [v7](https://spatie.be/docs/laravel-medialibrary/v7) [v6](https://spatie.be/docs/laravel-medialibrary/v6) [v5](https://spatie.be/docs/laravel-medialibrary/v5) [v4](https://spatie.be/docs/laravel-medialibrary/v4) [v3](https://spatie.be/docs/laravel-medialibrary/v3)

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v10/introduction)
- [ Support us ](https://spatie.be/docs/laravel-medialibrary/v10/support-us)
- [ Base installation ](https://spatie.be/docs/laravel-medialibrary/v10/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-medialibrary/v10/questions-issues)
- [ Requirements ](https://spatie.be/docs/laravel-medialibrary/v10/requirements)
- [ Upgrading ](https://spatie.be/docs/laravel-medialibrary/v10/upgrading)
- [ Changelog ](https://spatie.be/docs/laravel-medialibrary/v10/changelog)
- [ Troubleshooting ](https://spatie.be/docs/laravel-medialibrary/v10/troubleshooting)
- [ About us ](https://spatie.be/docs/laravel-medialibrary/v10/about-us)

Basic usage
-----------

- [ Preparing your model ](https://spatie.be/docs/laravel-medialibrary/v10/basic-usage/preparing-your-model)
- [ Associating files ](https://spatie.be/docs/laravel-medialibrary/v10/basic-usage/associating-files)
- [ Retrieving media ](https://spatie.be/docs/laravel-medialibrary/v10/basic-usage/retrieving-media)

Working with media collections
------------------------------

- [ Simple media collections ](https://spatie.be/docs/laravel-medialibrary/v10/working-with-media-collections/simple-media-collections)
- [ Defining media collections ](https://spatie.be/docs/laravel-medialibrary/v10/working-with-media-collections/defining-media-collections)

Converting images
-----------------

- [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/defining-conversions)
- [ Retrieving converted images ](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/retrieving-converted-images)
- [ Optimizing converted images ](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/optimizing-converted-images)
- [ Regenerating images ](https://spatie.be/docs/laravel-medialibrary/v10/converting-images/regenerating-images)

Handling uploads with Media Library Pro
---------------------------------------

- [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/introduction)
- [ Installation ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/installation)
- [ Processing uploads on the server ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/processing-uploads-on-the-server)
- [ Handling uploads with Livewire 2 ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-2)
- [ Handling uploads with Livewire 3 ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/handling-uploads-with-livewire-3)
- [ Handling uploads with Vue ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/handling-uploads-with-vue)
- [ Creating custom Vue components ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/creating-custom-vue-components)
- [ Handling uploads with React ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/handling-uploads-with-react)
- [ Creating custom React components ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/creating-custom-react-components)
- [ Customizing CSS ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/customizing-css)
- [ Upgrading ](https://spatie.be/docs/laravel-medialibrary/v10/handling-uploads-with-media-library-pro/upgrading)

Responsive images
-----------------

- [ Getting started with responsive images ](https://spatie.be/docs/laravel-medialibrary/v10/responsive-images/getting-started-with-responsive-images)
- [ Using your own width calculator ](https://spatie.be/docs/laravel-medialibrary/v10/responsive-images/using-your-own-width-calculator)
- [ Customizing the rendered HTML ](https://spatie.be/docs/laravel-medialibrary/v10/responsive-images/customizing-the-rendered-html)
- [ Generating your own tiny placeholder ](https://spatie.be/docs/laravel-medialibrary/v10/responsive-images/generating-your-own-tiny-placeholder)
- [ Responsive images demo ](https://spatie.be/docs/laravel-medialibrary/v10/responsive-images/demo)

Converting other file types
---------------------------

- [ Using image generators ](https://spatie.be/docs/laravel-medialibrary/v10/converting-other-file-types/using-image-generators)
- [ Creating a custom image generator ](https://spatie.be/docs/laravel-medialibrary/v10/converting-other-file-types/creating-a-custom-image-generator)

Downloading media
-----------------

- [ Downloading a single file ](https://spatie.be/docs/laravel-medialibrary/v10/downloading-media/downloading-a-single-file)
- [ Downloading multiple files ](https://spatie.be/docs/laravel-medialibrary/v10/downloading-media/downloading-multiple-files)

Advanced usage
--------------

- [ Working with multiple filesystems ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/working-with-multiple-filesystems)
- [ Using custom properties ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/using-custom-properties)
- [ Storing media specific manipulations ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/storing-media-specific-manipulations)
- [ Using your own model ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/using-your-own-model)
- [ Outputting media ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/outputting-media)
- [ Rendering media ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/rendering-media)
- [ Using a custom directory structure ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/using-a-custom-directory-structure)
- [ Using a custom file removal strategy ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/using-a-custom-file-removal-strategy)
- [ Ordering media ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/ordering-media)
- [ Using a custom media downloader ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/using-a-custom-media-downloader)
- [ Moving media ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/moving-media)
- [ Consuming events ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/consuming-events)
- [ Attaching media in mails ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/attaching-media-in-mails)
- [ Generating custom URLs ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/generating-custom-urls)
- [ Overriding default filesystem behavior ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/overriding-the-default-filesystem-behaviour)
- [ Naming generated files ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/naming-files)
- [ Disable CDN ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/disable-cdn)
- [ Customising Database Connections ](https://spatie.be/docs/laravel-medialibrary/v10/advanced-usage/customising-database-connections)

API
---

- [ Adding files ](https://spatie.be/docs/laravel-medialibrary/v10/api/adding-files)
- [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v10/api/defining-conversions)

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/laravel-medialibrary                                                                                                                                                                                                                                    `

Upgrading
=========

###  On this page

1. [ Upgrading ](#content-upgrading)
2. [ From v2 to v3 ](#content-from-v2-to-v3)
3. [ From v1 to v2 ](#content-from-v1-to-v2)

Upgrading
-----------------------------------------------------------------------------------

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

```
-
-
-
+ @mediaLibraryStyles

+ @mediaLibraryScripts
```

### Update usage of the `WithMedia` trait:

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

```
public function submit()
{
    // submit the form

-    $this->clearMedia();
+    $this->media = [];
}
```

### Make sure you're setting your media properties to a default empty array

```
-    public $media;
+    public $media = [];
```

### The `$mediaComponentNames` property has been removed in favour of Livewire model binding.

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

```
-
 +
```

#### Collection

```
-
+
```

From v1 to v2
-----------------------------------------------------------------------------------------------

No changes to the public API were made. Support for PHP 7 and Laravel 8 was dropped.

You should be able to upgrade without making any changes.