actions.blade.php

<button class="flex w-4 h-4 mb-2 text-red-400 opacity-0 group-hover:opacity-100 transition-opacity" wire:click="removeBlock({{ $block->id }})">
    @icon('solid.trash-alt')
</button>
@if ($block->type == 'image')
    <div class="relative flex w-4 h-4 mb-2 overflow-hidden opacity-0 group-hover:opacity-100 cursor-pointer text-blue-400">
        <div class="absolute top-0 left-0 w-4 h-4 pointer-events-none">
            @icon('solid.file-upload')
        </div>
        <input
            type="file"
            class="absolute top-0 left-0 w-4 h-4 opacity-0"
            data-block-id="{{ $block->id }}"
        />
    </div>
    @if ($block->image_arrangement == 'centered')
        <button
            key="image_expand_{{ $block->id }}"
            class="flex w-4 h-4 mb-2 opacity-0 group-hover:opacity-100 text-blue-400 cursor-pointer"
            wire:click="updateBlockField({{ $block->id }}, 'image_arrangement', 'full')"
        >
            @icon('solid.expand')
        </button>
    @endif
    @if ($block->image_arrangement == 'full')
        <button
            key="image_collapse_{{ $block->id }}"
            class="flex w-4 h-4 opacity-0 group-hover:opacity-100 text-blue-400 cursor-pointer"
            wire:click="updateBlockField({{ $block->id }}, 'image_arrangement', 'centered')"
        >
            @icon('solid.compress-arrows-alt')
        </button>
    @endif
@endif

app.js

window.fileToBase64 = function(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()

        reader.onload = function() {
            resolve(reader.result)
        }

        reader.onerror = function(error) {
            reject(error)
        }

        reader.readAsDataURL(file)
    })
}

EditPost.php

<?php

// snip

public function uploadImage($id, $name, $type, $size, $data)
{
    $raw = substr($data, strpos($data, ',') + 1);
    $raw = base64_decode($raw);

    $uuid = (string) Str::uuid();
    $extension = pathinfo($name, PATHINFO_EXTENSION);

    app('filesystem')->disk('spaces')->put("portfolio/images/{$uuid}.{$extension}", $raw, 'public');

    $block = $this->post->blocks()->find($id);
    $block->image_path = "portfolio/images/{$uuid}.{$extension}";
    $block->save();
    
    $this->update();
}

image-block.blade.php

<div class="flex flex-col w-full my-4">
    @if ($block->image_path)
        <img
            src="https://assertchris.fra1.cdn.digitaloceanspaces.com/{{ $block->image_path }}"
            class="
                flex h-auto mx-auto
                @if ($block->image_arrangement == 'full')
                    w-full
                @else
                    w-3/4
                @endif
            "
        />
    @endif
    <textarea
        name="image_content_{{ $block->id }}"
        class="flex w-full border-l-4 border-gray-400 pl-2 focus:bg-gray-100 outline-none"
        wire:change="updateBlockField({{ $block->id }}, 'image_content', $event.target.value)"
        rows="1"
    >{{ $block->image_content }}</textarea>
</div>

@push('scripts')
    <script type="text/javascript">
        document.addEventListener('change', function(e) {
            var target = e.target

            if (target.matches("[type='file']")) {
                var id = target.getAttribute('data-block-id')

                var name = target.files[0].name
                var type = target.files[0].type
                var size = target.files[0].size

                fileToBase64(target.files[0]).then(function(data) {
                    window.livewire.emit('uploadImage', id, name, type, size, data)
                })
            }
        }, true)
    </script>
@endpush