'How to read hdf5 file in javascript inside browser

I have hdf5 file created using c++ application.i want to read the same hdf5 file inside browser using javascript.

Hdf5 file will be download from server using xhr or web socket request and the content of the file will be stored in javascript variable then i want to read the content of the variable.

Please tell me any javascript library available to read the hdf5 inside browser.

i tried "https://github.com/HDF-NI/hdf5.node" but it supports only for nodejs.

Is it possible to convert the above library to support reading inside browser.

Solution 1:^[1]

The best two libraries that I found are jsfive and h5wasm:

Sample code jsfive:

$(document).ready(function() {
    $("#datafile").change(async function loadData() {
        var file_input = $("#datafile")[0];
        var file = file_input.files[0]; // only one file allowed
        let datafilename = file.name;
        let reader = new FileReader();
        reader.onloadend = function(evt) { 
          let barr = evt.target.result;
          var f = new hdf5.File(barr, datafilename);
          let value = f.get('main').value
          let attrs = f.get('main').attrs
          // do somthing with f
        }
    })
})

<!DOCTYPE html>
<html lang="eng">

<head>
</head>

<body>

  <input type="file" id="datafile" name="file">
  
  <!-- Import JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- Import JSFive -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hdf5.js">
    <!-- Import main JS -->
    <
    script src = "app.js" >
  </script>
</body>

</html>

Sample code h5wasm:

import * as hdf5 from "https://cdn.jsdelivr.net/npm/h5wasm@latest/dist/esm/hdf5_hl.js";

await hdf5.ready;

$(document).ready(function() {
    $("#datafile").change(async function loadData() {
        let file = $("#datafile")[0].files[0];
        let data_filename = file.name;
        let ab = await file.arrayBuffer();
        hdf5.FS.writeFile(data_filename, new Uint8Array(ab));
        let f = new hdf5.File(data_filename, "r");
        // do somthing with f
        f.close()
    })
})

<!DOCTYPE html>
<html lang="eng">

<head>
</head>

<body>
    <input type="file" id="datafile" name="file">

    <!-- Import JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- Import main JS -->
    <script type="module" src="app.js" ></script>
</body>

</html>

Also interesting jsfive with callback:

function storeTarget(result, file_name) {
  f = new hdf5.File(result, file_name);
}

$("#datafile").change(async function loadSource() {
    var file_input = $("#datafile")[0];
    var file = file_input.files[0];
    let datafilename = file.name;
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = () => storeTarget(reader.result, datafilename);
})

Solution 2:^[2]

It is only able to read a subset of HDF5 files, but this is something that works: https://github.com/usnistgov/jsfive

It basically covers all the files that can be read by the pyfive library (https://github.com/jjhelmus/pyfive), as it is a direct port of that library.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Brian Maranville

'How to read hdf5 file in javascript inside browser

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]