##Getting a license
If you haven't already, you must buy a license on the Media Library Pro product page 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": "<YOUR-SPATIE.BE-ACCOUNT-EMAIL-ADDRESS-HERE>",
"password": "<YOUR-MEDIA-LIBRARY-PRO-LICENSE-KEY-HERE>"
}
}
}
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, 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
->withSchedule(function (Schedule $schedule) {
$schedule->command('media-library:delete-old-temporary-uploads')->daily();
})
##Laravel 10 or older
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.
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 </head>
tag in your layout file.
If you want to include the CSS in a different way, you can find more information here: Vite.
You should add the @mediaLibraryScripts
directive before the closing </body>
tag in your layout file.
##Setup Vite
If you are using Vite, your vite.config.js
look something like this:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
resolve: {
alias: {
'media-library-pro-vue3-attachment': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-attachment',
'media-library-pro-vue3-collection': '/vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-vue3-collection',
'vue': 'vue/dist/vue.esm-bundler.js',
}
},
plugins: [
laravel([
'resources/js/app.js',
]),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
##Importing the components
By default the components aren't available through npm, but are located in vendor/spatie/laravel-medialibrary-pro/resources/js
..
If you're developing a project where you don't have access to composer, you can download the package through GitHub Packages: installation steps
To use a component in your Blade templates, import the components you plan to use in your app.js
file, and add them to your main Vue app's components
object.
import { createApp } from "vue";
import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
createApp({
components: {
MediaLibraryAttachment,
MediaLibraryCollection,
},
}).mount("#app");
You can now use them in any .blade.php
file in your application.
<div id="app">
<form>
<media-library-attachment name="cover" />
<media-library-collection name="images" />
<button>Submit</button>
</form>
</div>
You may also choose to import the components on the fly in a .vue
file.
<template>
<form>
<media-library-attachment name="cover" />
<media-library-collection name="images" />
<button>Submit</button>
</form>
</template>
<script>
import { MediaLibraryAttachment } from "media-library-pro-vue3-attachment";
import { MediaLibraryCollection } from "media-library-pro-vue3-collection";
export default {
components: {
MediaLibraryAttachment,
MediaLibraryCollection,
},
};
</script>