PHP code example of codebyray / livewire-media-uploader

1. Go to this page and download the library: Download codebyray/livewire-media-uploader library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

codebyray / livewire-media-uploader example snippets


// config/app.php
'providers' => [
    // ...
    Codebyray\LivewireMediaUploader\MediaUploaderServiceProvider::class,
],

namespace App\Policies;

use App\Models\Post;
use App\Models\User;

class PostPolicy
{
    public function update(User $user, Post $post): bool
    {
        return (string) $post->user_id === (string) $user->getKey();
    }
}

$this->dispatch(
    'media:attach',
    model: 'post',
    id: $post->id,
    collection: 'images',
    channel: 'post-images',
);

// config/media-uploader.php
return [
    'theme'  => 'tailwind', // 'tailwind' (default) or 'bootstrap'
    'themes' => [
        'tailwind'  => 'media-uploader::themes.tailwind.media-uploader',
        'bootstrap' => 'media-uploader::themes.bootstrap.media-uploader',
    ],
    // ...
];

    'theme'  => 'custom',
    'themes' => [
        'tailwind'  => 'media-uploader::themes.tailwind.media-uploader',
        'bootstrap' => 'media-uploader::themes.bootstrap.media-uploader',
        'custom'    => 'media-uploader::themes.custom.media-uploader',
    ],
    

    use Spatie\Image\Enums\Fit;
    use Spatie\MediaLibrary\HasMedia;
    use Spatie\MediaLibrary\InteractsWithMedia;
    use Spatie\MediaLibrary\MediaCollections\Models\Media;
    
    class Post extends Model implements HasMedia
    {
        use InteractsWithMedia;
    
        public function registerMediaCollections(): void
        {
            // Multi-file collection.
            $this->addMediaCollection('photos')
                ->useDisk('public')
                ->withResponsiveImages();
    
            // Single-file collection. Each new upload replaces the existing file.
            $this->addMediaCollection('avatars')
                ->singleFile();
        }
    
        public function registerMediaConversions(?Media $media = null): void
        {
            $this->addMediaConversion('thumb')
                ->fit(Fit::Contain, 256, 256)
                ->performOnCollections('photos', 'avatars')
                ->nonQueued();
        }
    }
    

    > $this->addMediaCollection('photos');
    > 

    > $this->addMediaCollection('avatar')
    >     ->singleFile();
    > 

use App\Models\Post;
use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\On;
use Livewire\Component;

class PostCreate extends Component
{
    public string $title = '';
    public string $body  = '';
    public ?int $pendingPostId = null;

    protected function rules(): array
    {
        return ['title' => '    // Fire once per collection rendered on the page
        $this->dispatch('media:attach', model: 'post', id: $post->id, collection: 'images', channel: 'post-images');
    }

    #[On('media-attached')]
    public function afterMediaAttached(string $model, string|int $id): void
    {
        if ($this->pendingPostId && (int)$id === (int)$this->pendingPostId) {
            $this->pendingPostId = null;
            $this->redirectRoute('posts.show', ['post' => $id], navigate: true);
        }
    }

    public function render() { return view('livewire.posts.post-create'); }
}

        $this->dispatch('media:attach', model: 'post', id: $post->id, collection: 'images', channel: 'post-images');
    

'collections' => [
    'avatars' => 'images',
    'images' => 'images',
    'attachments' => 'docs',
],

'collections' => [
    'press-kits' => 'archives',
],

'presets' => [
    'archives' => [
        'types' => 'zip',
        'mimes' => 'application/zip',
        'max_kb' => 51200,
    ],
],

'watermark' => [
    'enabled' => (bool) env('MEDIA_UPLOADER_WATERMARK_ENABLED', false),
    'path' => env(
        'MEDIA_UPLOADER_WATERMARK_PATH',
        public_path('images/watermark.png'),
    ),
    'position' => 'bottom-right',
    'padding_x' => 24,
    'padding_y' => 24,
    'padding_unit' => 'pixel',
    'width' => 20,
    'width_unit' => 'percent',
    'height' => 0,
    'height_unit' => 'pixel',
    'fit' => 'contain',
    'opacity' => 70,
],

    $this->addMediaCollection('photos');
    

    $this->addMediaCollection('avatar')
      ->singleFile();
    
bash
php artisan vendor:publish --tag=media-uploader-config
bash
php artisan vendor:publish --tag=media-uploader-views
html
resources/views/vendor/media-uploader/themes/tailwind/media-uploader.blade.php
resources/views/vendor/media-uploader/themes/bootstrap/media-uploader.blade.php
bash
    php artisan config:clear
    
html
    <livewire:media-uploader
        :for="$user"
        collection="avatar"
        :multiple="false"
        :showList="false"
        preset="images"
    />
    
html
    <livewire:media-uploader :for="$user" collection="images" preset="images" :skipExactDuplicates="true" />
    
html
    <livewire:media-uploader
        :for="$post"
        collection="images"
        preset="images"
        :watermark="true"
    />
    
bash
php artisan vendor:publish --tag=media-uploader-config
html
<livewire:media-uploader
    :for="$post"
    collection="images"
    preset="images"
    :watermark="true"
/>