File-upload `<x-file-upload>`

Properties

Property	Attribute	Type	Default	Description
`btnClass`	`btn-class`	`string`	`''`
`inputNameFilename`	`input-name`	`string`	`''`
`inputNameFilesize`	`input-name-file`	`string`	`''`
`inputNameFile`	`file-to-upload-name`	`string`	`''`
`label`	`mime-types-text`	`string`	`Upload bestand`
`labelClass`	`mime-types`	`string`	`''`
`hideLabel`	`max-filesize`	`boolean`	`false`
`fileToUploadName`	`filesize`	`string`	`''`
`mimeTypesText`	`filename`	`string`	`''`
`mimeTypes`	`file-upload-title`	`string`	`''`
`error`	`file-to-reupload-name`	`string`	`''`
`fileToReuploadName`	`required`	`string`	`''`
`filesize`	`error`	`string`	`-`

Voorbeeldcode:

<x-file-upload
    :btn-class="'w-50 minw-238'"
    input-name-filename="Voorbeeld bestand"
    input-name-file="Voorbeeld update"
    file-to-upload-name="Voorbeeld bestand"
    :mime-types="'jpg, jpeg, png, pdf, webp'"
    :max-filesize="10"
    :filesize="3"
    filename="Voorbeeld bestand"
    file-upload-title="Upload bewijs"
    file-to-reupload-name="Voorbeeld bestand
    :required="true ?? ''"
    error="Voorbeeld error"
/>

Upload bestand Voorbeeld bestand Maximale bestandsgrootte: 10 MB Bestandsgrootte: 3 Verwijderen

Upload "Voorbeeld bestand" a.u.b. opnieuw.

<div {{ $attributes->class(['has-file' => $fileToUploadName])->merge(['class' => 'custom-file-upload js-custom-file-upload']) }}
     data-max-filesize="{{ $maxFilesize }}"
     data-submit-button-selector="{{ $submitButtonSelector }}"
     data-has-value-class="has-file"
>

    <input class="js-file-upload-input" id="{{ $inputNameFile }}" name="{{ $inputNameFile }}" accept="{{ $mimeTypes }}" type="file" value="" hidden>

    <input class="js-file-upload-input-filename js-validity-selector" type="text" name="{{ $inputNameFilename }}" value="{{ $fileToUploadName }}" {{ $required }} hidden>
    <input class="js-file-upload-input-filesize" type="text" name="{{ $inputNameFilesize }}" value="{{ $filesize }}" hidden>

    @if(!$hideLabel)
        <label class="control-label {{ $labelClass }} {{ $required }}" for="{{ $inputNameFile }}">
            {{ $label }}
        </label>
    @endif

    <label class="custom-file-upload__btn {{ $btnClass }}" for="{{ $inputNameFile }}">

        <span class="custom-file-upload__mimetypes">
            <span class="custom-file-upload__icon">
                <i class="fa fa-arrow-up-from-bracket"></i>
            </span>
            {{ $mimeTypesText }}
        </span>

        <span class="custom-file-upload__name" title="{{ $filename }}">
            <span class="custom-file-upload__icon">
                <i class="fa fa-paperclip"></i>
            </span>
            <span class="custom-file-upload__filename js-file-upload-filename">{{ $filename }}</span>
        </span>

        <span class="custom-file-upload__max-filesize">
            Maximale bestandsgrootte: {{ $maxFilesize }} MB
        </span>

        <span class="custom-file-upload__filesize">
            Bestandsgrootte: <span class="js-file-upload-filesize">{{ $filesize }}</span>
        </span>

        <a class="custom-file-upload__remove js-file-upload-remove" href="#">
            <i class="fa fa-xmark"></i> <span class="ms-1">Verwijderen</span>
        </a>

    </label>

    <div class="alert alert-warning js-filesize-exceeded js-file-error" hidden>
        @icon('exclamation-triangle') Dit bestand is te groot. De maximale bestandsgrootte is {{ $maxFilesize }} MB.
    </div>

    @error($error)
    <div class="alert alert-warning js-file-error">
        @icon('exclamation-triangle') {!! $message !!}
    </div>
    @enderror

    @if($fileToReuploadName)
        <div class="error-msg js-file-error">
            @icon('exclamation-triangle') Upload "{{ $fileToReuploadName }}" a.u.b. opnieuw.
        </div>
    @endif

