Error occurred while attempting to use 'readAsText' on 'FileReader': the first parameter is not a valid 'Blob' type

Question

Error occurred while attempting to use 'readAsText' on 'FileReader': the first parameter is not a valid 'Blob' type

Struggling to access and read a user-supplied XML file within an Angular environment. Here is my current code:

Component.ts:

convertFileToString(event){
    this.uploadXML=event.target.files[0];
    let fileReader = new FileReader();
    fileReader.onload = (event) =>{this.finalUploadedXML=fileReader.result as String}
    fileReader.readAsText(this.uploadXML);
    console.log("The contents are:")
    console.log(this.finalUploadedXML);
  }

index.html

<input type="file" id="uploadInput" (change)="convertFileToString($event)" hidden>

However, upon running the above code, I encounter the following error message:

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

I attempted to adjust readAsText(this.uploadXML) to

readAsText(this.uploadXML.asInstanceOf[Blob])

, but it appears that asInstanceOf is not recognized as a valid property for the File type. Next, I tried changing the data type of uploadXML from File to Blob, yet the error persists. Any suggestions?

angular typescript filereader

Answer 1

Answer №1

Today, I encountered an upload problem and stumbled upon this helpful link. The example provided here addresses the specific issue that I faced, which led me to modify the Angular code for my own project. Hopefully, you may also find it useful.

HTML Code

<form>

  <input type="hidden"
         id="MAX_FILE_SIZE"
         name="MAX_FILE_SIZE"
         value="300000" />

  <div>
    <label for="fileselect">Files to upload:</label>
    <input type="file"
           id="file-select"
           name="fileselect[]"
           multiple="multiple" />

    <div id="file-drag">{{ dragDropAreaText }}</div>
  </div>

</form>

Style Code

#file-drag {
  font-weight: bold;
  text-align: center;
  padding: 1em 0;
  margin: 1em 0;
  color: #555;
  border: 2px dashed #555;
  border-radius: 7px;
  cursor: default;
}

#file-drag.hover {
  color: #f00;
  border-color: #f00;
  border-style: solid;
  box-shadow: inset 0 3px 4px #888;
}

img {
  max-width: 100%;
}

pre {
  width: 95%;
  height: 8em;
  font-family: monospace;
  font-size: 0.9em;
  padding: 1px 2px;
  margin: 0 0 1em auto;
  border: 1px inset #666;
  background-color: #eee;
  overflow: auto;
}

Typescript Code

export class UploadMediaComponent implements OnInit, AfterViewInit {

  constructor(
    private elementRef: ElementRef
  ) { }

  fileList: any[] = [];

  @Input() dragDropAreaText: string = 'Drag and drop files here';
  @Input() uploadButtonText: string = 'Browse File';

  @Output() mediaUploaded: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
  }

  ngAfterViewInit() {
    if (window.File && window.FileList && window.FileReader) {
      setTimeout(() => {
        this.setEvents();
      }, 2000);
    }
  }

  setEvents() {
    const fileDragElement = this.elementRef.nativeElement.querySelector('#file-drag');
    const fileSelectElement = this.elementRef.nativeElement.querySelector('#file-select');
    fileSelectElement.addEventListener('change', this.fileSelectHandler.bind(this));
    fileDragElement.addEventListener('dragover', this.fileDragHover.bind(this));
    fileDragElement.addEventListener('dragleave', this.fileDragHover.bind(this));
    fileDragElement.addEventListener('drop', this.fileSelectHandler.bind(this));
  }

  fileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
  }

  fileSelectHandler(e) {
    e.preventDefault();
    // cancel event and hover styling
    this.fileDragHover(e);
    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;
    console.log(files)
    // process all file objects
    for (var i = 0, file; file = files[i]; i++) {
      this.parseFile(file);
    }
  }

  parseFile(file) {
    console.log(file);
    // display an image
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader();
      reader.onload = (e) => {

        console.log(e);
        console.log(e.target.result);

        file.src = e.target.result;
        this.fileList.push(file);
        this.mediaUploaded.emit(this.fileList);
      }
      reader.readAsDataURL(file);
    }

    // display text
    if (file.type.indexOf("text") == 0) {
      var reader = new FileReader();
      reader.onload = function (e) {
        console.log(e);
      }
      reader.readAsText(file);
    }

  }

}

Answer 2

Today, I encountered an upload problem and stumbled upon this helpful link. The example provided here addresses the specific issue that I faced, which led me to modify the Angular code for my own project. Hopefully, you may also find it useful.

HTML Code

<form>

  <input type="hidden"
         id="MAX_FILE_SIZE"
         name="MAX_FILE_SIZE"
         value="300000" />

  <div>
    <label for="fileselect">Files to upload:</label>
    <input type="file"
           id="file-select"
           name="fileselect[]"
           multiple="multiple" />

    <div id="file-drag">{{ dragDropAreaText }}</div>
  </div>

</form>

Style Code

#file-drag {
  font-weight: bold;
  text-align: center;
  padding: 1em 0;
  margin: 1em 0;
  color: #555;
  border: 2px dashed #555;
  border-radius: 7px;
  cursor: default;
}

#file-drag.hover {
  color: #f00;
  border-color: #f00;
  border-style: solid;
  box-shadow: inset 0 3px 4px #888;
}

img {
  max-width: 100%;
}

