I am quite new to JS promises and while working with them I got into a problem. First, let me explain what I am trying to achieve and what is getting achieved. I was creating a function that creates a file type input element that accepts images and then listens to onchange event handler on that element. When the user selects an image I call .then()
method to resolve a promise which uses FileReader()
to extract base64 of the image. What happens is that when I try to add the image again using that function the older image gets added as well. This repetition keeps on happening with the amount of older images already added. This is my code so far,
const imageInput = document.createElement('input');
imageInput.setAttribute('accept', 'image/*');
imageInput.setAttribute('type', 'file');
imageInput.onchange = () => {
const imageFile = imageInput.files[0];
if (/^image//.test(imageFile.type))
{
getBase64(imageFile).then(
data => insertImage(data)
);
}
else
{
console.warn('You could only upload images.');
}
};
function clearImageInput() {
imageInput.value = '';
}
function handleImage(){
clearImageInput();
imageInput.click();
}
function getBase64(file)
{
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
function insertImage(base64_string)
{
// This function basically inserts the image into the Quill Editor.
// But if I insert an Image A first and then try to insert Image B
// Meaning basically I only called handleImage() twice but
// It will insert in this pattern:
// -> Image A
// -> Image A + Image B
// Follwing click handler is was being executed more than once
// I added .unbind() before .click() to resolve the issue
$(".some-btn").click(function(){
var altText = "My Text";
var titleText = "My Text";
if(altText != "" && titleText != "")
{
let range = quill.getSelection(true);
quill.insertText(range.index, '
', Quill.sources.USER);
quill.insertEmbed(range.index + 1, 'image', {
alt: altText,
url: baseString,
title: titleText
}, Quill.sources.USER);
quill.setSelection(range.index + 2, Quill.sources.SILENT);
}
else
{
alert("Input the details!");
}
});
}
The code above is basically is used to overwrite the default methods of the WYSIWYG HTML editor. So when I click on the add image button on the editor I call handleImage()
function which then processes image upload. Now, this scenario is actually happening: When I add an image a the function works perfectly fine and gives me the base64 of that image which in turn I insert into the editor. But when I try to add image b First the function will give base64 of image a then it'll give the base64 of image b. The function basically duplicates itself. And this problem keeps on duplicating when I add more images. As far as the calling of this code is concerned it is called as follows:
var toolbarModule = quill.getModule('toolbar');
toolbarModule.addHandler('image', handleImage);
In above example I am adding an event handler to Quill which is an online JS HTML editor.
question from:
https://stackoverflow.com/questions/65921423/js-filereader-duplicating-itself-with-previous-values 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…