I want to make the image upload box open and close. In my code, the opening function works, but for some reason, the closing function doesn’t work. Additionally, when I use console.log in the functions responsible for opening and closing, the console.log in the closing function runs twice. I also tried using another approach variable = !variable, but this approach has problem when the file input button is clicked, it causes the page to rerender, which resets the state variable to false, causing the box to close again. Does anyone know how to fix this?

<script>
    let article = {}
    
    let base64Image
    
    let articleViewer
    
    let imageUploadBox
    
    function showImageUpload(){
        if (imageUploadBox.classList.contains("hidden")){
            imageUploadBox.classList.remove("hidden")
            console.log(imageUploadBox.classList)
        }
    }
    
    function closeImageUpload(){
        if (!imageUploadBox.classList.contains("hidden")){
            imageUploadBox.classList.add("hidden")
            console.log(imageUploadBox.classList)
        }
    }
    
    function processImage(e){
        const image = e.target.files[0]
        const imageReader = new FileReader()
        imageReader.onload = (e) => {
            base64Image = e.target.result
        }
        imageReader.readAsDataURL(image)
    }
    
    function insertImage(image){
        let selection = window.getSelection()
        let range = selection.getRangeAt(0)
        
        if (articleViewer.contains(range.commonAncestorContainer)){
            let imgTag = document.createElement("img")
            imgTag.src = image
            imgTag.className = "w-[50%] m-auto rounded-lg"
            
            range.deleteContents()
            range.insertNode(imgTag)
            
            range.setStartAfter(imgTag)
            range.collapse(true)
            selection.removeAllRanges()
            selection.addRange(range)
            
            base64Image = ""
        }
        else {
            alert("Images can only be inserted in the article content")
        }
    }
    
    function updateArticle(){}
</script>

<div class="flex flex-col gap-4 p-8 h-screen">
    <input type="text" class="bg-emerald-500 text-white p-4 rounded-lg focus:border-none focus:outline-none" bind:value={article["title"]} />
    <div class="relative">
        <button on:click={() => showImageUpload()} >
            <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" height="40px" width="40px"><path fill="white" d="M13.3 34.15h21.45q.5 0 .7-.4.2-.4-.1-.8l-5.85-7.8q-.25-.3-.6-.3t-.6.3l-6 7.75-4.05-5.55q-.25-.3-.6-.3t-.6.3l-4.3 5.6q-.25.4-.075.8t.625.4ZM9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h30q1.2 0 2.1.9.9.9.9 2.1v30q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h30V9H9v30ZM9 9v30V9Z"/></svg>
            <!--{#if imageUploadBox}-->
                <div class="hidden bg-emerald-500 p-8 rounded-lg flex justify-center items-center flex-col gap-8 absolute top-[110%] relative" bind:this={imageUploadBox}>
                    <input type="file" accept="images/*" on:change={processImage} class="rounded-lg text-emerald-100 text-xs font-semibold bg-emerald-950 p-4" />
                    {#if base64Image}
                        <img src={base64Image} class="rounded-lg w-[50%]" />
                        <button on:click={insertImage(base64Image)} class="bg-emerald-950 text-emerald-100 p-4 text-xs font-semibold rounded-lg" >Add</button>
                    {/if}
                    <button on:click={closeImageUpload} class="p-4 rounded-full absolute bottom-[100%] right-[100%] bg-emerald-950" >
                        <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em"><path fill="white" d="M24 26.1 13.5 36.6q-.45.45-1.05.45-.6 0-1.05-.45-.45-.45-.45-1.05 0-.6.45-1.05L21.9 24 11.4 13.5q-.45-.45-.45-1.05 0-.6.45-1.05.45-.45 1.05-.45.6 0 1.05.45L24 21.9l10.5-10.5q.45-.45 1.05-.45.6 0 1.05.45.45.45.45 1.05 0 .6-.45 1.05L26.1 24l10.5 10.5q.45.45.45 1.05 0 .6-.45 1.05-.45.45-1.05.45-.6 0-1.05-.45Z"/></svg>
                    </button>
                </div>
            <!--{/if}-->
        </button>
    </div>
    <div id="articleViewer" class="bg-emerald-500 text-white p-4 rounded-lg focus:border-none focus:outline-none" bind:innerHTML={article["content"]} contenteditable="true" bind:this={articleViewer}>hello</div>
</div>

<style>
    input:active {
        border: 0;
        outline: 0;
    }
    
    .hidden {
        display: none;
    }
</style>