pre {
  width: 95%;
  height: 8em;
  font-family: monospace;
  font-size: 0.9em;
  padding: 1px 2px;
  margin: 0 0 1em auto;
  border: 1px inset #666;
  background-color: #eee;
  overflow: auto;
}

Typescript Code

export class UploadMediaComponent implements OnInit, AfterViewInit {

  constructor(
    private elementRef: ElementRef
  ) { }

  fileList: any[] = [];

  @Input() dragDropAreaText: string = 'Drag and drop files here';
  @Input() uploadButtonText: string = 'Browse File';

  @Output() mediaUploaded: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
  }

  ngAfterViewInit() {
    if (window.File && window.FileList && window.FileReader) {
      setTimeout(() => {
        this.setEvents();
      }, 2000);
    }
  }

  setEvents() {
    const fileDragElement = this.elementRef.nativeElement.querySelector('#file-drag');
    const fileSelectElement = this.elementRef.nativeElement.querySelector('#file-select');
    fileSelectElement.addEventListener('change', this.fileSelectHandler.bind(this));
    fileDragElement.addEventListener('dragover', this.fileDragHover.bind(this));
    fileDragElement.addEventListener('dragleave', this.fileDragHover.bind(this));
    fileDragElement.addEventListener('drop', this.fileSelectHandler.bind(this));
  }

  fileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
  }

  fileSelectHandler(e) {
    e.preventDefault();
    // cancel event and hover styling
    this.fileDragHover(e);
    // fetch FileList object
    var files = e.target.files || e.dataTransfer.files;
    console.log(files)
    // process all file objects
    for (var i = 0, file; file = files[i]; i++) {
      this.parseFile(file);
    }
  }

  parseFile(file) {
    console.log(file);
    // display an image
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader();
      reader.onload = (e) => {

        console.log(e);
        console.log(e.target.result);

        file.src = e.target.result;
        this.fileList.push(file);
        this.mediaUploaded.emit(this.fileList);
      }
      reader.readAsDataURL(file);
    }

    // display text
    if (file.type.indexOf("text") == 0) {
      var reader = new FileReader();
      reader.onload = function (e) {
        console.log(e);
      }
      reader.readAsText(file);
    }

  }

}

Answer 3

Answer №2

When calling the convertFileToString() function, it is recommended to pass the file object instead of the event as a parameter. This adjustment is necessary because the function is ultimately invoked by another function that deals with the change event triggered during file upload. Therefore, the revised code looks like this:

convertFileToString(file){
    //this.uploadXML=event.target.files[0];

    let fileReader = new FileReader();
    fileReader.onload = (event) =>{

      this.finalUploadedXML=fileReader.result as String
      console.log((<FileReader>event.target).result);
    }
    fileReader.readAsText(file);
    console.log("The contents are:")
    console.log(this.finalUploadedXML);
}

I hope this clarification proves helpful. Thank you!

Answer 4

When calling the convertFileToString() function, it is recommended to pass the file object instead of the event as a parameter. This adjustment is necessary because the function is ultimately invoked by another function that deals with the change event triggered during file upload. Therefore, the revised code looks like this:

convertFileToString(file){
    //this.uploadXML=event.target.files[0];

    let fileReader = new FileReader();
    fileReader.onload = (event) =>{

      this.finalUploadedXML=fileReader.result as String
      console.log((<FileReader>event.target).result);
    }
    fileReader.readAsText(file);
    console.log("The contents are:")
    console.log(this.finalUploadedXML);
}

I hope this clarification proves helpful. Thank you!

Answer 5

Answer №3

Consider using a structure similar to the following when working with your "fileReader.readAsText(this.uploadXML)" method:

if (typeof this.uploadXML === "object") {
  fileReader.readAsText(this.uploadXML);
}

Answer 6

Consider using a structure similar to the following when working with your "fileReader.readAsText(this.uploadXML)" method:

if (typeof this.uploadXML === "object") {
  fileReader.readAsText(this.uploadXML);
}

Error occurred while attempting to use 'readAsText' on 'FileReader': the first parameter is not a valid 'Blob' type

Answer №1

Answer №2

Answer №3

Similar questions

Is it true that Angular 4 routers only maintain a single state during navigation?

Creating a Map from an array of key-value pairs: A step-by-step guide

Compiling angular and ngrx: errors when tap() is removed

What are the best strategies for managing npm dependencies alongside other packages?

The find functionality in Angular and Firebase seems to be malfunctioning

Angular is encountering a situation where code is being executed before properly waiting for the response from an asynchronous

Tips for accessing the data type of a nested property in TypeScript

What is the method for incorporating an Angular variable into an iframe src link?

Ionic Framework: Implementing a search bar in the navigation bar

Error: Unable to locate package "@angular-devkit/build-angular" during ng serve command

What is the best way to include an image in a form and transmit it as payload to the backend using Angular/TypeScript?

What is the reason for the successful compilation of "require" and the failure of "import"?

The Angular file management API from ng6-file-man seems to be malfunctioning

I'm facing an issue in Angular 4 where the routing for a child component is

The component is failing to store its value within the database

I am unable to loop through the object Object

Angular 2: Export Data to CSV and Download

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

Encountered a specific issue with Angular 8's mat-autocomplete: "matAutocomplete" is not being recognized as a valid property of the "input" element

The error message states that the object literal can only define properties that are known, and in this case, 'tailwindcss' is not recognized in the type 'NuxtConfig'