Clone talvbansal/media-manager

Laravel 5.1 support added

Media Manager

Media manager is a basic file uploader and manager component for Laravel written in Vue.js 2.0

# Introduction

Media Manager provides a simple way for users to upload and manage content to be used throughout your project.

# Requirements

• PHP >= 5.6
• Composer
• An existing Laravel 5.1 project

# Installation

To get started, install Media Manager via the Composer package manager:

Add to composer.json file:

//composer.json
{
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/roae/media-manager.git"
        }
    ]
}

Next, add to require object the roae/[email protected].* dependency

    "roae/media-manager": "2.0.*",

Next, install it using the command:

composer update

After composer downloads and installs the package, registers the Media Manager Services Provider in the providers configuration and your app/config.php configuration file:

\Roae\MediaManager\Providers\MediaManagerServiceProvider::class,

After registering the Media Manager service provider, you should publish the Media Manager assets using the vendor:publish Artisan command:

# PUBLISH ASSETS
php artisan vendor:publish --tag=media-manager-assets --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. Since the Media Manger is written in vue.js 2.0 you'll need to use webpack or another bundler to get the code ready for the browser. You can then bundle these with your existing scripts in your projects gulpfile.js.

//gulpfile.js
var elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(function(mix) {

    // Add additional styles...
    mix.sass([
        '../roae/media-manager/css/media-manager.css',
        'app.scss'
    ]);
   
    // Combine the various JS into one.
      mix.scripts([
        'app.js',
        '../../resources/assets/roae/media-manager/js/media-manager.js',
      ], null, 'public/js');

    // Add dependencies and components...
    mix.webpack(['../../../public/js/all.js']);

    // Copy SVG images into the public directory...
      mix.copy( 'resources/assets/roae/media-manager/fonts', 'public/fonts' );
});

laravel-elixir-vue-2 needs Laravel elixir 6.0 and webpack to bundle the Vue Media Manager component, for this reason, you have to update and add the following dependencies to your package.json file and run the npm install command:

{
 "devDependencies": {
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "bootstrap-sass": "^3.3.7"
  },
  "dependencies": {
    "laravel-elixir": "^6.0.0-9"
  }
 }

After, bundle de assets files runnig the gulp default or gulp --productioncommand

After publish the assets files, you need to publish routes for the package using the artisan command vendor:publish:

# PUBLISH ROUTES
php artisan vendor:publish --tag=media-manager-routes --force

This command will create the app/Http/media-manager-routes.php file, then you must be include this file on your routes.php file or create your own Media Manager routes.

require app_path('Http/media-manager-routes.php');

Next, add the public disk on config/filesystems.php file

'disk' => [
    //....
    'public' => [
        'driver' => 'local',
        'root'   => storage_path('app/public'),
    ],
]

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, add the following route to your app/Http/routes.php file:

Route::get('storage/{path}',function($path){
    $disk = Storage::disk('public');
    if($disk->has($path)){
        $file = $disk->get($path);
        $mime_type = $disk->mimeType($path);
        return Response::make($file, 200, ['Content-Type' => $mime_type]);
    }
})->where('path', '.+');

This could work using .htaccess file and mod_rewrite activated on apache.

# Getting starter

The Media Manager is written in vue.js 2.0 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 2.0 you'll need to create a Vue instance on the page that you want to use the Media Manager on:

<script>
    new Vue({
        el : '#app'
    });
</script>

This tells Vue to use an element with the id of app on your page as its container - a specific area in which vue.js will interact. Vue will not interact with anything outside of this element.

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 = {!! json_encode([
      'csrfToken' => csrf_token(),
    ]) !!}
</script>

# Media Manager Components

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.

# Stand Alone Media Manager

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>
    <div id="app">
        <media-manager></media-manager>
    </div>
</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

Modal Window Media Manager

Setting up a Media Manager within a modal window requires a bit more markup and configuration.

You'll need to do the following:

1. Create a <media-manager> component nested within a <media-modal> component.
2. Add the :is-modal="true" property to the Media Manager component : <media-manager :is-modal="true">
3. Create a way to open and close the modal window.
   • Within the data object of your root Vue instance create a boolean property to hold the visible state of the modal window with a default value of false, showMediaManager = false.
   • Add a v-if directive to the <media-modal> component and use the newly created showMediaManager property to toggle the modal window's visibility, <media-modal v-if="showMediaManager"></media-modal>.
   • Create a button to open the modal window and get it change the property bound to the modal window's show property to true
   • Add listeners for the @close event to the <media-modal> and <media-manager> components so that they can close the modal window

Here is an example of all of the above:

<body>
    <div id="app">
        <media-modal v-if="showMediaManager" @close="showMediaManager = false">
            <media-manager
                :is-modal="true"
                @close="showMediaManager = false"
            >
            </media-manager>
        </media-modal>
    
        <button @click="showMediaManager = true">
            Show Media Manager
        </button>
    </div>

    <script>
        new Vue({
        el: '#app',
            data: {
                showMediaManager: false,
            }
        });
    </script>
</body>

As well as providing all of the functionality that the normal <media-manager> component gives, when displayed within a modal window, buttons to close the window and select files are rendered.

# Notification Events

So that you can make use of your projects existing notification system the Media Manager emits events than can be listened on using a separate Vue instance that is automatically created and added to the window with a name of eventHub (if window.eventHub doesn't already exist). The event emitted for notifications is called media-manager-notification and has the following signature : (message, type, time).

- message: string
- type : string
- time : int

A listener can be added to either the created() method of your root vue instance or a component:

<script>
    new Vue({
        el: '#app',
        data:{
            //...
        },
        created: function(){
            window.eventHub.$on('media-manager-notification', function (message, type, time) {
                // Your custom notifiction call here...
                console.log(message);
            });
        }
    });
</script>

# Selected Item Events

When selecting an item through a Media Manager instance that has been opened within a modal window a new select event type is emitted. 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 is triggered the Media Manager lets you define a custom event name to be emitted using the selected-event-name property:

<media-modal v-if="showMediaManager" @close="showMediaManager = false">
    <media-manager
        :is-modal="true"
        :selected-event-name="selectedEventName"
        @close="showMediaManager = false"
    >
    </media-manager>
</media-modal>

When select is called a custom event is dispatched that can be listened for using Vue's events listeners. The event name 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 using the window.eventHub as follows:

<script>
    new Vue({
        el : 'body',
        data:{
            showMediaManager: false,
            selectedEventName: 'editor'
        },

        created: function(){
            window.eventHub.$on('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 on the event hub.