micmro / PerfCascade

Responsive, SVG based HAR waterfall viewer
https://micmro.github.io/PerfCascade
MIT License
272 stars 51 forks source link

Error in uploading zip files #252

Closed surya0014 closed 5 years ago

surya0014 commented 5 years ago

Exporting readFile in main.d.ts in ( PerfCascade node modulus) and using readFile directly in my ts. Eg : export declare function readFile(file: File, fileName: string, callback: (e: Error | null, har?: Har) => void, onProgress?: (progress: number) => void): void; ( adding this in main.d.ts)

Instead of using “renderPerfCascadeChart(data);” directly I have called “fromHar(data)” .

I am getting “zip.BlobReader is not a constructor “ error and can you tell whether I have correctly pass zip files ( Zipped Har files ) ?

My ts component :

import { fromHar } from 'perf-cascade'; import * as perfReader from 'perf-cascade';

fileUploader(event) {

console.log("event" + event)
const elem = event.target;
console.log(elem.files[0]);

    perfReader.readFile(elem.files[0], elem.value, function (error, data) {
      if (error) {
        console.log("error " + error);
      } else {
          //renderPerfCascadeChart(data);
        this.perfCascadeSvg = fromHar(data);
        console.log(this.perfCascadeSvg);
             this.changeDetectorRefs.markForCheck();
      }
    }, function (progress) {
      console.log("unzip progress: ", progress / 100, "%");
    });

}

My html :

<form [formGroup]="formGroup" class="form" style="text-align:center" encrypt="multipart/form-data">

Har File :

<button   mat-button type="submit"  (click)="onSubmit()" >Save</button>

<div [innerHTML]="perfCascadeSvg">

zip format error

micmro commented 5 years ago

Hm, looks like you are missing the zip functionality. Have you imported perf-cascade-file-reader.js (or alternatively perf-cascade-file-reader.min.js)?

surya0014 commented 5 years ago

Where should we import perf-cascade-file-reader.min.js or perf-cascade-file-reader.js ? I tried importing perf-cascade-file-reader.js from dist in perf-cascade ( node_modules ) to my ts component. But still i am getting same error ( “zip.BlobReader is not a constructor “ )

my ts component : import * as perfcascadeReader from '../../../../node_modules/perf-cascade/dist/perf-cascade-file-reader.js'; perfcascadeReader.readFile(elem.files[0], elem.value, function (error, data) { if (error) {

        console.log("error " + error);
      } else {

        // handle success
        //renderPerfCascadeChart(data);
        this.perfCascadeSvg = fromHar(data);
        console.log(this.perfCascadeSvg);
      }
    }, function (progress) {
      console.log("unzip progress: ", progress / 100, "%");
    });