We Keep Coding

Excel binary data to fileReader

I have a binary string (from an REST API) that is the content of a Excel file.
PK\x03\x04\x14\x00\x06\00\x00\x00���N�0\x10E�H�C�-#\b5��\x12*Q>�ēƪc[�ii����\x10B�\x15j7�\x12��{2��h�nm���ƻR\f����U^\x1B7/���%�\x17\x19�rZY�\x14\x1B#1\x19__�f�\x00�q��R4D�AJ�\x1Ah\x15\x16>����V\x11�ƹ\f�Z�9����NV ...
What I want is to put this content in a FileReader object. I tried to convert the content to blob and to use readAsBinaryString but it doesn't work.
Maybe I missed something
However, when I use an input type=file, it's works with this example
$("#input").on("change", (e) => {
selectedFile = e.target.files[0];
});
let fileReader = new FileReader();
fileReader.readAsBinaryString(selectedFile);
fileReader.onload = (event)=>{
let data = event.target.result;
let workbook = XLSX.read(data,{type:"binary"});
}
What I would like is for selectedFile to reflect the binary string and not have to go through an input type=file
Thanks for your help

You can create a Blob object from the binary string, then create a File object from the Blob and finally, create a FileReader object from the File object.
var binaryString = "PK\x03\x04\x14\x00\x06\00\x00\x00���N�0\x10E�H�C�-#\b5��\x12*Q>�ēƪc[�ii����\x10B�\x15j7�\x12��{2��h�nm���ƻR\f����U^\x1B7/���%�\x17\x19�rZY�\x14\x1B#1\x19__�f�\x00�q��R4D�AJ�\x1Ah\x15\x16>����V\x11�ƹ\f�Z�9����NV ...";
// create a Blob object
var blob = new Blob([binaryString], { type: "application/vnd.ms-excel" });
// create a File object from the Blob
var file = new File([blob], "file.xlsx");
// create a FileReader object
var reader = new FileReader();
// use the readAsArrayBuffer method to read the file
reader.readAsArrayBuffer(file);
// when the reading is done, log the result
reader.onloadend = function () {
console.log(reader.result);
};

FileReader: DOMException, Unable to convert blob to arrayBuffer again and again

I am using fileReader to convert a blob object into arrayBuffer in javascript/React.
then convert the array buffer into blob using
blob = new Blob([arrayBuffer]);
But Now, when I again read the arrayBuffer from last created Blob,
I am getting error:
DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired
Sample Code:
let bufferChunk = await convertBlobToBuffer(blobChunk); // get buffer of given slice of file
const blobChunk = new Blob([bufferChunk]); // create blob of buffer bcozz blob does not take much space as taken by arrayBuffer :P
bufferChunk = await convertBlobToBuffer(blobChunk); //This causing ERROR
const convertBlobToBuffer = blob => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = err => reject(err || reader.error);
reader.readAsArrayBuffer(blob);
});
};

How do I get base 64 encoding of a file that use Windows-1251

I have a file uploader input, where I accept a file, convert it to base 64 string, and send the payload to a rest api.
However, when I was encoding base64 for utf-8 files, it was working fine. But if I try to get base64 strings of "window-1251" files, it is not converted to a string properly, and the api throws error instead because the base64 string is not valid content.
So my question is how do I get base64 string of a file that uses window-1251 for encoding?
var reader2 = new FileReader();
reader2.readAsDataURL(file);
reader2.onload = function (e) {
var sContentStream = e.target.result;}

