mivita/resources/views/user/components/user_profile_image.blade.php

{{-- Berater-Profilfoto (N6): eigener Upload-Block (eigene Form, daher außerhalb
     des Profil-Formulars eingebunden). Slim-Cropper-Muster wie beim Shop-Bild. --}}
<div class="card mb-4">
    <h5 class="card-header">{{ __('account.profile_image') }}<br>
        <small>{{ __('account.profile_image_copy') }}</small>
    </h5>
    <div class="card-body p-3">
        @if ($user->account->getProfileImageUrl())
            <div class="text-center">
                @include('components._avatar', [
                    'imageUrl' => $user->account->getProfileImageUrl(),
                    'firstName' => $user->account->first_name,
                    'lastName' => $user->account->last_name,
                    'size' => 120,
                ])
                <br><br>
                <a href="{{ route('user_profile_delete_image') }}" class="btn btn-danger"
                    onclick="return confirm('{{ __('actions.really_delete_picture') }}');"><i class="fa fa-trash"></i>
                    {{ __('account.profile_image_delete') }}</a>
            </div>
        @else
            <form method="POST" action="{{ route('user_profile_upload_image') }}" accept-charset="UTF-8" class="avatar"
                enctype="multipart/form-data">
                @csrf
                <div class="slim_holder text-center">
                    <div class="slim" style="margin:20px auto; max-width: 320px;"
                        data-label='<span class="text-green">{{ __('actions.upload_photo') }}</span><br>({{ __('actions.search_file_or_drag_drop') }})'
                        data-size="400,400"
                        data-min-size="200,200"
                        data-max-file-size="10"
                        data-status-image-too-small="{{ __('actions.image_too_small') }}"
                        data-status-file-type="{{ __('actions.invalid_file') }}"
                        data-status-file-size="{{ __('actions.file_is_too_big') }}"
                        data-button-confirm-label="{{ __('actions.confirm') }}"
                        data-button-cancel-label="{{ __('actions.cancel') }}"
                        data-button-confirm-title="{{ __('actions.confirm') }}"
                        data-button-cancel-title="{{ __('actions.cancel') }}"
                        data-button-rotate-title="{{ __('actions.rotate') }}"
                        data-ratio="1:1">
                        <input type="file" name="images[]" required />
                    </div>

                    <div class="form-group text-left mx-auto" style="max-width: 480px;">
                        <label class="custom-control custom-checkbox m-0">
                            <input type="checkbox" class="custom-control-input" name="profile_image_consent"
                                id="profile_image_consent" value="1">
                            <span class="custom-control-label">{{ __('account.profile_image_consent') }}</span>
                        </label>
                    </div>

                    <button class="btn btn-primary" type="submit" id="profile-image-submit"
                        disabled>{{ __('actions.save_image') }}</button>
                </div>
            </form>
            <script type="application/javascript">
                $(document).ready(function() {
                    // Ohne Einwilligung kein Upload (zusätzlich serverseitig geprüft).
                    $('#profile_image_consent').on('change', function() {
                        $('#profile-image-submit').prop('disabled', !this.checked);
                    });
                });
            </script>
        @endif
    </div>
</div>