Skip to content

gema/laravel-file-manager

Folders and files

NameName
Last commit message
Last commit date
Jul 18, 2022
Oct 6, 2022
Aug 26, 2021
Aug 11, 2021
Aug 11, 2021
Mar 9, 2022
Mar 9, 2022
Aug 11, 2021
Aug 11, 2021
Aug 11, 2021
Jul 18, 2022
Apr 4, 2022
Aug 11, 2021
Oct 1, 2021
Apr 6, 2022
Apr 6, 2022

Repository files navigation

FileManager

Latest Version on Packagist Total Downloads Build Status

This is where your description should go. Take a look at contributing.md to see a to do list.

Installation

Via Composer

composer require gemadigital/file-manager

Usage

Running migrations

php artisan migrate

Publishing the config

php artisan vendor:publish --provider="GemaDigital\FileManager\FileManagerServiceProvider"

Sample config file

<?php

use App\Models\Project;

return [
    'parents' => [
        Project::class, // Parent classes namespaces (multiple parents supported)
    ],
    
    // Parent field should appear or should be infer
    // You may use a closure to define the access to this
    'parents_field' => (function () {
        // return user()->hasManyProjects();
        return true;
    }),
    
    // Use to filter the parents list
    // You may use a closure to define the access to this
    'parents_filter' => (function ($query){
        if(!admin()) {
            return $query->whereIn('id', user()->parentsIds());
        }
        return $query;
    }),
    
    'filter' => (function($query){
        /**
        * Function used in medias fetch operation.
        * Use to apply filters, ordering, etc to the file-manager medias listing
        */
        if(!admin()){
            return $query
                ->whereIn('parent_id', backpack_user()->projects())
                ->where('parent_type', Project::class);
        }

        return $query;
    })
    
    // Menu
    // You may use a closure to define the access on CRUD
    'access' => [
        'file-manager' => true,
        'media-tag' => true,
        'media-type' => true,
        'media-version' => true,
    ],

    // Use media cloud or use Laravel Storage
    // Set as false to use media cloud, set a diskname to use Laravel Storage
    'disk' => false,
];

Adding File-Manager to the sidebar menu

sidebar_content.blade.php

@include('file-manager::sidebar_content')

Using File-Manager as a field (associated to an entity)

MyEntity.php

<?php

use GemaDigital\FileManager\app\Models\Traits\MediaTrait;
use GemaDigital\Framework\app\Models\Model;

class MyEntity extends Model {
  use MediaTrait; // Use the trait

  protected static $mediable = ['images', 'videos']; // Define which columns will have medias
}

MyEntityCrudController.php

<?php

class MyEntityCrudController extends CrudController {
  public function setupCreateOperation(){
  
    // Setting up the fields
    
    $this->crud->addField([
        'name' => 'images',
        'type' => 'file-manager',
        'view_namespace' => 'file-manager::field',
        'media_type' => 1 // Get this from `media_types.id`
    ]);

    $this->crud->addField([
        'name' => 'videos',
        'type' => 'file-manager',
        'view_namespace' => 'file-manager::field',
        'media_type' => 2 // Get this from `media_types.id`
    ]);
  }
}

Using File-Manager as a Vuejs Component

Install dependencies for Vue.js

File-manager uses select2, but this cannot be installed on the fly, so you will need to do it manually, the easiest way is to include their CDN in your HTML:

index.html

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

MyComponent.vue

<template>
<div>
<FileManager 
  name="fieldName"
  mediaType="1"
  min="1"
  max="1"
  triggerClasses="btn btn-primary"
  @save="onSave"
>
  <!-- Trigger Template (sample) -->
  <template v-slot:trigger>
    My trigger
  </template>

  <!-- Selected Media Template (sample) -->
  <template v-slot:selectedMedia="slot">
    <!-- slot property holds all the data from the media -->
    <img class="w-100" :src="slot.media.media_content.preview"/>
  </template>
</FileManager>
</div>
</template>

<script>
// Import FileManager component
import FileManager from "../../../../vendor/gemadigital/file-manager/src/resources/js/vue/FileManager.vue";

export default {
  components:{
    FileManager,
  },
  methods: {
    // Define what happens when medias are selected
    onSave(selectedMedias){
      console.log('Do something with' , {selectedMedias});
    }
  },
};
</script>

Change log

Please see the changelog for more information on what has changed recently.

Testing

composer test

Contributing

Please see contributing.md for details and a todolist.

Security

If you discover any security related issues, please email author@email.com instead of using the issue tracker.

License

MIT. Please see the license file for more information.