The attempt to use 'readAsArrayBuffer' on 'FileReader' was unsuccessful due to parameter 1 not being of type 'Blob'

Question

The attempt to use 'readAsArrayBuffer' on 'FileReader' was unsuccessful due to parameter 1 not being of type 'Blob'

I'm encountering an issue with a JavaScript FileReader that is giving me the error message Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Below is the snippet of JavaScript causing the problem:

var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "C:\\Users\\yw1kew\\Desktop\\LG_FRAME.plmx"); 
xhr.responseType = "blob";
xhr.onload = function() {
    blob = xhr.response;
}
xhr.send();

var myReader = new FileReader();
myReader.readAsArrayBuffer(blob) // THE ERROR OCCURS HERE

Any suggestions on how to resolve this issue? Thank you.

javascript angularjs xmlhttprequest blob filereader

Answer 1

Answer №1

After facing a similar issue, I spent hours scouring the internet for solutions until I stumbled upon the idea of using fetch, and it actually worked!

fetch("./file.bin")
  .then((data) => {
    return data.arrayBuffer();
  })
  .then((array) => {
    console.log(buffer);
  })
  .catch((error) => {
    console.log(error);
  });

Answer 2

After facing a similar issue, I spent hours scouring the internet for solutions until I stumbled upon the idea of using fetch, and it actually worked!

fetch("./file.bin")
  .then((data) => {
    return data.arrayBuffer();
  })
  .then((array) => {
    console.log(buffer);
  })
  .catch((error) => {
    console.log(error);
  });

Answer 3

Answer №2

For my situation, I rely on using SharePoint as a base and had to transform the binary code in this manner:

    decodeBinary = function (data) {
    var result = '';
    if (data) {
        var byteArray = new Uint8Array(data);
        for (var index = 0; index < data.byteLength; index++) {
            result = result + String.fromCharCode(byteArray[index]);
        }
    }
    return result;
};

Afterwards, it was utilized in the following way:

console.log(decodeBinary(arrayBuffer));

Answer 4

For my situation, I rely on using SharePoint as a base and had to transform the binary code in this manner:

    decodeBinary = function (data) {
    var result = '';
    if (data) {
        var byteArray = new Uint8Array(data);
        for (var index = 0; index < data.byteLength; index++) {
            result = result + String.fromCharCode(byteArray[index]);
        }
    }
    return result;
};

Afterwards, it was utilized in the following way:

console.log(decodeBinary(arrayBuffer));

The attempt to use 'readAsArrayBuffer' on 'FileReader' was unsuccessful due to parameter 1 not being of type 'Blob'

Answer №1

Answer №2

Similar questions

Is the Messenger Bot ignoring random users?

Mongoose retrieves the entire document, rather than just a portion of it

What is the best way to exclude a particular character from a text element utilizing jquery?

What steps can I take to prevent drawing on the HTML5 Canvas?

Feeling lost when it comes to tackling the Data Access Object/Layer in an Express/MongoDB setup?

I am having trouble comprehending this JavaScript code, could someone provide me with assistance?

Display or conceal a div depending on the selected radio button

The error message "Angular Animate - TypeError: undefined is not a function" indicates that

Is there a way to link the id selector with the item's id?

Blogger's homepage URL obtained using JSON data

Jumping through pages using a For Loop in Angular 5

What is the reason for this failure to fasten?

What is the process for updating the values of all objects within an array of objects using Javascript?

Conceal the div when the horizontal scroll position of the container is at 0

Having trouble getting jQuery click event to work with Express for loading a Handlebars page

Using NextJS: How to remove a script when the website URL includes the parameter ?unload-script

Tips for simulating mouse events in Jasmine tests for Angular 2 or 4

Under what circumstances would you need to manually specify the displayName of a React component?

What is the reason behind the limitation of resizing only the most recent page element I added?

Tips for effectively passing navigation as props in React Navigation with Expo