CODEWITHSUNDEEP
angulartypescript
Ravi
Ravi

Reputation: 187

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

I get an error [ts] in const arr = new Uint8Array(fileReader.result).subarray(0, 4); and particularly in fileReader.result in line 11.

Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'ArrayBuffer | ArrayLike | SharedArrayBuffer'.
  Type 'string' is not assignable to type 'ArrayBuffer | ArrayLike | SharedArrayBuffer'.

import { AbstractControl } from '@angular/forms';
import { Observable, Observer } from 'rxjs';

export const mimeType = (
    control: AbstractControl
    ): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }>  => {
              const file = control.value as File;
              const fileReader = new FileReader();
              const frObs = Observable.create(
                (observer: Observer<{ [key: string]: any }>) => {
                  fileReader.addEventListener('loadend', () => {
                    const arr = new Uint8Array(fileReader.result).subarray(0, 4);
                    let header = '';
                    let isValid = false;
                    for (let i = 0; i < arr.length; i++) {
                      header += arr[i].toString(16);
                    }

Can you guys please share a solution. Thanks

Upvotes: 18

Views: 41033

Answers (3)

user2931731
user2931731

Reputation:

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.

Upvotes: 48

R. Viral
R. Viral

Reputation: 396

if you want to display image directly after selection from input file control, you can use something like that...

let file = control.value as File;
let reader = new FileReader();
reader.onloadend = () => {
    this.yourVarible = reader.result;;
}
reader.readAsDataURL(file);

let me know if you need more clarification

Upvotes: -1

Fenton
Fenton

Reputation: 250922

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.

Upvotes: 2

Related Questions