ایجاد modal با مورد alpinejs

سلام دوستان ،
من با alpinejs یک modal درست کردم. و به صورت کامل صحیح هم کار میکنه .
مشکل اینجاست که :
کاربر وقتی میخواد عکس پروفایل یا هر چیزی آپلود کنه یه modal باز بشه و با cropperjs اون عکس رو برش بدم بعد بقیه کارها رو انجام بدم.
یعنی وقتی کاربر تصویر رو از طریق کد زیر وارد کرد .اون پاپ آپ باز بشه

<input class="imageUpload" name="imageUpload" id="imageUpload" type="file"/>

$("body").on("change", ".imageUpload", function (e) {
    console.log('test code');
    Alpine.data('showModal', () => ({
        showModal: true,
    }));
});

اینم کد modal

<template x-cloak x-if="showModal" @keydown.window.escape="showModal = false">
    <div class=" fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
         aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                 @click="showModal = false"
                 aria-hidden="true">
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
            <div
                class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div>
                    <div class="cropper-box">
                        <img id="image" src="">
                    </div>
                </div>
                <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
                    <button type="button"
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm"
                            @click="open = false">
                        Deactivate
                    </button>
                    <button type="button"
                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
                            @click="open = false">
                        Cancel
                    </button>
                </div>
            </div>

        </div>
    </div>
</template>

( اینم بگم با tailwindcss طراحی کردم قالب رو )
@sinashahoveisi
@hadikhanian
@endworld
@hesammousavi