How to read text file from Firebase storage in angular

Question

I am uploading text files in Firebase storage and storing some data in Firebase real-time database. No problem in doing the above thing.

Also, I am able to fetch all the files present in firestorage along with the URL of text file. But I am not able to read the content inside a text file.

I am using below code to fetch the data

I am calling getfileDetails() method in init to store all data in fileDetailList before calling below code

 this.uploadService.fileDetailList.snapshotChanges().subscribe(
      list => {
        console.log("before fileListDetails= ");
        this.fileListDetails = list.map((item) => {
          return item.payload.val();
        });
        console.log("fileListDetails= " + JSON.stringify(this.fileListDetails)); //logs attached below
        this.FileDetailsList = this.fileListDetails;

        this.FileDetailsList.forEach((item) => {
          console.log("item= " + item.imgUrl);
        
           // to get the text from file
          this.http.get<string>(item.imgUrl).subscribe(
            (item11)=>{

              console.log("file read= "+item11); //getting error Here
              
            }
          );
        });
      }
    );

my uploadService.ts method

fileDetailList:AngularFireList<any>;

constructor(private firebase:AngularFireDatabase) { }

  getfileDetails()
  {
    console.log("getfileDetails");
    this.fileDetailList=this.firebase.list('FileDetails');
  }

logs Details

fileListDetails= [{"caption":"nkn,","category":"hello.txt","imgUrl":"https://firebasestorage.googleapis.com/...."}]

when I am hitting imgUrl in the browser directly I am able to get the text

Michael · Accepted Answer · 2020-06-28 11:02:28Z

1

You need to tell the http client that you expect a plain text response rather than the default which is JSON

Note that when specifying a responseType other than JSON you do not need to need to give a generic argument like this.http.get<MyType> as it is already specified.

this.http.get(item.imgUrl, {responseType: "text"}).subscribe(...)

Ref: https://angular.io/guide/http#requesting-data-from-a-server

edited Jun 28, 2020 at 11:02

answered Jun 28, 2020 at 10:18

Michael

2,48420 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

bhaskarkh Over a year ago

But i was telling that return will be string http.get<string>

Michael Over a year ago

The generic <string> is a hint to typescript that the response will be a string but unfortunately this type information is not available at runtime, which is why you also need to specify how to parse the response with the responseType

bhaskarkh Over a year ago

Thanks Michael it works for me but after removing string from start now my http call looks like this http.get(url,{responseType:"text})

Michael Over a year ago

It's better to keep the generic <string> on the start, as otherwise your response will probably be of type any which is dangerous. (Unless the method signature is constraining the generic to make it redundant)

bhaskarkh Over a year ago

Getting error while keeping the starting string >> type "text" is not assignable to type ' "json" ' The expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }' http.d.ts(1061, 9):

|

Collectives™ on Stack Overflow

How to read text file from Firebase storage in angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related