DOCSEARCHbyAlgolia
Submit Docs

Livewire Filemanager Documentation

repository·master·Indexed 18 days ago

https://github.com/livewire-filemanager/filemanager

A Laravel-based file management solution powered by Livewire and Spatie MediaLibrary. It features a drag-and-drop interface with search, dark mode, and a REST API for programmatic file and folder management. Includes support for Access Control Lists (ACL), Tailwind CSS integration, and a dedicated FileController for serving public URLs.

Tokens
8.9K
Snippets
32
Records
49
Agent score
62%

What's inside Livewire Filemanager

  1. How Access Control (ACL) works

    master

    When acl_enabled is set to true in the configuration, the filemanager implements data isolation for multi-user environments:

    • Scoping: Files and folders are scoped to the user who created them.
    • Visibility: Users can only see and manage their own files.
    • Automation: The user_id field in the folders table is automatically populated.
    • Isolation: Global scopes are used to ensure users cannot access data belonging to others.

  2. Customize Filemanager Views and Styles

    master

    Custom Views

    To override the default Blade templates, publish them to your resources directory:

    php artisan vendor:publish --tag=livewire-filemanager-views

    Modified views will be located in resources/views/vendor/livewire-filemanager/.

    Custom Styling

    You can customize the appearance using CSS variables or Tailwind classes:

    Using CSS Variables:

    :root {
    --filemanager-primary: #3B82F6;
    --filemanager-secondary: #6B7280;
}

    Overriding Tailwind Classes:

    .livewire-filemanager-container {
    @apply bg-gray-50 dark:bg-gray-900;
}

  3. Migrate from v0.x to v1.0.0

    master

    Version 1.0.0 introduces a breaking change to unify naming. The package name changes from livewire-fileuploader to livewire-filemanager across all assets, configuration files, and publishing tags.

    Automatic Migration (Recommended)

    Run the following command to automatically rename the config file and move published views and translations to the new directory structure:

    php artisan filemanager:migrate-config

    Manual Migration

    If you prefer to migrate manually, perform these steps:

    1. Rename Config: mv config/livewire-fileuploader.php config/livewire-filemanager.php
    2. Move Views: mv resources/views/vendor/livewire-fileuploader resources/views/vendor/livewire-filemanager
    3. Move Translations: mv resources/lang/vendor/livewire-fileuploader resources/lang/vendor/livewire-filemanager
    4. Update Publishing Tags: Update any scripts using livewire-fileuploader-* tags to use livewire-filemanager-* instead.

  4. Implement the Filemanager UI Component

    master

    To display the file manager in your application, use the <x-livewire-filemanager /> component. You must also include the package's styles and scripts in your layout.

    Note: The @filemanagerStyles directive includes the Tailwind Play CDN, which is not recommended for production. For production, use the Tailwind configuration steps mentioned in the configuration guide.

    <!DOCTYPE html>
<html lang="en">
<head>
    @filemanagerStyles
</head>

<body>
    <x-livewire-filemanager />

    @filemanagerScripts
</body>
</html>

  5. Configure TailwindCSS for Livewire Filemanager

    master

    The package uses TailwindCSS and AlpineJS. To ensure styles are correctly compiled in your production build, you must add the package's view paths to your Tailwind configuration.

    Tailwind CSS v4 (app.css)

    Add the following source path:

    @source '../../vendor/livewire-filemanager/filemanager/resources/views/**/*.blade.php';

    Tailwind CSS v3 (tailwind.config.js)

    Add the package path to your content array:

    module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/livewire-filemanager/filemanager/resources/views/**/*.blade.php',
    ],
}
    // Tailwind v3 example
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/livewire-filemanager/filemanager/resources/views/**/*.blade.php',
    ],
}

  6. Expose files via public URLs

    master

    To allow public access to your files via direct URLs, add a catch-all route in your web.php routes file. This allows the FileController to serve files based on their path.

    Required Import: use LivewireFilemanager\Filemanager\Http\Controllers\Files\FileController;

    use LivewireFilemanager\Filemanager\Http\Controllers\Files\FileController;

