Use The Manager From A Modal

Update

to make things easier, a mixin was added so you can instantly get the modal up & ready inside any component.

Update 2

starting from v2.5.7 you can now use the manager to select your gallery directory "for example having an article with a slideshow"

• migration

$table->string('gallery')->nullable(); // or anything you want

• controller

$art     = Article::find($id);
$disk    = app('filesystem')->disk(config('mediaManager.storage_disk'));
$gallery = collect($disk->files($art->gallery))
           ->map(function ($item) use ($disk) {
                return $disk->url($item);
           })->toArray();

return view('articles.show', compact('art', 'gallery'));

• view

@foreach ($gallery as $img)
    <img src="{{ $img }}">
@endforeach

starting from v2 you will be able to use the manager from within a modal, this enables much more flexibility & transform the package into a true media manager for all of your website content.

and here's a small example on how easy to get it to work.

• create a vue component to wrap the manager ex.ExampleComp.vue

<script>
import MediaModal from './path/to/vendor/MediaManager/js/mixins/modal'

export default {
    name: 'example-comp',
    mixins: [MediaModal],
    render() {}
}
</script>

• register the component

Vue.component('ExampleComp', require('./path/to/ExampleComp.vue'))

• the view

<example-comp inline-template>
    <div>
        {{-- toggle modal --}}
        <button @click="toggleModal()">open media manager</button>

        {{-- manager --}}
        @include('MediaManager::extras._modal')

        {{-- form --}}
        <form action="..." method="...">
            {{-- for files --}}
            <img :src="selectedFile">
            <input type="hidden" name="cover" :value="selectedFile"/>

            {{-- for folders --}}
            <input type="hidden" name="gallery" :value="selectedFolder"/>

            ...
        </form>
    </div
</example-comp>

now we have a couple of info you need to know about

• 1st: each time you select a file inside the manager, an event will fire with the full path of that file, so now we can catch it inside our component and display a preview like above.

• 2nd: inside MediaManager::extras._modal we need to use v-if="showModal" to prevent the manager shortcuts leaking into the parent view of the modal, otherwise using any of the shortcuts will trigger its event inside the modal even if it's not visible.

• 3rd: we are loading the full manager, which means that all of its "events, shortcuts, functionality" is accessible, so the experience remains the same whether you use the manager in stand-alone or modal.

also in case you have an old image "for example when editing an article and you want to show the old image", you can pass it like

<example-comp inline-template old="{{ $article->cover }}">
   ...
</example-comp>

// or using the old input value https://laravel.com/docs/5.5/requests#old-input
<example-comp inline-template old="{{ old('cover') }}">
   ...
</example-comp>

---

Because we are now using the manager as a partial instead of full page, it means you can limit any of the manager options through passing an array of options, ex.

@include('MediaManager::_manager', ['no_bulk'=>true])
// or
@include('MediaManager::extras._modal', ['no_bulk'=>true])

// and inside the partial use it like
@if (!isset($no_bulk))
    ...
@endif

• and now if the $no_bulk is available, that condition will fire & if not, no changes will be made.
• also note that when passing arguments through the _modal partial, it will automatically be passed to _manager so the usage remains the same.