How to make FileReader work with Angular2?

Asked
Active3 hr before
Viewed126 times

8 Answers

90%

How to make FileReader work with Angular2!!, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Meta Stack Overflow , About

First you have to specify the target of the change event on input form in template:

@View({
  template:`
    <div>
      Select file:
      <input type="file" (change)="changeListener($event)">
    </div>
  `
})

As you can see I binded a changeListener() method to (change) event. My implementation of class:

  changeListener($event): void {
     this.readThis($event.target);
  }

  readThis(inputValue: any): void {
     var file: File = inputValue.files[0];
     var myReader: FileReader = new FileReader();

     myReader.onloadend = function(e) {
        // you can perform an action with readed data here
        console.log(myReader.result);
     }

     myReader.readAsText(file);
  }
load more v
88%

How to make FileReader work with Angular ,How to make FileReader work with Angular?,When reading a file from client side with Angular2 and Typescript,,84237/how-to-make-filereader-work-with-angular

I try to use FileReader in this way:

var fileReader = new FileReader();
fileReader.onload = function(e) {
   console.log("run fileReader.onload");
   //  ......
}
load more v
72%

When reading a file from client side with Angular2 and Typescript, ,I try to use FileReader in this way:,Listener is passing file from event to readThis method. Read this have implemented it's own FileReader. You can also define FileReader in component instead in function.,How to make FileReader work with Angular2!!

I try to use FileReader in this way:

var fileReader = new FileReader();
fileReader.onload = function(e) {
   console.log("run fileReader.onload");
   //  ......
}
load more v
65%

When reading a file from client side with Angular2 and Typescript,,did you try to make it work in pure JavaScript, without Angular 2, TypeScript etc.? I'm asking since for me it looks like invalid API usage,My advice: first try to make it work in pure JS without any frameworks and only then post an issue,I finally find a way to build an online example with Typescript.

var fileReader = new FileReader();
fileReader.onload = function(e) {
   console.log("run fileReader.onload");
   //  ......
}
75%

So you can access your variables.

Do it like this:

myReader.onloadend = (e) => {
   console.log(myReader.result);
   this.fileString = myReader.result as string;
};
40%

The src attribute of the image tag is set to imgURL property defined in the component.,The reader.onload event is triggered once the reading operation is successfully completed. Inside the load event, imgURL value is set to the result returned by the fileReader object.,Let’s create an angular component called UploadComponent with the following code.,The component has 3 variables and one event named preview. The variable message is used to show the validation error message and imgURL will have the uploaded image URL to be previewed.

Let’s create an angular component called UploadComponent with the following code.

export class UploadComponent {
   public imagePath;
   imgURL: any;
   public message: string;

   preview(files) {
      if (files.length === 0)
         return;

      var mimeType = files[0].type;
      if (mimeType.match(/image\/*/) == null) {
         this.message = "Only images are supported.";
         return;
      }

      var reader = new FileReader();
      this.imagePath = files;
      reader.readAsDataURL(files[0]);
      reader.onload = (_event) => {
         this.imgURL = reader.result;
      }
   }
}
load more v
22%

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.,PropertieserroronabortonloadreadyStateresult,FileReader.readAsDataURL(),Methodsabort()readAsArrayBuffer()readAsBinaryString()readAsDataURL()readAsText()

instanceOfFileReader.readAsDataURL(blob);
load more v
60%

You should now see two projects within VS Code, as shown in Figure 6.,Choose the FileUploadAngular folder as shown in Figure 5 and click the Add button.,Modify this from a single object to an array of file objects.,Once the project is created, add the newly created folder named FileUploadAngular to VS Code. Select the File > Add Folder to Workspace... menu item, as shown in Figure 4.

Let's start by building the .NET Core Web API application to which you upload files. Open an instance of Visual Studio Code. From the menu, select View > Terminal to display a terminal window at the bottom of the editor. You should see something that looks like this:

Windows PowerShell
Copyright(C) Microsoft Corporation.
All rights reserved.

XX C: \Users\ YOUR_LOGIN >
load more v

Other "undefined-undefined" queries related to "How to make FileReader work with Angular2?"