I am using Angular 8, tslint 5.15 & typescript v3

I am reading file as ArryaBuffer using below code

const reader = new FileReader();
    reader.readAsArrayBuffer(<FileObject>);
    reader.onload = () => {
      this.uploadedData= new Uint8Array(reader.result as ArrayBuffer);
    }

Now when i pass this uploadedData into API, I am converting into byteArray using below fucntion.

convertLicenseToByteArray(uploadedData) {
    const bytesArray = [];
    for (const i of uploadedData) {
      bytesArray.push(i);
    }
    return bytesArray;
  }

The above code is giving error in ie11,

ERROR TypeError: Object doesn't support property or method 'Symbol(Symbol.iterator)_a.srxqdvyfxlx'

I tried to search on net and found that may be i need to add babel-polyfill but it's not working for me.

Any help?

I am using Angular 8, tslint 5.15 & typescript v3

I am reading file as ArryaBuffer using below code

const reader = new FileReader();
    reader.readAsArrayBuffer(<FileObject>);
    reader.onload = () => {
      this.uploadedData= new Uint8Array(reader.result as ArrayBuffer);
    }

Now when i pass this uploadedData into API, I am converting into byteArray using below fucntion.

convertLicenseToByteArray(uploadedData) {
    const bytesArray = [];
    for (const i of uploadedData) {
      bytesArray.push(i);
    }
    return bytesArray;
  }

The above code is giving error in ie11,

ERROR TypeError: Object doesn't support property or method 'Symbol(Symbol.iterator)_a.srxqdvyfxlx'

I tried to search on net and found that may be i need to add babel-polyfill but it's not working for me.

Any help?

• javascript
• angular
• internet-explorer
• babel-polyfill

Share Improve this question Follow edited Dec 31, 2019 at 17:12 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked Dec 31, 2019 at 9:52 Jayesh DhandhaJayesh Dhandha 2,1393131 silver badges5555 bronze badges 1

• console.log your uploadedData and see if Symbol(Symbol.iterator) is present in the object prototype. If not it's not iterable data structure – Petia Biloshytsky Commented Dec 31, 2019 at 12:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

add 'core-js' into you package.json and add import into your polyfills.ts

import 'core-js/es6/symbol';

IE11 doesn't support virtually any of ES2015+, so that means no arrow functions, no Symbol, and no iterables and iterators. (IE9-IE11 do support const and let, but not properly. They support an early version that isn't what was standardized. The biggest discrepancy is in regard to for loops.)

If you want to run that code on IE11, you'll need to transpile it to ES5 and add some polyfills. Symbol and iterability can't be properly polyfilled, but Babel and others provide something partially functional. I see here that Babel now remends not using their own @babel/polyfill and instead using core-js directly (and regenerator runtime if you need to transpile generator functions).

The issue is relates to the uploadedData parameter, when we call the convertLicenseToByteArray method and use the uploadedData variable, if the data is not populated or undefined, it will display this error.

You could try to call the convertLicenseToByteArray method in the reader onload function.

  const reader = new FileReader();    
  reader.onload = (_event) => { 
    this.uploadedData= new Uint8Array(reader.result as ArrayBuffer);   
    console.log(this.convertLicenseToByteArray(this.uploadedData).length);
  } 

For anyone that might be having this problem in an Aurelia project without typescript, I was able to solve it by installing core-js which included the polyfills needed to make this work.

npm install --save [email protected]

I then added the import in the .js file where I was having the issue and it started working.

import "core-js"