Error after updating to angular 7. Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'string'

Question

I upgraded my project from angular 6 to angular 7. I have a file upload component in my project. It gives a compiler error after the upgrade.

onUpload() {
    const fileReader = new FileReader();
    fileReader.onload = () => this.uploadFile(fileReader.result);
    fileReader.readAsText(this.fileToUpload);
}

uploadFile(fileContent: string) {
    //upload
}

In above code, this.uploadFile(fileReader.result) gives following error.

error TS2345: Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'string'

The type of fileReader.result is string | ArrayBuffer, and it says this cannot be assigned to a string. How can I convert string | ArrayBuffer type to a string?

@Zze it works. I didn't know about as string. Please add your comment as an answer. — Lahiru Chandima
– Lahiru Chandima, Commented Nov 14, 2018 at 1:30

Zze · Accepted Answer · 2019-03-13 23:12:44Z

14

Whilst result has the potential to return a string, it cannot implicitly cast this to a string as there is a risk of data loss. i.e. ArrayBuffer as string may result in data truncation (would have to test). So you have to explicitly cast it as to tell the compiler "I know what I am doing".

2 approaches to achieve this are:

(string)fileReader.result;
fileReader.result as string;

Folks, Check @Malvolio's answer, it's more complete.

edited Mar 13, 2019 at 23:12

answered Nov 14, 2018 at 1:50

Zze

18.9k14 gold badges95 silver badges125 bronze badges

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

1 Comment

Lazar Ljubenović Over a year ago

Malvolio's answer is more correct. This is just hiding the issue under the rug. When it comes back to bite you, you'll be wondering why it's not working: it's not working because you're lying to TypeScript.

Michael Lorton · Accepted Answer · 2018-11-14 02:50:41Z

3

You need a typeguard, like this:

if (this.fileToUpload instanceof ArrayBuffer) {
  // throw an error, 'cause you can't handle this
} else {
    fileReader.readAsText(this.fileToUpload);
}

answered Nov 14, 2018 at 2:50

Michael Lorton

44.7k26 gold badges111 silver badges159 bronze badges

Comments

J C · Accepted Answer · 2018-11-19 11:00:06Z

1

You could use the method toString() to parse the result:

 const file = event.target.files[0];
 reader.readAsDataURL(file);

 const base64 = reader.result.toString().split(',')[1];

answered Nov 19, 2018 at 11:00

J C

7717 silver badges11 bronze badges

Comments

gorums · Accepted Answer · 2019-03-13 19:43:27Z

0

Try

fileReader.onload = () => this.uploadFile(<string>fileReader.result);

answered Mar 13, 2019 at 19:43

gorums

1,76714 silver badges5 bronze badges

Collectives™ on Stack Overflow

Error after updating to angular 7. Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'string'

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related