Type 'string' is not assignable to type 'ArrayBuffer | ArrayLike<number> | SharedArrayBuffer'

You can get rid of the error with appropriate type castings: e.g.

...instead of...

this.imagePreview = reader.result;

...try...

this.imagePreview = <string>.reader.result;

...or...

this.imagePreview = reader.result as string;

...or instead of...

const arr = new Uint8Array(fileReader.result).subarray(0, 4);

...write...

const arr = new Uint8Array(<ArrayBuffer>fileReader.result).subarray(0, 4);

...or...

const arr = new Uint8Array(fileReader.result as ArrayBuffer).subarray(0, 4);

I hope that this helps.

Let's use a smaller example to highlight the issue. You should get the same type error from the following code:

let example: string | ArrayBuffer;

function useArrayBuffer(ab: ArrayBuffer) {
    return ab.byteLength;
}

useArrayBuffer(example);

This is because the example variable might contain a string or and ArrayBuffer. If it contains a string, it isn't valid to pass to the function, as the function only wants ArrayBuffer arguments.

You can narrow the type using a type guard:

let example: string | ArrayBuffer;

function useArrayBuffer(ab: ArrayBuffer) {
    return ab.byteLength;
}

if (typeof example !== 'string') {
    useArrayBuffer(example);
}

If the type is not a string, the call is fine.