In this tutorial I will show you how to retrieve a remote file and then create a blob(similar to file object).
This can be useful if you want to analyze a text/binary remote file on frontend using JavaScript.
This simple code converts a remote file to a blob object.
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/favicon.png");
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
}
xhr.send();
var xhr = new XMLHttpRequest();
xhr.open("GET", "/favicon.png");
xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
}
xhr.send();
If the blob is representing a binary file then you need to copy the content of the blob into a ArrayBuffer and then analyze it.
var myReader = new FileReader();
myReader.readAsArrayBuffer(blob)
myReader.addEventListener("loadend", function(e)
{
var buffer = e.srcElement.result;//arraybuffer object
});
myReader.readAsArrayBuffer(blob)
myReader.addEventListener("loadend", function(e)
{
var buffer = e.srcElement.result;//arraybuffer object
});
If the blob is representing a text file then you can retrieve its content as a string and analyze it.
var myReader = new FileReader();
myReader.addEventListener("loadend", function(e){
var str = e.srcElement.result;
});
myReader.readAsText(blob);
myReader.addEventListener("loadend", function(e){
var str = e.srcElement.result;
});
myReader.readAsText(blob);
@narayanprusty
