Load blob

[LuisCastilloV98]

In the ngl.esm.js file, the following example of loading structures through Blob appears:

var stringBlob = new Blob( [ pdbData ], { type: 'text/plain'} ); stage.loadFile( stringBlob, { ext: "pdb" } );

or

var binaryBlob = new Blob( [ ccp4Data ], { type: 'application/octet-binary'} ); stage.loadFile( binaryBlob, { ext: "ccp4" } );

And I tried to reproduce the same with the following code, (I have three functions to make three different attempts to load data) but it does not work:

  handleFileInput(files: FileList) {
    for (let index = 0; index < files.length; index++) {
      var file = files.item(index);
      this.load_pdb_blob_1(this.princial_view, file);
      this.load_pdb_blob_2(this.princial_view, file);
      this.load_pdb_blob_3(this.princial_view, file);
    }
  }

load_pdb_blob_1(stage, file) {
    var r = new FileReader();
    r.onload = function () {
      alert(r.result);
      var stringBlob = new Blob([r.result], { type: 'text/plain' });
      var result = stage.loadFile(stringBlob, { ext: "pdb" });
      console.log(result);
    };
    r.readAsBinaryString(file);
  }

  load_pdb_blob_2(stage, file) {
    var r = new FileReader();
    r.onload = function () {
      alert(r.result);
      var stringBlob = new Blob([r.result], { type: 'text/plain' });
      stage.loadFile(stringBlob, { ext: "pdb" });
    };
    r.readAsText(file);
  }

  load_pdb_blob_3(stage, file) {
    var r = new FileReader();
    r.onload = function () {
      alert(r.result);
      var stringBlob = new Blob([r.result], { type: 'text/plain' });
      stage.loadFile(stringBlob, { ext: "pdb" });
    };
    r.readAsArrayBuffer(file);
  }

Could you explain to me how this load is done correctly?

Kind regards,

Luis

PS: I am pleasantly surprised by how well your library works.

[LuisCastilloV98]

I forget to add defaultRepresentation: true, that's the problem.