This exercise will demonstrate how to store a File object. The following demo includes a file uploader and an identifier that defaults to a random UUID. After you click 'Store File', you should observe logs in the browser console that the File record was stored; you can expand the JSON object returned in the console to inspect its content.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Store File</title> <!-- Set the page title -->
</head>
<body>
<!-- Add the UI elements to the page -->
<div style = "margin-top: 7px;">
<input id = "input-1" size = "35" type = "text" placeholder = "Identifier (ID)">
</div>
<div style = "margin-top: 7px;">
<input id = "input-2" type = "file" />
</div>
<div style = "margin-top: 20px;">
<button id = "button-1">Store File</button>
</div>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-persist@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
const input1 = document.getElementById('input-1');
const input2 = document.getElementById('input-2');
const button1 = document.getElementById('button-1');
input1.value = crypto.randomUUID(); // Generate random UUID for the identifier.
// Listener for button click event.
button1.addEventListener('click', () => {
window.javaika.webPersist.storeFileRecord(input1.value, input2.files[0]);
});
// Callback event after file storage.
document.addEventListener('javaika.webPersist.fileRecordStored', function(event) {
const detail = event.detail; // Initialise.
console.log("File record was stored:"); console.log(detail);
});
</script>
</body>
</html>
Next capability: Discuss how to fetch the stored File record from IndexedDB.