Home/ Questions/Q 8894983
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T23:39:07+00:00

I have been playing with the FileSystem API for JavaScript, I already succeeded at

  • 0

I have been playing with the FileSystem API for JavaScript,
I already succeeded at store the file to the file storage provided by the API,

I tried to read the file that was stored, which is a JPG image,
and read it using the FileReader with the readAsDataURL method,
so I can display it in the SVG using the xlink:href attribute,

But the image(SVG image) won’t display the image (only blank),
when I use the “Inspect Element” provided by Chrome,
I saw the xlink:href attribute is filled with this value:

"data:image/jpeg;base64,AAEAAAD/////AQAAAAAAAAAMAgAAAFZOZXREaXNwbGF5U3lzdGVtcy5TaGFyZWQsIFZlcnNpb249NC4xLjQ2OTUuMTY5NDMsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAME5ldERpc3BsYXlTeXN0ZW1zLlN5bmNocm9uaXphdGlvbi5SZW1vdGVGaWxlRGF0YQQAAAAPQ3JlYXRpb25UaW1lVXRjEExhc3RXcml0ZVRpbWVVdGMEU2l6ZQxSZWxhdGl2ZVBhdGgAAAABDQ0JAgAAAKrTBCT9is9IV01fnlvSy0h16AwAAAAAAAYDAAAACkRlc2VydC5qcGcLAA ..."

(the rest is a very long sequence of A‘s)

I don’t know what is wrong,

Here is the code I use to read the file and display the element:

var element; 
element= document.createElementNS("http://www.w3.org/2000/svg", "image");
element.setAttribute("id", "img1");
element.setAttribute("x", "30");
element.setAttribute("y", "250");
element.setAttribute("width", "150");
element.setAttribute("height", "150");

fs.root.getFile("Desert.jpg", {}, function (fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function (e) {
        element.setAttribute("xlink:href", e.target.result);
        };

        reader.readAsDataURL(file);
    }, FileExceptions);
},FileExceptions); //error callback

return element;

The raw string uri before encoded with btoa():

data:image/jpeg;base64,AAEAAAD/////AQAAAAAAAAAMAgAAAFZOZXREaXNwbGF5U3lzdGVtcy5TaGFyZWQsIFZlcnNpb249NC4xLjQ2OTUuMTY5NDMsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAME5ldERpc3BsYXlTeXN0ZW1zLlN5bmNocm9uaXphdGlvbi5SZW1vdGVGaWxlRGF0YQQAAAAPQ3JlYXRpb25UaW1lVXRjEExhc3RXcml0ZVRpbWVVdGMEU2l6ZQxSZWxhdGl2ZVBhdGgAAAABDQ0JAgAAAKrTBCT9is9IV01fnlvSy0h16AwAAAAAAAYDAAAACkRlc2VydC5qcGcLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA...AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=

where the ... indicates that the sequence of A‘s is shortened because it was too long.

This is the code for the inserting/creating the file to the file system that I insert in the beginning:

function InsertFile(fileName: string, blob:Blob) {
    fs.root.getFile(fileName, { create: true /*exclusive: true*/ }, function (fileEntry) { 
        //change the exclusive to true, this is for debugging only
        fileEntry.createWriter(function (fileWriter) {
            fileWriter.onwriteend = function (e) { InfoLog("Write Completed"); };
        fileWriter.onerror = function (e) { InfoLog("Write Failed \r\n" + e.toString()); };
        fileWriter.write(blob);
        },FileExceptions);
    }, FileExceptions);
}

the fileName contains the “Desert.jpg”
I already checked it and it’s true
I got the blob from the server,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Problems solved..apparently there’s nothing wrong with the Blob or the code of the script,
    and the file is actually saved correctly in the file system storage API of HTML5,

    the problem was that the Blob was indeed corrupted because it was the server (in .net) that is failed to convert the file to byte() to be sent to the client(html5),
    after I change the conversion method in the server, the image can be loaded properly and correctly

    • 0