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>
The other approach that caused rerender, the rerender happens when I click the <input type="file" /> :
<script>
let article = {}
let base64Image
let articleViewer
let imageUploadBox = false
function showImageUpload(){
imageUploadBox = !imageUploadBox
}
function closeImageUpload(){
imageUploadBox = !imageUploadBox
}
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 type="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="bg-emerald-500 p-8 rounded-lg flex justify-center items-center flex-col gap-8 absolute top-[110%] relative">
<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 type="button" on:click={() => insertImage(base64Image)} class="bg-emerald-950 text-emerald-100 p-4 text-xs font-semibold rounded-lg" >Add</button>
{/if}
<button type="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>
If I'm not misunderstanding something from your question, you could initialize a local variable to keep track of the open/close state. Get rid of closeImageUpload and showImageUpload, and use Svelte's class binding like this:
<div
class:hidden={!isOpen}
bind:this={imageUploadBox}
class="bg-emerald-500 p-8 rounded-lg flex justify-center items-center flex-col gap-8 absolute top-[110%] relative">
...
</div>
Finally, I didn't test this, but the root cause of your issue is probably due to having two nested buttons, which might interfere. Svelte 5 changed this syntax, but in Svelte 3 and 4 you should use the
stopPropagation event modifier like this:
<button on:click|stopPropagation={() => (isOpen = false)} class="p-4 rounded-full absolute bottom-[100%] right-[100%] bg-emerald-950" >
<svg>...</svg>
</button>
and for the outer button just set isOpen to true.
<button on:click={() => (isOpen = true)}>