Media Manager provides a simple way for users to upload and manage content to be used throughout your project.
- PHP >= 5.6
- Composer
- An existing Laravel 5.3 project
To get started, install Media Manager via the Composer package manager:
composer require talvbansal/media-manager
Next, register the Media Manager service provider in the providers array of your config/app.php configuration file:
\TalvBansal\MediaManager\Providers\MediaManagerServiceProvider::class,The Media Manager service provider does not automatically register routes for the Media Manager to work. This is so that you can add custom middleware around those routes. You can register all of the routes required for the Media Manager by adding the following to your routes/web.php file:
\TalvBansal\MediaManager\Http\Routes::mediaBrowser();After registering the Media Manager service provider, you should publish the Media Manager assets using the vendor:publish Artisan command:
php artisan vendor:publish --tag=media-manager --force
Media Manager assets are not published to the public folder as would be normally expected, instead they will be published to /resources/assets/talvbansal.
You can then bundle these with your existing scripts in your projects gulpfile.js, for example:
//gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-vue');
elixir(function(mix) {
// Add additional styles...
mix.sass([
'../talvbansal/media-manager/css/media-manager.css',
'app.scss'
]);
// Add dependencies and components...
mix.webpack([
'../talvbansal/media-manager/js/media-manager.js',
'app.js'
]);
// Copy SVG images into the public directory...
mix.copy( 'resources/assets/talvbansal/media-manager/fonts', 'public/fonts' );
});The media manager uses the public disk to store its uploads. The storage path for the public disk by default is storage/app/public. To make these files accessible from the web, use the following storage:link artisan command to generate a symbolic link to public/storage:
php artisan storage:link
Read more about the public disk on the Laravel documentation.
The Media Manager is written in vue.js and comes bundled with all the dependencies required to get going very quickly.
After you've added the dependencies to your layout if your project doesn't already use vue.js you'll need to create a Vue instance on the page that you want to use the Media Manager on:
<script>
new Vue({
el : 'body'
});
</script>This tells Vue to use the body element of your page as its container. Of course you can change this to target a specific element but using body means that we can put our custom components anywhere within the body tags on a page.
You will also need to add the following to your layout if it doesn't already exist.
It provides the csrfToken used for the vue-resource http requests that the Media Manager will make.
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>The Media Manager package will register 2 new usable vue.js components:
<media-manager><media-modal>
The <media-manager> component is the core component that provides all of the Media Manager functionality and <media-modal> is a component used to build the internal modal windows of the Media Manager.
The <media-modal> component can also be used to open the Media Manager itself inside a modal window.
If you just need an instance of the Media Manager getting started is easy.
Just create a <media-manager> tag within the scope of your Vue instance:
<body>
<media-manager></media-manager>
</body>This will create a Media Manager that will allow you to do all of the following:
- Navigate directories
- Upload new files
- Create new folders
- Rename items
- Move items
- Delete items
Setting up a Media Manager within a modal window requires a bit more markup and configuration.
You'll need to do the following:
- Create a
<media-manager>component nested within a<media-modal>component. - Add the
:is-modal="true"property to the Media Manager component :<media-manager :is-modal="true"> - We'll need a way to open and close the modal window.
- Create a boolean property on your root vue instance to hold the visible state of the modal window.
- Add the property to the Media Manager's and Modal Window's
showproperty. - Make sure they're both set to
show.syncso that changes to its value can be made allowing the window can close itself - Create a button to open the modal window and get it change the property bound to the modal window's
showproperty totrue
Here is an example of all of the above:
<body>
<media-modal :show.sync="showMediaManager">
<media-manager
:show.sync="showMediaManager"
:is-modal="true"
>
</media-manager>
</media-modal>
<button @click="showMediaManager = true">
Show Media Manager
</button>
<script>
new Vue({
el: body,
data: {
showMediaManager: false,
}
});
</script>
</body>As well as providing all of the functionality that the normal <media-manager> component gives, when in a modal window buttons to close the window and select files are rendered.
So that you can make use of your existing notification system the Media Manager dispatched events that you can listen to using Vue's events listeners. The event dispatched for notifications is called media-manager-notification.
When a media-manager-notification is dispatched it sends the following information (message, type, time).
<script>
new Vue({
el: body,
data:{
//...
},
events:{
'media-manager-notification': function (message, type, time) {
// Your custom notifiction call here...
console.log(message);
}
}
});
</script>When opening the Media Manager up via a modal window a new select event type can be triggered.
Like notifications select will mean different things depending on the use of the application, there may even be a number of different uses cases for the Media Manager within an application.
To handle instances where different things may need to happen when a select event i triggered the Media Manager lets you define a custom event name to be dispatched using the selected-event-name property:
<media-modal :show.sync="showMediaManager">
<media-manager
:is-modal="true"
:selected-event-name.sync="selectedEventName"
:show.sync="showMediaManager"
>
</media-manager>
</media-modal>When select is called a custom event is dispatched that you can listen to using Vue's events listeners.
The name event dispatched is dynamically generated by the selected-event-name property's value prefixed with media-manager-selected-
For example if the selected-event-name property was set to editor the event dispatched would be media-manager-selected-editor and we could handle the event as follows:
<script>
new Vue({
el : 'body',
data:{
showMediaManager: false,
selectedEventName: 'editor'
},
events: {
'media-manager-selected-editor': function (file) {
// Do something with the file info...
console.log(file.name);
console.log(file.mimeType);
console.log(file.relativePath);
console.log(file.webPath);
// Hide the Media Manager...
this.showMediaManager = false;
}
}
})
</script>The prefix on the event names is to avoid / reduce any potential event names clashes.