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