How do I INSERT an image as a BLOB INTO SQLite using SQL.js running from file:///?

The issue names the inline HTML/JavaScript example and the older js/sql.js build, but no repository file or test is identified. Start by reproducing the file:// example with the cited SQL.js build; done would require a confirmed usage explanation or a narrowly scoped documentation change, neither of which is specified here.

LOVASOA,

First and foremost thank you very much for all your hardwork maintaining SQL.js.

I just wanted to bring your attention to the stackoverflow question that I posted yesterday.

I uploaded a .zip file with the contents of this file and the sql.js file I AM using to:
https://fastupload.io/en/Stpx1gnfnmmieaT/file

I entered a stackoverflow.com issue on October 1, 2022:
https://stackoverflow.com/questions/73921879/how-do-i-insert-an-image-as-a-blob-into-sqlite-using-sql-js-running-from-file

I entered this github.com issue on October 2, 2022:
https://github.com/sql-js/sql.js/issues/531

I found a relevant project input by LOVASOA, maintainer of SQL.js:
https://github.com/lovasoa/bin2png

Someone edited my "THANK YOU" message from the comment but please know I very much appreciate you and all of you out there who help us all on your time with your incredible expertise and HighLY INTELLECTUAL expertise.

I've copied the stackoverflow message and code here for you:

==================================================================
How do I INSERT an image as a BLOB INTO SQLite using SQL.js running from file:///?

I AM using an older version of SQL.js, https://raw.githubusercontent.com/lovasoa/sql.js/master/js/sql.js , BeCAUSE I AM running from file:/// without a localhost server and the latest version requires downloading the WASM files from a server. IN THE STACKOVERFLOW.com RUN CODE SNIPPET SQL.js is throwing an "ReferenceError: SQL is not defined" exception. It works when the src is downloaded locally. I uploaded a .zip file with the contents of this file and the sql.js file I AM using to:
https://fastupload.io/en/Stpx1gnfnmmieaT/file . I have a Base64 encoding/decoding solution working but cannot get a BLOB solution working.

