RomhackPlaza/resources/views/components/main-image-field.blade.php

<div x-data="MainImageManager()" x-init="init('{{$oldPath}}')" x-ref="main-image-field">
    <x-form-field-title name="Main image" helper="This will show up on the index and on top of the entry. A screenshot or custom cover is prefered else all entries of same game will look the same." required="{{ $required ? 'true' : 'false' }}" />
    <div class="form-group main-image-grid">
        <div class="form-upload" style="flex:4;">
            <input type="file" id="main-image-field" accept="image/png, image/jpeg, image/webp, image/gif" @change="handleSubmitFile($event)">
            <div class="form-upload-placeholder level">
                <i data-lucide="file-archive" size="36" style="margin-bottom:15px;color:var(--text2)"></i>
                <div style="font-size: 1.1rem;color:var(--text);margin-bottom:5px;">
                    Click or drag'n drop files here.
                </div>
                <div style="font-size:0.85rem;color:var(--text2);">
                    Accepted: PNG, JPG, GIF or WebP
                </div>
            </div>
            <input type="hidden" name="main-image" x-model="serverFilePath">
        </div>
        <div class="form-image" style="flex:1">
            <div class="form-image-placeholder" x-show="!preview">
                <i data-lucide="image" size="48"></i>
            </div>
            <div class="form-image-preview" x-show="preview" x-cloak>
                <div class="form-image-preview-wrap">
                    <img :src="preview" alt="Main Image">

                    <button type="button" class="form-image-remove" @click="handleRemoveFile()">
                        <i data-lucide="x"></i>
                    </button>
                </div>

                <div class="form-image-info">
                    <span x-text="name"></span>
                </div>
                <span class="form-error-text" x-show="error !== null" x-text="error"></span>
            </div>
        </div>
    </div>
</div>