Sorry, but the premise makes no sense.
FileReader.readAsDataURL will always return a valid base64 string from what you gave to it => binary data.
The fact that these bytes represent a text file, with a given encoding is simply ignored by the algorithm.
const rand_data = crypto.getRandomValues(new Uint8Array(50));
const blob = new Blob([rand_data]);
const reader = new FileReader();
reader.onload = e => {
const dataURL = reader.result
const base64 = dataURL.slice(dataURL.indexOf(',')+1);
console.log(base64);
console.log(atob(base64)); // would throw if invalid data
};
reader.readAsDataURL(blob);
So you are looking at the wrong end of the problem: The consumer may have issues with reading windows-1251 encoded text files, but that's not FileReader's fault.
Now, if you are willing to do the conversion from this encoding to UTF-8 in the browser, then that's still doable, but you's need a way to know which encoding the file you've been given is in.
const win_1251 = new Blob([Uint8Array.from([200])]); // И in windows-1251
// to prove it's not UTF-8
readUTF8Text(win_1251); // �
const reencode_reader = new FileReader();
reencode_reader.onload = e => {
const utf_8_arr = new TextDecoder('windows-1251')
.decode(new Uint8Array(reencode_reader.result));
const utf_8 = new Blob([utf_8_arr], {type: 'text/plain'})
makeDataURL(utf_8);
readUTF8Text(utf_8); // И
};
reencode_reader.readAsArrayBuffer(win_1251);
function makeDataURL(blob) {
const reader = new FileReader();
reader.onload = e => {
console.log(reader.result);
};
reader.readAsDataURL(blob);
}
function readUTF8Text(blob) {
const reader = new FileReader();
reader.onload = e => {
console.log(reader.result);
};
reader.readAsText(blob);
}

How can I console.log() a Blob object?

I have a Blob object I want to inspect by logging its value. All I can see are type and size properties. Is there a way to do this?

Basic example on using a FileReader to look at the content in a blob
var html= ['<a id="anchor">Hello World</a>'];
var myBlob = new Blob(html, { type: 'text/xml'});
var myReader = new FileReader();
myReader.onload = function(event){
console.log(JSON.stringify(myReader.result));
};
myReader.readAsText(myBlob);

First of all we should create a function for converting blob to base64:
const blobToBase64 = blob => {
const reader = new FileReader();
reader.readAsDataURL(blob);
return new Promise(resolve => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
Then we can use this function to use it for console.log:
blobToBase64(blobData).then(res => {
console.log(res); // res is base64 now
// even you can click on it to see it in a new tab
});

HTML5 / Javascript - DataURL to Blob & Blob to DataURL

I have a DataURL from a canvas that shows my webcam. I turn this dataURL into a blob using Matt's answer from here: How to convert dataURL to file object in javascript?
How do I convert this blob back into the same DataURL? I've spent a day researching this and I'm astouned this isn't documented better, unless I'm blind.
EDIT:
There is
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
but it only returns a really short URL that seems to point at a local file, but I need to send the webcam data over a network.

Use my code to convert between dataURL and blob object in javascript. (better than the code in your link.)
//**dataURL to blob**
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
//**blob to dataURL**
function blobToDataURL(blob, callback) {
var a = new FileReader();
a.onload = function(e) {callback(e.target.result);}
a.readAsDataURL(blob);
}
//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
console.log(dataurl);
});

Here is a Promise-based Typescript version with proper error checking.
function blobToDataURL(blob: Blob): Promise<string> {
return new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onload = _e => resolve(reader.result as string);
reader.onerror = _e => reject(reader.error);
reader.onabort = _e => reject(new Error("Read aborted"));
reader.readAsDataURL(blob);
});
}

Nevermind, it ended up working after sticking to the instructions in this thread Display image from blob using javascript and websockets and making my server forward raw (yet) unmodified BinaryWebSocketFrames.
Now I'm still fighting bad performance of the canvas (<1fp) but that might become subject of a new thread.

I like one-liners, so here's a Promise-based one to convert a blob to a data URL:
let blob = ...;
let dataUrl = await new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);
Or, as a function:
function blobToDataUrl(blob) {
return new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);
}
let dataUrl = await blobToDataUrl(blob);

DataURL to Blob has a better solution:
const dataURL = "dataURL string...";
const res = await fetch(dataURL);
const blob = await res.blob();