MediaFlow for Laravel Documentation

composer require dwivedianuj9118/mediaflow-laravel

# Publish configuration file (config/mediaflow.php)
php artisan vendor:publish --tag=mediaflow-config

# Publish database migrations
php artisan vendor:publish --tag=mediaflow-migrations

# Publish CSS and JS assets to public/vendor/mediaflow
php artisan vendor:publish --tag=mediaflow-assets

php artisan migrate

php artisan storage:link

# Route prefix for media manager and upload endpoints (default: mediaflow)
MEDIAFLOW_ROUTE_PREFIX=mediaflow

# Storage persistence disk ('public', 's3', etc.)
MEDIAFLOW_DISK=public

# Maximum upload file size in kilobytes (default: 20480 = 20 MB)
MEDIAFLOW_MAX_FILE_SIZE_KB=20480

# Delivery Driver: 'disk' for storage disk URL, 'cdn' for custom CDN host
MEDIAFLOW_DELIVERY_DRIVER=disk
MEDIAFLOW_CDN_URL=https://cdn.example.com

# Access Control & Guard enforcement
MEDIAFLOW_AUTH_ENABLED=false
MEDIAFLOW_AUTH_GUARD=web
MEDIAFLOW_AUTH_ROLES=admin,editor

<form method="POST" action="/articles">
    
    <div class="form-group">
        <label>Article Title</label>
        <input type="text" name="title" class="form-control" required>
    </div>

    @
    <x-mediaflow-input 
        name="cover_media_id" 
        label="Featured Cover Image"
        help="Drag & drop an image or select from your media library."
        :required="true"
    />

    <button type="submit">Save Article</button>
</form>

<div class="admin-sidebar-drawer" style="width: 320px;">
    <h3>Quick Post Editor</h3>

    @
    <x-mediaflow-input 
        name="sidebar_thumbnail_id" 
        label="Sidebar Thumbnail"
        :compact="true"
        help="Scaled for narrow panels (280px-340px)."
    />
</div>

<x-mediaflow-input 
    name="cover_media_id" 
    label="Cover Image"
    :value="$post->coverMedia ?? old('cover_media_id')" 
/>

public function store(Request $request)
{
    $validated = $request->validate([
        'title' => 'required|string|max:255',
        'cover_media_id' => 'required|exists:mediaflow_media,id',
    ]);

    $post = Post::create($validated);

    return redirect()->route('posts.show', $post);
}

<x-mediaflow::uploader
    folder="gallery/products"
    collection="product_shots"
    accept="image/*,application/pdf"
    :multiple="true"
    :animated="true"
/>

<x-mediaflow-manager />

<head>
    @mediaflowStyles
</head>
<body>
    @yield('content')

    @mediaflowScripts
</body>

# 1. Completely Headerless (for iframes or embedded modals)
/mediaflow/manager?clean=1

# 2. Pure Grid Mode (hides top upload dropzone, shows only folders & files)
/mediaflow/manager?no_uploader=1

document.addEventListener('mediaflow:selected', (e) => {
    const media = e.detail;
    console.log('Selected media ID:', media.id);
    console.log('Full Delivery URL:', media.url);
    console.log('Thumb WebP URL:', media.thumbnail);
});

<x-mediaflow-input
    name="cover_image"
    theme="emerald"
    mode="dark"
    folder-color="#3b82f6"
/>


<x-mediaflow-input
    name="avatar_id"
    theme="violet"
    mode="light"
    folder-color="#f59e0b"
/>


<x-mediaflow::manager
    theme="custom"
    color-mode="dark"
    folder-color="#10b981"
/>

:root {
    /* Primary Accent Color (Picker borders, buttons, badges) */
    --mf-primary: #8b5cf6;
    --mf-primary-hover: #7c3aed;
    --mf-primary-light: rgba(139, 92, 246, 0.12);

    /* Media Folder Icon & Background Colors */
    --mf-folder-color: #f59e0b; /* Amber Gold */
    --mf-folder-bg: rgba(245, 158, 11, 0.14);
}

/* Host Dark Mode Tokens */
html.dark {
    --mf-bg-main: #0b0f19;
    --mf-bg-card: #131b2e;
    --mf-border: #1e293b;
    --mf-text-main: #f1f5f9;
}

use MediaFlow\Laravel\Facades\MediaFlow;

// 1. Upload a file from HTTP Request
$media = MediaFlow::upload($request->file('photo'), [
    'disk' => 'public',
    'folder' => 'avatars',
    'collection' => 'profiles',
    'thumbnails' => true,
]);

// 2. Create hierarchical folder
$folder = MediaFlow::createFolder('2026 Campaigns', $parentFolderId = null);

