I encountered an unexpected error while attempting to execute the FileReader function within my project, leaving me puzzled and seeking a solution

For my AJAX exercise, I need to use a local file named "ledevoir.xml" that is stored on my PC. My program requires me to select this file. However, when I run the program and choose the ledevoir.xml file locally, I encounter the following error:

Error: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.

Below is the code snippet I am using:

    <?xml version="1.0" encoding="ISO-8859-1" ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>Example AJAX</title>

    <script language="JavaScript">
    function displayTitles(doc) {
         titles = doc.getElementsByTagName("title");
         elementol = document.createElement("ol");
         var length = titles.length;
         for ( i = 0; i &lt; length ; ++i) {
           elementli = document.createElement("li");
           elementli.appendChild(document.createTextNode(titles[i].firstChild.nodeValue));
           elementol.appendChild(elementli);
         }
         body = document.getElementsByTagName("body").item(0);
         body.appendChild(elementol);
    }

    function loadDocument(file) {
            var fileReader = new FileReader();
            fileReader.onload = function(evt) {
               var doc = new DOMParser().parseFromString(this.result, 'application/xml');
               displayTitles(doc);
            }
            fileReader.readAsText(file);
    }

    </script>
    </head>
    <body>
      <p>Retrieve and display the latest news from le devoir: </p>
    <input type="file" onchange="loadDocument(this.files)" ></input>

    </body>
    </html>

I need help in understanding and resolving this error. Can anyone assist me with this issue?

Answer №1

When you make the call to

chargeDocument(this.files)

You are passing a selection of files, meaning that the parameter f in the function chargeDocument(f) is an array containing multiple files, not just one. The error indicates that arrays do not have a method called readAsText.

To fix this issue, only pass the first file selected:

<input type="file" onchange="chargeDocument(this.files[0])"></input>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I use jQuery to separate special characters from letters in a string?

I'm facing an issue with my code related to validation. There is a existing validation in place that restricts users from entering letters and special characters in a textfield. Now, I need to incorporate this validation into my code but I'm uns ...

storing data in a nested child object within an array

I am attempting to include variables into the existing JSON data that is received from an API whenever a user clicks on the add button. However, I encountered this error message: Cannot find a differ supporting object '[object Object]' of type & ...

Using jQuery to provide autocomplete functionality with multiple AJAX-requested values

After diligently studying the UI site's documentation and consulting various tutorials, I managed to get my code working to some extent. It successfully ajax's in the desired list of terms, allows selection of one with the placement of its value ...

Retrieving the chosen value from Material-UI Autocomplete

Check out the sandbox code here: Problem Having an issue: The Autocomplete component is not retrieving values like the rest of my components. Clicking the Retrieve data button only retrieves values for creator, title, description, project, severity, and s ...

Displaying a JSON object in a component's state through appending

I am currently working with a function that takes the state of an object as input and performs various operations on it. After these operations, I need to update the state accordingly and display it in JSON format. Here is the initial state: state= { ...

Specify the width of one element to always be the same as the width of another

One common challenge is maintaining the width of one element equal to another when the page loads (refer to link description here). However, it becomes tricky when the side width changes, such as resizing the browser window. Is there a way to dynamically ...

Confirm the contents of a form retrieved through ajax

Let me explain the issue I am facing. I have created an HTML page with a simple form and some jQuery code for validation. This is how the page looks: <html> <head> <title></title> <script src="jquery-1.7.min.js" type="text/jav ...

Encountering numerous errors when importing Wallet Connect / Web3 Provider

I encountered some challenges when trying to incorporate the "@walletconnect/web3-provider" JS library into my project. After installing the library along with the Web3 module using the following command: npm install --save web3 @walletconnect/web3-provide ...

The error message is stating that the module located at C://.. does not have an exported member named "firebaseObservable"

Trying to follow an Angular/Firebase tutorial for a class but encountering issues. The FirebaseListObservable is not being imported in my component even though I have followed the tutorial closely. I've looked at similar questions for solutions but ha ...

Obtain data using a jQuery AJAX request

Below is the original code snippet: var result = null; $.post('test.php', 'q=testdata', function(response) { result = response; }); I have a requirement to utilize result in my code, either during or immediately after the ajax requ ...

Align the Bootstrap Nav Bar in the Center

<!-- Unique Header --> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-togg ...

Guide on how to conditionally render Container Classes

Initially, the designer provided me with this: Essentially, a category is passed from the previous screen. Through some UI interactions, I have to render this screen repeatedly. The flow goes like this: you choose a category, if it has subCategories, allo ...

What is the reason JavaScript function aliasing fails to work?

When Firebug is not enabled, I have some Firebug console function calls that I wanted to disable by checking if the console object is defined. This implementation works in IE6 and FF3, but unfortunately not in Chrome: var log; if(console){ log = consol ...

substituting symbols with colorful divs

I'm looking to add some color to my text using specific symbols. (), ||, and ++ are the symbols I'm using. If a text is enclosed in | symbols, it will appear in blue, and so on... Here is the code in action: const text = "|Working on the| i ...

Trigger controller redirection in AngularJS 1.5.0 by clicking on <tr> tag

Currently, I am facing an issue with my web page where I use the ng-repeat directive to populate a table with a list of companies. My goal is to have a functionality where clicking on a table row opens another page with a form to edit the selected company. ...

Guide to automatically update mysql posts every second

Utilizing ajax, I am able to save user posts/comments into a mysql table without the need for a page refresh. Initially, there is this <div id="posts-container"></div> Next, I attempted to use Jquery load() to iterate through a table and disp ...

How to properly handle Angular routing errors and best practices?

Currently, I have been delving into learning Angular to integrate with my Ruby on Rails application. However, I have encountered some challenges specifically related to routing. Here is a snippet from my app.routing file: import { NgModule } from '@ ...

Struggling to iterate through placeholder information

I am currently working on a frontend component that is mapped out and contains some placeholder data. The data is being pulled from a JavaScript file. export const userInputs = [ { id: 1, label: "First Name", type: &qu ...

Error encountered while trying to install the node module, code 1. Installation failed

npm ERR! code 1 npm ERR! path D:\Neneng\a) Neneng_Pribadi File\2] Raynar abiyu diera\Rays DEV\Atomic BOT\node_modules\canvas npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ...

Difficulty arises when applying hover effects to animations using callbacks

Currently facing an issue with the hover event in jQuery. There are two side-by-side containers with hover events on both. When hovering, a div containing additional information slides up into view and slides back down when the hover ends. The concept is ...