Route::get('{path}', [FileController::class, 'show'])->where('path', '.*')->name('assets.show');

  7. Configure Tailwind CSS for Livewire Filemanager

    master

    To ensure styles are correctly compiled in production, add the package's Blade views to your Tailwind configuration.

    For Tailwind v4 (app.css):

    @source '../../vendor/livewire-filemanager/filemanager/resources/views/**/*.blade.php';

    For Tailwind v3 (tailwind.config.js):

    module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/livewire-filemanager/filemanager/resources/views/**/*.blade.php',
    ],
}

  8. Secure File Uploads and Storage

    master

    While the package validates file types and sizes, you must implement additional security measures:

    1. Web Server Hardening

    Prevent PHP execution in your storage directory to mitigate script injection attacks.

    Apache (.htaccess in storage/app/public/):

    <FilesMatch "\.php$">
    Deny from all
</FilesMatch>

    Nginx:

    location ~* /storage/.*\.php$ {
    deny all;
}

    2. Best Practices

    • Validation: Configure allowed_extensions and max_file_size in config/livewire-filemanager.php to the minimum required for your app.
    • Access Control: Always enable ACL in multi-user environments.
    • Storage: Consider using a private disk and serving files via signed URLs for temporary access.

  9. Enable Direct File Access via URL

    master

    To allow users to access files directly via a URL, add a wildcard route in your routes/web.php file using the FileController:

    // routes/web.php
use LivewireFilemanagerilemanager\
Http\Controllers\Files\FileController;

Route::get('{path}', [FileController::class, 'show'])
    ->where('path', '.*')
    ->name('assets.show');
    use LivewireFilemanager\Filemanager\Http\Controllers\Files\FileController;

Route::get('{path}', [FileController::class, 'show'])
    ->where('path', '.*')
    ->name('assets.show');

  10. Install Livewire Filemanager

    master

    Install the package via Composer and set up the necessary migrations. Note that this package relies on spatie/laravel-medialibrary to handle media files.

    Installation Steps

    1. Install via Composer:

      composer require livewire-filemanager/filemanager

    2. Publish Migrations: Publish the package's own migrations:

      php artisan vendor:publish --tag=livewire-filemanager-migrations

      If you haven't configured spatie/laravel-medialibrary yet, publish its migrations as well:

      php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"

    3. Run Migrations:

      php artisan migrate
    IMPORTANT

    This package does not include security layers for uploaded documents. You are responsible for controlling access and securing files/folders.

    Thumbnails: Image thumbnails are dispatched to queues by default. Ensure you have a queue worker running or set QUEUE_CONNECTION appropriately in your .env file.

    composer require livewire-filemanager/filemanager
php artisan vendor:publish --tag=livewire-filemanager-migrations
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-migrations"
php artisan migrate

  11. Enable Access Control List (ACL)

    master

    To restrict file access so that only the creators can view their files, follow these steps to enable ACL:

    1. Publish the package config:

      php artisan vendor:publish --tag=livewire-filemanager-config

      In config/livewire-filemanager.php, set 'acl_enabled' => true.

    2. Configure Media Library: Publish the Spatie media library config if not already done:

      php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="medialibrary-config"

    3. Set the Media Model: In your config/media-library.php file, update the media_model value to: LivewireFilemanager\Filemanager\Models\Media.

    Alternative for existing models: If you already have a custom media model, instead of changing the global config, you can use the LivewireFilemanager\Filemanager\Traits\HasMediaOwner trait inside your existing model.

    // In config/media-library.php
'media_model' => LivewireFilemanager\Filemanager\Models\Media::class,

  12. Use folder upload callbacks

    master

    The FolderController triggers lifecycle callbacks during folder creation and file uploads. You can hook into these events by defining callable functions in your configuration file under the livewire-filemanager.callbacks key.

    Supported Callbacks

    • before_upload: Triggered before a folder is created or before an individual file is processed during a batch upload.
    • after_upload: Triggered after a folder is created or after an individual file has been successfully added to the media collection.

    Configuration Example

    In your config/livewire-filemanager.php (or equivalent configuration source), define your callbacks:

    'callbacks' => [
    'before_upload' => function ($data) {
        // Logic to run before upload/creation
    },
    'after_upload' => function ($data) {
        // Logic to run after upload/creation
    },
],