@props([
    'name',
    'label' => null,
    'multiple' => false,
    'maxFiles' => null,
    'maxFileSize' => null, // e.g. "5MB"
    'acceptedFileTypes' => [], // e.g. ['image/*', 'application/pdf']
    'existingFiles' => [], // [['url' => ..., 'name' => ...]]
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="fileUpload({
            multiple: {{ $multiple ? 'true' : 'false' }}, maxFiles: @js($maxFiles), maxFileSize: @js($maxFileSize),
            acceptedFileTypes: @js($acceptedFileTypes), existingFiles: @js($existingFiles),
         })">
        <input type="file" x-ref="input" name="{{ $name }}{{ $multiple ? '[]' : '' }}" @if ($multiple) multiple @endif class="hidden">
    </div>
</x-forms.field>