Use The Manager From A Modal

v2.5.8

things has slightly changed so instead of loading a separate copy of the manager for each input, we now load it once, example updated to reflect the new changes.

v3.6.6

the media-modal component can now take a restrict prop same as Restrict Access To Path "issues/139" ex.

<media-modal :restrict="{
   'path': 'users/admin/pdfs', 
   'uploadTypes': ['image/*', 'application/pdf'],
   'uploadSize': 5
}" etc..></media-modal>

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.

so to get it to work...

• create a new vue component to wrap both the manager & form ex.ExampleComp.vue

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

export default {
    name: 'example-comp',
    mixins: [MediaModal],

    // the inputs we want to use the manager for
    // in our case they are the article 'cover' & 'gallery'
    // for multi-selected files 'links' "issues/40"
    // 
    // for usage with an editor "wysiwyg" only, you dont need this part 
    data() {
        return {
            cover: '',
            gallery: '',
            links: ''
        }
    }
}
</script>

• register the component

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

• in your view
  • inputName is reserved for the manager "dont change it"

<example-comp inline-template>
    <div>
        {{-- manager --}}
        <div v-if="inputName">@include('MediaManager::extras.modal')</div>

        {{-- items selector --}}
        <media-modal item="cover" :name="inputName"></media-modal>
        <media-modal item="gallery" :name="inputName" type="folder"></media-modal>
        <media-modal item="links" :name="inputName" :multi="true"></media-modal>

        {{-- for editor --}}
        @include('MediaManager::extras.editor')

        {{-- form --}}
        <form action="..." method="...">
            {{-- cover --}}
            <section>
                <img :src="cover">
                <input type="hidden" name="cover" :value="cover"/>
                <button @click="toggleModalFor('cover')">select cover</button>
            </section>

            {{-- gallery --}}
            <section>
                <input type="text" name="gallery" :value="gallery"/>
                <button @click="toggleModalFor('gallery')">select gallery folder</button>
            </section>

            {{-- links --}}
            <section>
                <input v-for="item in links"
                    :key="item"
                    :value="item"
                    type="text" 
                    name="links[]"/>

                <button @click="toggleModalFor('links')">select gallery links</button>
            </section>

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

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

<media-modal old="{{ old('cover', $article->cover) }}" item="cover" etc..></media-modal>

Gallery Example

• migration

$table->string('gallery')->nullable();

• controller

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

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

• view

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

---

Because we are now using the manager as a partial instead of full page, it means you can limit any of the manager functionality 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

• note that passing any arguments through the modal partial will automatically be passed to _manager, so the usage remains the same.