</div>

@once
    @push('footer-scripts')
        <script>
            const setFilesize = (input, container) => {
                const filesizeElem = container.querySelector('.js-file-upload-filesize');

                if (!filesizeElem) return;

                const size = Reyez.getFileSize(input);

                function formatFileSize(bytes) {
                    const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];

                    let i = 0;
                    while (bytes >= 1000 && i < units.length - 1) {
                        bytes /= 1000;
                        i++;
                    }

                    if (i === 0 || i === 1) {
                        return bytes.toFixed(0) + ' ' + units[i]; // No decimal places for bytes or for KB
                    } else if (i === 2) {
                        return bytes.toFixed(1) + ' ' + units[i]; // 1 decimal place for MB
                    } else {
                        return bytes.toFixed(2) + ' ' + units[i];
                    }
                }

                filesizeElem.innerText = formatFileSize(size);
            }

            const setFilename = (input, container) => {
                const inputValueArray = input.value.split('\\');
                const filename = inputValueArray[inputValueArray.length - 1] ?? '';
                const hasValueClass = container.dataset['hasValueClass'] ?? null;
                const filenameElem = container.querySelector('.js-file-upload-filename');
                const filenameInput = container.querySelector('.js-file-upload-input-filename');

                if (!filenameElem && !filenameInput) return;

                filenameInput.value = filename;
                filenameElem.innerText = filename;
                filenameElem.parentElement.setAttribute('title', filename);

                if (hasValueClass) container.classList[filename ? 'add' : 'remove'](hasValueClass);
            }

            const hideErrors = (container) => {
                const existingAlerts = container.querySelectorAll('.js-file-error') ?? null;

                if (existingAlerts.length) {
                    existingAlerts.forEach(existingAlert => {
                        existingAlert.hidden = true;
                    });
                }
            }

            const initCustomFileUpload = () => {
                document.querySelectorAll('.js-custom-file-upload').forEach(elem => {
                    if (!elem || elem.classList.contains('initialized')) return;

                    elem.classList.add('initialized');

                    const fileInput = elem.querySelector('.js-file-upload-input');
                    const filenameInput = elem.querySelector('.js-file-upload-input-filename');
                    const remover = elem.querySelector('.js-file-upload-remove');
                    const hasValueClass = elem.dataset['hasValueClass'] ?? null;
                    const submitButton = document.querySelector(elem.dataset['submitButtonSelector']) ?? null;
                    let maxFilesize = elem.dataset.maxFilesize ?? null;
                    maxFilesize = maxFilesize * 1000000;

                    remover.addEventListener('click', () => {
                        hideErrors(elem);
                        elem.classList.remove(hasValueClass);
                        fileInput.value = null;
                        filenameInput.value = null;
                        filenameInput.setCustomValidity('Invalid.');
                        if (submitButton) submitButton.disabled = true;
                    });

                    fileInput.addEventListener('change', function (event) {
                        setFilename(event.target, elem);
                        setFilesize(event.target, elem);
                        hideErrors(elem);

                        const filesize = Reyez.getFileSize(event.target);
                        const alert = elem.querySelector('.js-filesize-exceeded');

                        if (filesize > maxFilesize) {
                            alert.hidden = false;
                            filenameInput.setCustomValidity('Invalid.');
                        } else {
                            filenameInput.setCustomValidity('');
                            if (submitButton) submitButton.disabled = false;
                        }
                    });
                });
            }

            initCustomFileUpload();
        </script>
    @endpush
@endonce