<title>JAVASCRIPT FileReader to SQL.JS to INSERT IMAGE AS BLOB to SQLITE DATABASE TEST</title> <script src="https://raw.githubusercontent.com/lovasoa/sql.js/master/js/sql.js"></script> <script> /*"use strict"; REFERENCE: https://www.w3schools.com/js//js_strict.asp */ "use strict"; document.getElementById("inputTypeFile").addEventListener('change', inputFile); function inputFile() { if (!this.files.length) { imageBlob.innerHTML = "No files selected!"; imageSize.innerHTML = ""; } else { /* https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications */ const fileReader = new FileReader(); let file = new Blob(); file = inputTypeFile.files[0]; const img = document.createElement("img"); img.src = URL.createObjectURL(file); img.height = 60; document.getElementById("imageBlob").appendChild(img); document.getElementById("imageSize").innerHTML = file.size.toString() + " bytes"; /* I AM running locally at file:/// offline in web browser using older version of sql.js so that no localhost server is required to download wasm files https://raw.githubusercontent.com/lovasoa/sql.js/master/js/sql.js TRIED USING fileReader.result directly but NO JOY returns no such column: object ArrayBuffer error. TRIED USING fileReader.result with new Uint8Array like I did to create a new SQL.Database but NO JOY sql.js throws an 'abort' error. TRIED USING inputTypeFile.files[0] directly but NO JOY returns no such column: object File error. TRIED USING inputTypeFile.files[0] with new Uint8Array like I did to create a new SQL.Database but NO JOY sql.js throws an 'abort' error. TRIED USING readAsArrayBuffer array buffer directly but NO JOY returns no such column: object ArrayBuffer error. TRIED USING readAsArrayBuffer with new Uint8Array like I did to create a new SQL.Database but NO JOY sql.js throws an 'abort' error. TRIED USING readAsDataUrl using split to include OnLY PERTINENT BASE64 information but NO JOY Error: near "ÿØÿà": syntax error. NO ANSWER TO INSERT BLOB FOUND. OnLY SOLUTIONS TO INSERT IMAGE AUDIO VIDEO INTO SQL.JS SQLite DB USING BASE64 BUT NO INSERT IMAGE AS BLOB SOLUTION. https://stackoverflow.com/questions/9917677/inserting-and-displaying-image-as-blob-file-in-sqlite https://stackoverflow.com/questions/38561977/insert-and-retrieve-blob-image-in-sqlite-with-html5-and-javascript https://stackoverflow.com/questions/23754590/trouble-reading-sqlite3-database-columns-of-type-blob-with-sql-js https://stackoverflow.com/questions/48295641/invalidcharactererror-string-contains-an-invalid-character-while-decoding-base https://stackoverflow.com/questions/38058023/load-sql-db-blob-image-into-a-webpage https://stackoverflow.com/questions/934012/get-image-data-url-in-javascript https://stackoverflow.com/questions/1207190/embedding-base64-images https://caniuse.com/atob-btoa https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings https://www.youtube.com/watch?v=HRbTrensuiY https://www.youtube.com/watch?v=wuUbE7MfgYE https://www.youtube.com/watch?v=HgJOjB8-e8w */ fileReader.onload = function() { window.URL.revokeObjectURL(this.src); // without readAsArrayBuffer(file) or readAsDataUrl(file); //const binaryData = fileReader.result; //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', [object ArrayBuffer]) // Error: no such column: object ArrayBuffer // // without readAsArrayBuffer(file) or readAsDataUrl(file); //const arrayBuffer = fileReader.result; //let binaryData = new Uint8Array(arrayBuffer); //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', 255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,72,0,72,0,0,255 ... CSV INTEGER DATA here ... 239,159,208,44,17,100,99,127,55,203) // Error: // // without readAsArrayBuffer(file) or readAsDataUrl(file); //const binaryData = inputTypeFile.files[0]; //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', [object File]) // Error: no such column: object File // // without readAsArrayBuffer(file) or readAsDataUrl(file); //const fileObject = inputTypeFile.files[0]; //let binaryData = new Uint8Array(fileObject); //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', ) // Error: near ")": syntax error // // with readAsArrayBuffer(file) //const arrayBuffer = fileReader.result; //let binaryData = arrayBuffer; //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', ) // Error: no such column: object ArrayBuffer // // with readAsArrayBuffer(file) //const arrayBuffer = fileReader.result; //let binaryData = new Uint8Array(arrayBuffer); //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', 255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,72,0,72,0,0,255,254,0 ... CSV INTEGER DATA here ... 239,159,208,44,17,100,99,127,55,203 // abort() at Ja@file:///.../sql.js:30:21 // la@file:///.../sql.js:439:288 // Ha@file:///.../sql.js:17:153 // Zc@file:///.../sql.js:328:300 // QD@file:///.../sql.js:368:213720 // SD@file:///.../sql.js:368:226160 // kl@file:///.../sql.jssql.js:372:45431 // jc@file:///.../sql.jssql.js:360:11194 // ic@file:///.../sql.jssql.js:360:10358 // Pm@file:///.../sql.js:372:115287 // Rn@file:///.../sql.js:372:204135 // qn@file:///.../sql.js:372:149679 // _m@file:///.../sql.js:372:121532 // mf@file:///.../sql.js:360:106421 // ay@file:///.../sql.js:380:102756 // lf@file:///.../sql.js:360:104958 // gf@file:///.../sql.js:360:103469 // ef@file:///.../sql.js:360:101271 // @file:///.../sql.js line 21 > eval:1:124 // Qd.prototype.run@file:///.../sql.js:446:302 // insertImageIntoDatabase@file:///../base64EncodingDecodingImageExampleCode.html:116:21 // inputFile/fileReader.onload@file:///.../base64EncodingDecodingImageExampleCode.html:78:30 // EventHandlerNonNull*inputFile@file:///.../base64EncodingDecodingImageExampleCode.html:61:6 // EventListener.handleEvent*@file:///.../base64EncodingDecodingImageExampleCode.html:30:45 // If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information. // // with readAsDataUrl(file); //let base64EncodedData = fileReader.result.split("base64,")[1]; //const binaryData = window.atob(base64EncodedData); //insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', ÿØÿàJFIFHHÿþj...BINARY DATA here ...sÚÊéc:ä<ÅîÍÂÎmMäè)) // Error: near "ÿØÿà": syntax error // // with readAsDataUrl(file); let base64EncodedData = fileReader.result.split("base64,")[1]; let atobData = window.atob(base64EncodedData); let binaryData = new Uint8Array(atobData); insertImageIntoDatabase(1, file.name, file.size, file.type, binaryData); // sql = INSERT INTO file VALUES (1, 'REMIND.me.ONE.MORE.GAIN.DID.ANYONE.EVER.LOVE.YOU.LIKE.THIS.BEFORE.LOVE.TRUTH.jpg', 1277618, 'image/jpeg', ) // Error: near ")": syntax error } fileReader.onerror = function (event) { //throw fileReader.error https://stackoverflow.com/questions/71855251/javascript-filereader-onerror-event-how-to-find-out-what-the-error-was alert("File was not read successfulLY."); } //fileReader.readAsArrayBuffer(file); fileReader.readAsDataURL(file); } } function insertImageIntoDatabase(id, name, size, type, binaryData) { try { const sqliteDatabase = new SQL.Database(); let sql = "CREATE TABLE file (id integer PRIMARY KEY ASC, name text, size integer, type text, bytes blob)"; sqliteDatabase.exec(sql); sql = "INSERT INTO file VALUES (" + id.toString() + ", " + "'" + name.replace("'", "").replace('"', "") + "', " + size.toString() + ", " + "'" + type + "', " + binaryData + ")"; alert(sql); sqliteDatabase.run(sql); sql = "SELECT id, name, size, type, bytes FROM file ORDER BY id ASC"; let result = sqliteDatabase.exec(sql); let numberOfRows = result[0].values.length; alert(numberOfRows); if(0 == numberOfRows) { alert("Row Count: 0."); } else { const img = document.createElement("img"); img.src = URL.createObjectURL(result[0].values[4]); img.height = 60; document.getElementById("imageBlobFromSQLiteDatabase").appendChild(img); document.getElementById("imageIdFromSQLiteDatabase").innerHTML = result[0].values[0].toString(); document.getElementById("imageNameFromSQLiteDatabase").innerHTML = result[0].values[1].toString(); document.getElementById("imageTypeFromSQLiteDatabase").innerHTML = result[0].values[2].toString(); document.getElementById("imageSizeFromSQLiteDatabase").innerHTML = result[0].values[3].toString() + " bytes"; } } catch (exception) { alert(exception); } } </script> ================================================================== The code must run offline so I am using Javascript's FileReader object using an older version of sql.js so that no localhost server is required to download wasm files.

fileReader.result directly but returns no such column: object ArrayBuffer error.
fileReader.result with new Uint8Array to create a new SQL.Database but sql.js throws an 'abort' error.
inputTypeFile.files[0] directly but returns no such column: object File error.
inputTypeFile.files[0] with new Uint8Array to create a new SQL.Database but sql.js throws an 'abort' error.
readAsArrayBuffer array buffer directly but returns no such column: object ArrayBuffer error.
readAsArrayBuffer with new Uint8Array to create a new SQL.Database but sql.js throws an 'abort' error.
readAsDataUrl using split to include only pertinent BASE64 information but Error: near "ÿØÿà": syntax error.

Only solutions I can find are using Base64 or Base62 data URI encoding.

THE SPIRIT OF TRUTH FLOWs here ...

RespectfulLY,

John Edgar Flaherty IV
TRUTH
"MAKE A WAY"