RomhackPlaza/resources/views/components/gallery-field.blade.php

<div x-data="GalleryManager()" x-init="init(@js($oldPaths))" x-ref="gallery-field">
    <x-form-field-title name="Screenshots" helper="At least 1 Screenshot required, Maximum 20." required="{{ $required ? 'true' : 'false' }}" />
    <div class="form-group main-image-grid">
        <div class="form-upload" style="flex:1;" :class="{ 'disabled': isFull }">
            <input type="file" id="gallery-field" accept="image/png, image/jpeg, image/webp, image/gif" multiple :disabled="isFull" @change="handleSubmitFiles($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>
        </div>
        <div class="form-gallery form-group level" style="flex:4;">
            <template x-for="(image,i) in images" :key="image.key">
                <div
                    class="gallery-item"
                    :class="{ 'gallery-item--dragging': dragSrcI === i }"
                    draggable="true"
                    :data-gallery-index="i"
                    @dragstart="dragStart(i)"
                    @dragover="dragOver($event, i)"
                    @dragend="dragEnd()"
                >
                    <div class="form-image-preview-wrap">
                        <div class="gallery-drag-handle" title="Drag to reorder">
                            <i data-lucide="grip-vertical" size="14"></i>
                        </div>

                        <span class="gallery-order-badge" x-text="i + 1"></span>

                        <img :src="image.preview" :alt="image.name">
                        <button type="button" class="form-image-remove" @click="handleRemoveFile(i)">
                            X
                        </button>
                    </div>
                    <div class="gallery-mobile-controls" aria-label="Reorder screenshot">
                        <button type="button" class="gallery-move-btn" @click="moveImageUp(i)" :disabled="i === 0" title="Move up">
                            <i data-lucide="chevron-up" size="14"></i>
                        </button>
                        <button type="button" class="gallery-move-btn" @click="moveImageDown(i)" :disabled="i === images.length - 1" title="Move down">
                            <i data-lucide="chevron-down" size="14"></i>
                        </button>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <template x-for="(image, i) in images" :key="image.key">
        <input type="hidden" name="gallery[]" :value="image.serverFilePath">
    </template>

</div>