We Keep Coding

Can I use blobs to render Word documents (.doc / .docx) in the browser?

I want to render .doc files after the user upload the files in the browser
In my web app built with React, I have successfully rendered .pdf files using a blob which looks something like this
const someFileFunction = (file) => {
let xhr = new XMLHttpRequest(), resStatus;
xhr.open('GET', file);
xhr.onreadystatechange = someFunction;
xhr.responseType = 'blob';
xhr.send();
function someFunction() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
if (splitUrl(file, "extension") === 'pdf'){
//this.response is a blob as we set the type of response above.
let urlData = URL.createObjectURL(this.response);
document.querySelector('#some-selector').src = urlData
}
}
}
} // someFunction ends here
}
Similar to the procedure which I implemented to render .pdf files using a blob. Can I also render .doc files, if its possible, can anyone kindly elaborate how to do so ?
Thanks in advance :)

I'm struggling to save an audio file from a web page using Javascript and XMLHTTPRequest

I am trying to build a chrome extension which will download all of the anchor tags which point to a .wav file from a given page. I am using FileSaver.js. My problem is that the downloaded files contain no data and only 'undefined'. My code is as follows (urlList is an array which contains only URLs that end in .wav):
var xhrList = [];
urlList.forEach(function (url, index) {
xhrList[index] = new XMLHttpRequest();
xhrList[index].open('GET',url,true);
xhrList[index].responseType = 'blob';
xhrList[index].onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
var blob = new Blob([this.response], {type:'audio/wav'});
saveAs(blob, url);
}
}
xhrList[index].send();
});
I've tried looking at a few solutions but I haven't had any luck with them. Any help would be greatly appreciated.

Reloading the extension did the trick.

PNG from Post Request loading into Canvas

This is a very specific problem, and I am yet to find anyone else asking it.
Basically I have a servlet that accepts some parameters and returns a PNG image. I know the servlet works because if I open the page itself with the given parameters, the file is created and downloaded successfully. I need some way of taking this generated PNG and load it into an HTML5 Canvas.
I do NOT have access to changing the servlet and it has to be a POST request as it was not designed by me. My code is essentially just a jQuery post request at this point but here it is:
$.post("../dgexport?format=png",
{
data: localStorage.getItem("dg::export"),
responseType: "blob",
},
function(res){
loadCanvas(res);
});
function loadCanvas(image) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// load image
context.drawImage(image, 0, 0);
}
When I open up the console and look at the data response of the POST request it looks like in the console:
�PNG↵↵IHDR��lD�V pHYs�� IDATx��~---���088'���� IDAT��?��q%�
(this is not the whole thing but I'm hoping it's enough to give a hint to anyone willing to help)
Any help would be greatly appreciated! I've tried a lot of different methods and I'm really stumped on this one.

You cannot do typed requests with jQuery ajax see here
Also you're have to pass an image element to context.drawImage not a blob or string.
Making a post request to get an image seems like bad design to be but can be done with raw XMLHttpRequest.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var img = document.getElementById('img');
var url = window.URL || window.webkitURL;
img.onload = function(){
loadCanvas(this);
}
img.src = url.createObjectURL(this.response);
}
}
xhr.open('POST', "../dgexport?format=png");
xhr.responseType = 'blob';
xhr.send($.param({data: localStorage.getItem("dg::export")}));

Looks like the res being passed into your success function isn't coming back as the expected Blob, which means you may need to convert it into one
function (res) {
if (res instanceof Blob) // function invoked as expected
return loadCanvas(res);
if (typeof res === 'string') // function invoked with String
return loadCanvas(new Blob([res], {type: 'image/png'});
console.warn('Unexpected Response:', res); // anything else
}

Is it possible to convert any type (Url) to base64 format

I have a link, which can return any type of file (say image/jpeg, zip, mp4 etc).
Now i want to convert the above mentioned file data into base64.
Is it possible with javascript alone ?
I tried canvas.toDataUrl(), but that can help only if my returning file format is image.

Minimal example:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
//the file has been loaded as responseText in xhr
alert(btoa(this.responseText));
}
}
//download video file
xhr.open("someVideo.mpg", "get", true);
xhr.send();

How to load a text file in JavaScript?

I'm creating a simple WebGL project and need a way to load in models. I decided to use OBJ format so I need a way to load it in. The file is (going to be) stored on the server and my question is: how does one in JS load in a text file and scan it line by line, token by token (like with streams in C++)? I'm new to JS, hence my question. The easier way, the better.
UPDATE: I used your solution, broofa, but I'm not sure if I did it right. I load the data from a file in forEach loop you wrote but outside of it (i.e. after all your code) the object I've been filling data with is "undefined". What am I doing wrong? Here's the code:
var materialFilename;
function loadOBJModel(filename)
{
// ...
var req = new XMLHttpRequest();
req.open('GET', filename);
req.responseType = 'text';
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
var lines = req.responseText.split(/\n/g);
lines.forEach(function(line)
{
readLine(line);
});
}
}
req.send();
alert(materialFilename);
// ...
}
function readLine(line)
{
// ...
else if (tokens[0] == "mtllib")
{
materialFilename = tokens[1];
}
// ...
}

You can use XMLHttpRequest to fetch the file, assuming it's coming from the same domain as your main web page. If not, and you have control over the server hosting your file, you can enable CORS without too much trouble. E.g.
To scan line-by-line, you can use split(). E.g. Something like this ...
var req = new XMLHttpRequest();
req.open('GET', '/your/url/goes/here');
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
var lines = req.responseText.split(/\n/g);
lines.forEach(function(line, i) {
// 'line' is a line of your file, 'i' is the line number (starting at 0)
});
} else {
// (something went wrong with the request)
}
}
}
req.send();

If you can't simply load the data with XHR or CORS, you could always use the JSON-P method by wrapping it with a JavaScript function and dynamically attaching the script tag to your page.
You would have a server-side script that would accept a callback parameter, and return something like callback1234(/* file data here */);.
Once you have the data, parsing should be trivial, but you will have to write your own parsing functions. Nothing exists for that out of the box.