So, I am making flashcards app on web, and its my first time using IndexedDB and BLOBs. At first i tried to do something by myself but it was total crap and then with some help of ai i came up with something like this
<body>
<div class="cards">
<div class="card-front">
</div>
<div class="card-back">
</div>
</div>
<div class="difficulties">
<div class="first-stage">
<div class="cards-left">
...
</div>
<button class="show-answer">Show answer</button>
</div>
<div class="second-stage" style="display: none;">
...
</div>
</div>
It is my html and i have such script to it
<script>
let db;
const dbName = "FlashcardsDB";
const dbVersion = 4;
const request = indexedDB.open(dbName, dbVersion);
request.onerror = (event) => {
console.error("Database error: " + event.target.error);
};
request.onsuccess = (event) => {
db = event.target.result;
loadCards();
};
const cardFront = document.querySelector('.card-front');
const cardBack = document.querySelector('.card-back');
const firstStage = document.querySelector('.first-stage');
const secondStage = document.querySelector('.second-stage');
const showAnswerBtn = document.querySelector('.show-answer');
const difficultyBtns = document.querySelectorAll('.second-stage button');
let cards = [];
let currentCardIndex = 0;
function loadCards() {
const transaction = db.transaction(["cards"], "readonly");
const objectStore = transaction.objectStore("cards");
const request = objectStore.getAll();
request.onsuccess = (event) => {
cards = event.target.result;
if (cards.length > 0) {
displayCard(cards[currentCardIndex]);
} else {
console.log("No cards found");
cardFront.innerHTML = "No cards available";
cardBack.innerHTML = "";
}
};
request.onerror = (event) => {
console.error("Error loading cards:", event.target.error);
cardFront.innerHTML = "Error loading cards";
cardBack.innerHTML = "";
};
}
function parseContent(content) {
return content.replace(/^"|"$/g, '').replace(/""/g, '"');
}
function displayCard(card) {
cardFront.innerHTML = parseContent(card.front_content);
cardBack.innerHTML = parseContent(card.back_content);
cardBack.style.display = 'none';
firstStage.style.display = 'block';
secondStage.style.display = 'none';
loadImages();
}
function loadImages() {
const images = document.querySelectorAll('img');
console.log('Number of images found:', images.length);
images.forEach((img, index) => {
const fileName = img.getAttribute('src');
console.log(`Image ${index + 1} filename:`, fileName);
const transaction = db.transaction(["images"], "readonly");
const objectStore = transaction.objectStore("images");
const request = objectStore.index("file_name").get(fileName);
request.onsuccess = (event) => {
const imageData = event.target.result;
console.log(`Image data for ${fileName}:`, imageData);
if (imageData && imageData.image_data) {
let blob;
if (imageData.image_data instanceof Blob) {
blob = imageData.image_data;
} else if (imageData.image_data instanceof ArrayBuffer) {
blob = new Blob([imageData.image_data], { type: imageData.mime_type });
} else if (imageData.image_data.data) {
blob = new Blob([imageData.image_data.data], { type: imageData.mime_type });
} else {
console.error(`Unable to create Blob for ${fileName}`);
return;
}
if (img.src.startsWith('blob:')) {
URL.revokeObjectURL(img.src);
}
img.src = URL.createObjectURL(blob);
console.log(`Image ${fileName} loaded successfully`);
img.onload = function() {
URL.revokeObjectURL(this.src);
};
} else {
console.error(`No image data found for ${fileName}`);
}
};
request.onerror = (event) => {
console.error(`Error loading image ${fileName}:`, event.target.error);
};
});
}
showAnswerBtn.addEventListener('click', () => {
cardBack.style.display = 'flex';
firstStage.style.display = 'none';
secondStage.style.display = 'flex';
});
difficultyBtns.forEach(btn => {
btn.addEventListener('click', () => {
currentCardIndex = (currentCardIndex + 1) % cards.length;
displayCard(cards[currentCardIndex]);
});
});
document.addEventListener('DOMContentLoaded', () => {
});
</script>
It pulls out data correctly i assume as those are my console logs
Number of images found: 2
test:198 Image 1 filename: drawing-964f20c9029e0c58c36ace472991e210b0239061.png
test:198 Image 2 filename: paste-04c433989b80d578328a067fbfefd4b579e4c82c.png
test:204 Image data for drawing-964f20c9029e0c58c36ace472991e210b0239061.png:
{image_id: 35, image_data: {…}, mime_type: 'image/png', file_name: 'drawing-
964f20c9029e0c58c36ace472991e210b0239061.png', category: 'Nadciśnienie tętnicze'}
test:221 Image drawing-964f20c9029e0c58c36ace472991e210b0239061.png loaded successfully
test:204 Image data for paste-04c433989b80d578328a067fbfefd4b579e4c82c.png:
{image_id: 71, image_data: {…}, mime_type: 'image/png', file_name: 'paste-
04c433989b80d578328a067fbfefd4b579e4c82c.png', category: 'Nadciśnienie tętnicze'}
test:221 Image paste-04c433989b80d578328a067fbfefd4b579e4c82c.png loaded successfully
Here is the thing, my front_content and back_content is stored as a html code
front_content: '"<img src=""drawing-964f20c9029e0c58c36ace472991e210b0239061.png"" back_content: '"<img src=""paste-04c433989b80d578328a067fbfefd4b579e4c82c.png"">"'
and it should be propagated with images from indexedb that has same names. My code generates such html code instead
<div class="cards"> <div class="card-front"><img src="blob:http://localhost:3000/c87ee4e0-9a4d-481e-87ff-fc48122ed507" class="drawing"></div> <div class="card-back" style="display: none;"><img src="blob:http://localhost:3000/6d68e5dc-4a90-4106-8fba-9e0c73d756fc"></div> </div>
Only thing rendered on my page is image placeholder, please help.