Detailed instructions

Step by step

Step 1

Create a HTML page with an Input FileUpload Object. We'll call our input myFile.

<!DOCTYPE html>
<html>
<body>
  <h3>Example</h3>
  <input type="file" id="myIfcFile">
  <button onclick="myFile()">Click me</button>
  <script>
    function myFunction() {
      // TODO
    }
  </script>
</body>
</html>

Step 2

Make sure you include TBW before your main function.

<script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/BIMWHALE.min.js"></script>
  
<script>
    function myFunction() {
        // TODO
    }
</script>

Step 3

Get the selected file using a classical DOM selector. See Using files from web applications for more information. 

<script>
    function myFunction() {
        const ifcFile = document.getElementById('myFile').files[0];
    }
</script>

Step 4

Use the FileReader API to read the content of the IFC file. We will assume that the input is a correct IFC file. In other words, we will assume that the file contains text. That's why we call reader.readAsText(file).

 <script>
    function myFunction() {
        var file = document.getElementById('myFile').files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            // TODO
        };
        reader.readAsText(file);
    }
</script>

Step 5

The onload property will handle the actual reading of the file. See FileReader.onload for more info. Notice that we split each line.

<script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/BIMWHALE.min.js"></script>
  <script>
    function myFunction() {
        var file = document.getElementById('myFile').files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var lines = e.target.result.split(/\r\n|\n/);
            // TODO
        };
        reader.readAsText(file);
    }
</script>

Step 6

Use BIMWHALE.js. by:

  1. Creating a new BIMWHAlE object

new BIMWHALE.file(lines, config);

  1. Calling the method parseIfcFile()

var ifcEntites = file.parseIfcFile();

Please note that the config object is missing at this moment.

Final result

The final result should look like this:

<!DOCTYPE html>
<html>
<body>
  <h3>Example</h3>
  <input type="file" id="myFile">
  <button onclick="myFunction()">Click me</button>
  <script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/BIMWHALE.min.js"></script>
  <script>
    function myFunction() {
        var file = document.getElementById('myFile').files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var lines = e.target.result.split(/\r\n|\n/);
            var ifcFile = new BIMWHALE.IfcFile(lines, config);
            var ifcEntites = ifcFile.parseIfcFile();
        };
        reader.readAsText(file);
    }
  </script>
</body>
</html>

Please note that this code doesn't output the result. You won't see anything on your screen.

Simply log the IFC Entities like this:

 var ifcEntites = file.parseIfcFile();
 console.log(ifcEntites)

Congratulations, you are now ready for the Simple Example.

PreviousQuick StartNextSimple Example

Last updated