Closed mustafa0x closed 1 month ago
Hello.
I don't think so but you can make your own really easily use sql.js https://github.com/sql-js/sql.js
Thanks @vwh. It'll work if a method (similar to loadDatabase) is added to window
(or globalThis
) that accepts bytes. Then I could use in the following manner.
<iframe id="sql-viewer" src="sqlviewer.html"></iframe>
<script>
const iframe = document.getElementById('sql-viewer')
iframe.contentWindow.loadDatabaseBytes(Uint8Array)
</script>
(Side note: this would be easier if vite was configured to only create a single bundle.)
Sorry for late response.
That's a nice feature for sure. I will try to make it soon or if you want to add it your self feel free to do so would be a great addition
@mustafa0x I have added it!
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SQLite Viewer</title>
<style>
iframe {
width: 100%;
height: 500px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<iframe id="sql-viewer" src="https://sqlite3.online"></iframe>
<script>
// Function to fetch the database file and convert it to Uint8Array
async function fetchDatabaseFile(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Failed to fetch database file");
}
const arrayBuffer = await response.arrayBuffer();
return new Uint8Array(arrayBuffer); // Convert to Uint8Array
} catch (error) {
console.error("Error fetching the database file:", error);
return null;
}
}
const iframe = document.getElementById("sql-viewer");
iframe.onload = async () => {
const win = iframe.contentWindow;
// Fetch the static database file from the same host
const databaseFileBytes = await fetchDatabaseFile("./chinook.db");
if (databaseFileBytes) {
// Sending the database file bytes to the iframe
win.postMessage(
{
type: "invokeLoadDatabaseBytes",
bytes: databaseFileBytes, // Send Uint8Array to iframe
},
"https://sqlite3.online"
);
} else {
console.error("Failed to load the database file");
}
};
// Listen for responses from the iframe
window.addEventListener("message", (event) => {
if (event.origin !== "https://sqlite3.online") return;
if (event.data.type === "loadDatabaseBytesSuccess") {
console.log("Successfully loaded database bytes in the iframe");
}
if (event.data.type === "loadDatabaseBytesError") {
console.error(
"Failed to load database bytes in the iframe:",
event.data.error
);
}
});
</script>
</body>
</html>
Awesome, thank you so much!
Hi, awesome project!
Question: I have a svelte app, and would like to embed this sqlite viewer. Is there a package that I can add that exposes an API that accepts a binary blob (Uint8Array)?