@if( $value && $mimes && in_array('png', $mimes) )
<img src="{{ $value }}" alt="" id="{{ $name }}_preview" style="max-width: 300px; max-height: 300px;">
@endif
<div class="custom-file">
    <input type="file" class="form-control-file @error($name) is-invalid @enderror"
        id="{{ $name }}"
        name="{{ $name }}"
        form="{{ $formId }}"
        @if( isset($mimes) ) accept="{{ implode(",",$mimes) }}"@endif
        @if( $required ) required @endif
    >
    {{-- <label class="custom-file-label" for="{{ $name }}" aria-describedby="{{ $name }}">Válassz...</label> --}}
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('{{ $name }}');
    const filePreview = document.getElementById('{{ $name }}_preview');

    fileInput.addEventListener('change', function() {
        const file = fileInput.files[0];

        if (file) {
            const reader = new FileReader();

            reader.onload = function(e) {
                // const img = new Image();
                filePreview.src = e.target.result;
                // filePreview.innerHTML = '';
                // filePreview.appendChild(img);
            };

            reader.readAsDataURL(file);
        } else {
            filePreview.innerHTML = 'Nincs kiválasztott fájl.';
        }
    });
});
</script>