// 3. Move media to folder
MediaFlow::move($media, $folder->id);

// 4. Rename media display name
MediaFlow::rename($media, 'hero-banner.webp');

// 5. Delete file, physical disk objects & thumbnail variants
MediaFlow::delete($media);

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use MediaFlow\Laravel\Models\Media;

class Post extends Model
{
    protected $fillable = ['title', 'cover_media_id'];

    public function coverMedia(): BelongsTo
    {
        return $this->belongsTo(Media::class, 'cover_media_id');
    }
}

@
<img src="{{ $post->coverMedia->url() }}" alt="{{ $post->title }}">

@
<img src="{{ $post->coverMedia->thumbnailUrl('thumb') }}" loading="lazy">
<img src="{{ $post->coverMedia->thumbnailUrl('medium') }}">

@
<span>File size: {{ $post->coverMedia->human_size }}</span>

$result = MediaFlow::optimize(
    $media,
    'webp',       // format: 'webp', 'avif', 'jpeg', 'png'
    80,           // quality: 10 - 100
    false         // replace original: true or false
);

// Metrics returned
$savings = $result['metrics']['savings_percent']; // e.g. 94.6%
$optimizedMedia = $result['media'];

'auth' => [
    // Enforce authentication for media manager routes
    'enabled' => env('MEDIAFLOW_AUTH_ENABLED', false),

    // Selected Guard: 'web', 'admin', 'api', or null
    'guard' => env('MEDIAFLOW_AUTH_GUARD', 'web'),

    // Allowed Roles (checks $user->role or Spatie hasRole)
    'roles' => ['admin', 'editor'],

    // Optional permissions or gates
    'permissions' => ['manage-media'],
],

use MediaFlow\Laravel\Facades\MediaFlow;

public function boot(): void
{
    MediaFlow::authorize(function ($request) {
        // Return true to allow, false to deny
        return $request->user()?->is_admin || $request->user()?->can('access-media');
    });
}

const res = await fetch('/mediaflow/settings/test-provider', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
    },
    body: JSON.stringify({
        provider: 'cloudflare_r2',
        key: 'your_r2_access_key_id',
        secret: 'your_r2_secret_access_key',
        bucket: 'my-production-bucket',
        endpoint: 'https://<account_id>.r2.cloudflarestorage.com',
        public_url: 'https://cdn.example.com'
    })
});

const result = await res.json();
console.log(result); // { success: true, latency_ms: 142.5, message: "✓ Connected!" }

# Set Default Disk to MediaFlow Cloud
MEDIAFLOW_DISK=mediaflow_cloud

# Example 1: Cloudflare R2 (Recommended for zero egress fees)
MEDIAFLOW_PROVIDER=cloudflare_r2
MEDIAFLOW_PROVIDER_KEY=your_r2_access_key_id
MEDIAFLOW_PROVIDER_SECRET=your_r2_secret_access_key
MEDIAFLOW_PROVIDER_BUCKET=my-r2-bucket
MEDIAFLOW_PROVIDER_PUBLIC_URL=https://cdn.example.com
MEDIAFLOW_PROVIDER_ENDPOINT=https://<account_id>.r2.cloudflarestorage.com

# Example 2: Contabo Object Storage (European High-Capacity S3)
# MEDIAFLOW_PROVIDER=contabo
# MEDIAFLOW_PROVIDER_KEY=your_contabo_key
# MEDIAFLOW_PROVIDER_SECRET=your_contabo_secret
# MEDIAFLOW_PROVIDER_BUCKET=my-contabo-bucket
# MEDIAFLOW_PROVIDER_PUBLIC_URL=https://eu2.contabostorage.com/my-contabo-bucket
# MEDIAFLOW_PROVIDER_REGION=eu2

# Example 3: MinIO Local / Docker S3
# MEDIAFLOW_PROVIDER=minio
# MEDIAFLOW_PROVIDER_KEY=minioadmin
# MEDIAFLOW_PROVIDER_SECRET=minioadmin
# MEDIAFLOW_PROVIDER_BUCKET=my-minio-bucket
# MEDIAFLOW_PROVIDER_ENDPOINT=http://localhost:9000
# MEDIAFLOW_PROVIDER_PUBLIC_URL=http://localhost:9000/my-minio-bucket

MEDIAFLOW_DELIVERY_DRIVER=cdn
MEDIAFLOW_CDN_URL=https://media-cdn.yourdomain.com

// Generates a secure, expiring URL bypassing direct bucket exposure
$privateUrl = $media->temporarySignedUrl(now()->addMinutes(30));