<div {{ $attributes }}>
    <div x-data="imageViewer()" class="position-relative">
        <div class="d-flex w-50 m-auto">
          <!-- Show the image -->
          <template x-if="imageUrl != ''">
              <label for="image">
                <img :src="imageUrl" class="img-thumbnail mw-50 img-clickable" style="cursor: pointer;">
              </label>
          </template>
          <!-- Image file selector -->
          <input class="mt-2 d-none" type="file" id="image" accept="image/*" @change="fileChosen">
        </div>
    </div>
</div>


@push('scripts')
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js')}}"></script>
<script>
    function imageViewer() {
        return {
            imageUrl: '{{ asset("images/no-image.jpg") }}',

            fileChosen(event) {
            this.fileToDataUrl(event, src => this.imageUrl = src)
            },

            fileToDataUrl(event, callback) {
            if (! event.target.files.length) return

            let file = event.target.files[0],
                reader = new FileReader()

            reader.readAsDataURL(file)
            reader.onload = e => callback(e.target.result)
            },
        }
    }
</script>
@endpush