Javascript html5 how to convert binary data into string - javascript

var reader = new FileReader();
var rawData = new ArrayBuffer();
//console.log(1);
reader.onload = function(e) {
var rawData = e.target.result; //binary data
console.log(rawData);
}
I want to see explicitly the binary raw data as a text string, is that possible?, cause the only thing i see when logging is:
ArrayBuffer {}

You can try
console.log(String.fromCharCode.apply(null, new Uint16Array(rawData)));

This is what'I've needed:
reader.readAsBinaryString(file);
then the data is available raw

Related

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);
};

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);
}

Getting the binary content of a BLOB

I know that, in order to convert a BLOB object to a readable format (URL) in Javascript, I should use the createObjectURL() method, right ?
Example :
var blob = new Blob(["Example"], { type: "text/plain" });
url = window.URL.createObjectURL(blob);
My question is:
Is it possible to get the raw binary content of a BLOB ? so, I can get something like :
"01000101 01111000 01100001 01101101 01110000 01101100 01100101" // "Example" in binary .
Convert the blob to an ArrayBuffer (see 2 methods). Create an ArrayBufferView (Int8array in this case), spread it into an array, and then map the view to the binary representation of each number using Number.toString() with a radix of 2 - .toString(2).
Method 1 - Use the Blob.arrayBuffer() instance method to get a promise that resolves with the ArrayBuffer:
const blobToBinary = async (blob) => {
const buffer = await blob.arrayBuffer();
const view = new Int8Array(buffer);
return [...view].map((n) => n.toString(2)).join(' ');
};
const blob = new Blob(["Example"], { type: "text/plain" });
blobToBinary(blob).then(console.log);
Method 2 - Extract the data from the blob using a FileReader. To get an ArrayBuffer use FileReader.readAsArrayBuffer().
const blob = new Blob(["Example"], { type: "text/plain" });
const reader = new FileReader();
reader.addEventListener("loadend", function() {
const view = new Int8Array(reader.result);
const bin = [...view].map((n) => n.toString(2)).join(' ');
console.log(bin);
});
reader.readAsArrayBuffer(blob);
You can use a FileReader to get the contents of the BLOB as a byte array:
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onloadend = (event) => {
// The contents of the BLOB are in reader.result:
console.log(reader.result);
}
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
https://developer.mozilla.org/en-US/docs/Web/API/Blob#Example_for_extracting_data_from_a_Blob

Change string encoded in win1250 to utf8

I'm loading a file that has encoding win1250, but when I load it, it has characters like p��jemce instead of příjemce (note diacritics.)
I'd like to change the encoding FROM win1250 TO UTF8.
I managed to do it in PHP with the following code
$content = iconv('windows-1250', 'UTF-8', $content);
but I am unable to do it in Javascript. I need to do this encoding on client without sending it to server (so I can't use PHP as "encoding proxy")
I've tried to use libraries iconv-lite and text-encoding (on NPM) like this
var reader = new FileReader();
reader.onload = () => {
var data = reader.result;
// iconv-lite
var buf = iconv.encode(data, 'win1250');
var str1 = iconv.decode(new Buffer(buf), 'utf8');
// text-encoding
var uint8array = new TextEncoder('windows-1250').encode(data);
var str2 = new TextDecoder('utf-8').decode(uint8array);
console.log(str1);
console.log(str2);
};
reader.readAsText(file);
But neither has actually correctly changed the encoding. Is there anything I'm missing?
I think you could simply try reader.readAsArrayBuffer
var reader = new FileReader();
reader.onload = () => {
var buf = reader.result;
// iconv-lite
var str1 = iconv.decode(buf, 'win1250');
// text-encoding
var str2 = new TextDecoder('windows-1250').decode(buf);
console.log(str1);
console.log(str2);
};
reader.readAsArrayBuffer(file);
If readAsArrayBuffer should get the binary data directly.
I don't have the entire dev environment so the above code is not fully tested, hope it could at least be inspirational.

Types of conversion of images

I am converting images to Base64 and sending them to websocket.
using javacript:
var reader = new FileReader();
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
imageMessage = aImg.src;
};
}(image))
var ret = reader.readAsDataURL(file);
In socket server I get the string:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4RFGRXhpZgAATU0AKgAAAAgACAEyAAIAAAAUAAAIegE7AAIAAAAHAAAIjkdGAAMAAAABAAMAAEdJAAMAAAABADIAAIKYAAIAAAAhAAAIlodpAAQAAAABAAAIuJydAAEAAAAOAAARMOocAAcAAAgMAAAAbgAAAAAc6gAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA......
So as much as the image size is bigger, the string will be longer.
And the socket is crashing.
My question is how to convert the image to small and simple string.

Categories