Check if File Exists?

Questions
1

Hi,
How to check if a file exists, using TypeScript?

So far I did:
Imported File System module via:

const fs = require("fs");

This gives error:

Module not found: Error: Can't resolve 'fs' in 'C:\Users\user\Documents\project\src'
Parsed request is a module
  using description file: C:\Users\user\Documents\project\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

Then found a possible solution. Added this to my webpack.config.js

    resolve: {
        fallback: { 
            "fs": false
        },
    },

After this, it runs, however I get an error where I use the fs.
app.ts:180 Uncaught (in promise) TypeError: fs.existsSync is not a function

Any ideas?

2

fs is NodeJS function, and it is not available in the browser. What do you want to achieve? Why do you need to check if the file exists in the browser?

3

Thanks for the explanation.

I want to load and assign a texture. But I cannot be sure it exists.

var texture = new BABYLON.Texture("some/texture/path.jpg", scene) as BABYLON.Texture;
...
block.texture = texture;

I thought I could check if the file exists before attempting it to be casted as a Texture.
Checking if texture is null, does not work. Because even if path is empty, it creates something?

if(texture) - always true ?
4

Okey, so first thing is that the Texture is trying to get the file via XHR (async) request. If it fails you will see the error in the console. So that is why nothing breaks (it’s async) and the app is still running.

Second thing is that you can use OnTextureLoadErrorObservable method to get notified if the request fail, like here:

1 Like
5

Thank you.
However, how to assign the texture when the loading succeeded?
Your referenced playground just checks if any texture loading failis.

    BABYLON.Texture.OnTextureLoadErrorObservable.add(e => {
        console.log('err', e.name);
    });
6

I may be not the best person to ask this because I don’t really work with textures.
But IMO you can choose from two strategies:

  1. assign the textures as you did before and observe on the errors - if there are errors - act. Let’s call it that we assume the positive case.
var texture = new BABYLON.Texture("some/texture/path.jpg", scene) as BABYLON.Texture;
...
block.texture = texture;

BABYLON.Texture.OnTextureLoadErrorObservable.add(e => {
  // act here
  console.log('err', e.name);
});
  1. use onLoadObservable
    https://playground.babylonjs.com/#20OAV9#12910
    But personally I don’t think it’s the way to go, because the observable is on the just instantiated texture itself. So you would need to check every texture you’re trying to use (instead of having one observable on the error as in the 1. option)
7

I found something, that seems on the correct path, but the author also states it is a bit of a hack.

I thought that I can:

BABYLON.Texture.WhenAllReady([texture],  () => this.OnTextureLoaded(texture, blockInShader));

Then in the callback function:

    OnTextureLoaded = function (texture : BABYLON.Texture, textureBlock : BABYLON.TextureBlock)
    {
        if(texture && texture.isReady())
        {
            textureBlock.texture = texture;
        }
    }

It still manages to go inside if, when texture is null.
On top of that I got 404 for every texture (I think).

8

Okey, so just keep digging :wink:
You can also try to use BABYLON.Tools.LoadImage like in here:

9

I never found a solution to this.
Though I did other mistake, I assumed I am checking something that I am not.

 let blockInShader = cloneMat.getBlockByName(matchedBlockName) as BABYLON.TextureBlock;

I incorrectly assuming I should check for a texture:
if (blockInShader.texture)
While I should have checked if the block was successfully casted to TextureBlock first.
So, the correct syntax should be:

let texture: BABYLON.Texture = new BABYLON.Texture(fullPath, scene, false, false) as BABYLON.Texture;
let matchedBlockName = "TextureBlock1");
let blockInShader = cloneMat.getBlockByName(matchedBlockName) as BABYLON.TextureBlock;
if (blockInShader?.texture) {
    blockInShader.texture = texture;
}

This works and I no longer get nulls.

I have other question, which might be more simple.

How do I do that with Vector4/Color4 and float values?

10

Good that you’re moving forward!

Could you be more specific? How do you do what with Vector4/Color4?

11

I think this goes a bit of topic, so I am continuing here:

12

Okey :slight_smile: it would be nice if you could mark this topic as solved if you don’t need any more help here

13

Well, the initial question is still valid, - how to check if the file exists.
If it is not something I should do in the web based engine, TypeScript, then ok.

14

Okey, so you’ve received few ways of solving this issue.
As I wrote before you can use:

Or you can do it by using plain JS

1 Like