Installation | 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 Installation 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) Installation ============ ### On this page 1. [ Getting a license ](#content-getting-a-license) 2. [ Installing the base package ](#content-installing-the-base-package) 3. [ Requiring Media Library Pro ](#content-requiring-media-library-pro) 4. [ Prepare the database ](#content-prepare-the-database) 5. [ Automatically removing temporary uploads ](#content-automatically-removing-temporary-uploads) 6. [ Add the route macro ](#content-add-the-route-macro) 7. [ Front-end setup ](#content-front-end-setup) 8. [ Picking the right component ](#content-picking-the-right-component) Getting a license ----------------------------------------------------------------------------------------------------------- If you haven't already, you must buy a license on [the Media Library Pro product page](https://spatie.be/products/media-library-pro) at spatie.be Installing the base package ----------------------------------------------------------------------------------------------------------------------------------------- If you haven't installed the base Media Library package, make sure to do so by running: ``` composer require "spatie/laravel-medialibrary:^11.0.0" ``` Requiring Media Library Pro ----------------------------------------------------------------------------------------------------------------------------------------- After you've purchased a license, add the `satis.spatie.be` repository in your `composer.json`. ``` "repositories": [ { "type": "composer", "url": "https://satis.spatie.be" } ], ``` Next, you need to create a file called `auth.json` and place it either next to the `composer.json` file in your project, or in the Composer home directory. You can determine the Composer home directory on \*nix machines by using this command. ``` composer config --list --global | grep home ``` This is the content you should put in `auth.json`: ``` { "http-basic": { "satis.spatie.be": { "username": "", "password": "" } } } ``` To be sure you can reach `satis.spatie.be`, clean your autoloaders before using this command: ``` composer dump-autoload ``` To validate if Composer can read your auth.json you can run this command: ``` composer config --list --global | grep satis.spatie.be ``` If you are using [Laravel Forge](https://forge.laravel.com), you don't need to create the `auth.json` file manually. Instead, you can set the credentials on the Composer Package Authentication screen of your server. Fill out the fields with these values: - Repository URL: `satis.spatie.be` - Username: Fill this field with your spatie.be account email address - Password: Fill this field with your Media Library Pro license key ![screenshot](/docs/laravel-medialibrary-pro/v6/images/forge.png) With the configuration above in place, you'll be able to install the Media Library Pro into your project using this command: ``` composer require "spatie/laravel-medialibrary-pro:^6.0.0" ``` Prepare the database -------------------------------------------------------------------------------------------------------------------- Media Library Pro tracks all temporary uploads in a table called `temporary_uploads`. To create the table you need to publish and run the migration: ``` php artisan vendor:publish --provider="Spatie\MediaLibraryPro\MediaLibraryProServiceProvider" --tag="media-library-pro-migrations" php artisan migrate ``` Automatically removing temporary uploads -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- If you are using Media Library Pro, you must schedule this artisan command in `app/Console/Kernel` to automatically delete temporary uploads ### Laravel 11 or higher ``` // in bootstrap/app.php ->withSchedule(function (Schedule $schedule) { $schedule->command('media-library:delete-old-temporary-uploads')->daily(); }) ``` ### Laravel 10 or older ``` // in app/Console/Kernel.php protected function schedule(Schedule $schedule) { $schedule->command('media-library:delete-old-temporary-uploads')->daily(); } ``` Add the route macro ----------------------------------------------------------------------------------------------------------------- To accept temporary uploads via React and Vue, you must add this macro to your routes file. You do not need to register this endpoint when using the Blade/Livewire components. ``` // Probably routes/web.php Route::mediaLibrary(); ``` This macro will add the routes to controllers that accept file uploads for all components. Front-end setup ----------------------------------------------------------------------------------------------------- The easiest way to add the CSS and Javascript needed for the Media Library Pro components is to use the Blade directives `@mediaLibraryStyles` and `@mediaLibraryScripts`. You should add the `@mediaLibraryStyles` directive before the closing `` tag in your layout file. If you want to include the CSS in a different way, you can find more information here: [Vite](/docs/laravel-medialibrary-pro/v6/styling/importing-css). You should add the `@mediaLibraryScripts` directive before the closing `` tag in your layout file. Picking the right component ----------------------------------------------------------------------------------------------------------------------------------------- Next you need to decide which components suits your needs most. We have two components available: ### Attachments This is the simplest component. It allows you to upload one or more files. [Read about how to use the attachment component.](/docs/laravel-medialibrary-pro/v6/livewire/attachments) ### Collections This component is more advanced. It allows you to upload multiple files with custom properties and functionality like sorting. The files uploaded in this component are attached to a model. This component is perfect for managing media in admin panels. [Read about how to use the collection component.](/docs/laravel-medialibrary-pro/v6/livewire/collection)