Can't seems to load a model from a file, but url works fine

Hi, people of Babylon, I’ve faced some issues when I try to read and import to my scene using Append

This works fine.

let url= “https://myhost.com/model.gltf
BABYLON.SceneLoader.Append(“”, url, scene, function (scene) {
// do something with the scene
});

However, when I get input from the form on my site it seems doesn’t work like that. I also tried using blob and dataurl but still no luck.

<input>Upload your files</input>
...
userInput.onchange = function(event) {
   var fileList = inputElement.files;

 BABYLON.SceneLoader.Append("", fileList[0], scene, function (scene) {
     // do something with the scene
 });
 
}

Any ideas on how to work on this correctly?

What is the content returned by console.log(fileList[0])?

image

AFAIK, it’s a blob :slight_smile:

And if you try [...]Append("", fileList[0].path, [...], does it works?

1 Like

Appreciated your help but it doesn’t work :frowning:

That array looks a bit ‘wrong’… the path and the name are the same.

Ideally you should tell the code where to find the file of the given name.

fileList[0].name should give you the filename, but it will need ‘something’ prepended to it to give the path and filename.

e.g.

var player4 = assetsManager.addMeshTask("player4", "", "assets/images/", "player.babylon");

you need to get your 2nd parameter to match the one when you submit it manually.

let url= “https://myhost.com/model.gltf”

or it might just need a / in front of it or ./ it depends where you store those images relative to the code you are executing (obviously) and if you can access that location.

So I got blob from this code

  var targetUrl = URL.createObjectURL(props.files[0]);

Using this with SceneLoader like

BABYLON.SceneLoader.Append(“”,targetUrl,scene,(objectData) => {});

This is when I use .glb

Unable to load from blob:http://localhost:3000/09334211-0707-4aff-98fe-4f7515ef0cab: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse

And for GLTF is

Unable to load from blob:http://localhost:3000/7b9c571e-4729-418c-92fe-b96d99e255f5: loadAssets of unknown
Materials:
Name: Skin
Name: Material.001
Name: Mouth
Name: Material

Not sure what I am doing wrong I check these files with Babylonjs Sandbox and they both work fine :slight_smile:

when using from a file you need to specify the file format in the SceneLoader.Append function (last parameter)

3 Likes

The last puzzle is completed! Now it’s working :slight_smile: Thank you!

2 Likes