Drag and Drop a Scene get the Assets but do not parse

Questions
1

https://www.babylonjs-playground.com/#U2U5LA#4

So I am trying to make it so I can drag a scene onto a target, hyjack the FilesInput response get what ever the dropped object was and parse it my own way.

It the case of a .babylon file I am getting this error:

Unable to load assets from file:data:application/octet-....

If you drag and drop a .babylon file onto the playground canvas and look at the console you will see what I mean.
Seems like it should work from what I was reading in the docs. I need them not to parse into the scene but have the assets compiled in the AssetContainer and ready for whatever means.

2

Hijack is such a harsh word… :slight_smile:

The secret here would be to either override the reload function of the file loader (the quick and dirty js way), or extend the fileinput class (the cleaner typescript version).

All in all, the reload function is what you are looking for. when this function executes, the fiel loader will have the internal variable this._sceneFileToLoad which will contain the main scene file (File object) that was dropped. attention, this is a private variable, so if you extend the class you will need to be creative about how to get it. The best (and only) way I see is to send onReloadCallback to super during construction, and storing it when this executes.

Define a onReloadCallback during construction of the FileInput class, you will get a File object with which you can work. just do whatever you want with the File. The fileLoader is using SceneLoader.LoadAsync, but you can use whatever you see fit.

The assets manager’s mesh loading task takes only string as sceneFileName, but it can also be a File, from the way it is used.

I will change the signature of the mesh asset task, in case you want to use it with typescript

3

Why is it dropping an error about parsing the assets into the container then?

I figured what I am doing is correct. So I need to pass the direct “File” not the URI string? I tried that as well, and it seems to drop the same error.

4

any chance of a quick example? I will be able to debug this much better

5

Thats the PG I posted.

Drag and drop a .babylon file onto the canvas and then look at the console.

1 Like
6

(note to self, read previous messages)

7

so so so so guilty of that myself <3

8

how about this:

https://www.babylonjs-playground.com/#U2U5LA#7

The file is the base scene, you can use it in the mesh loader or any other way you want

9

Yeah I tried loading it then into a into an asset container now, and I cant get it to work which is the problem I have been having.

https://www.babylonjs-playground.com/#U2U5LA#8

https://www.babylonjs-playground.com/#U2U5LA#10

As far as I understand loading #10 should work. I bet I am dumb and it needs to be base64 or something.

10

You can use the file directly. otherwise you will need to either convert it to a blob (and a URL), or use data url.

Here, this works - https://www.babylonjs-playground.com/#U2U5LA#15 .

It also seems that somewhere something is not being cleaned up correctly. When an error is thrown, the files array is not being cleared (which somehow makes sense).
Make sure you reload the browser before trying.

1 Like
11

I was missing ''file:"

rabble rabble rabble…

Thanks homie!

1 Like