Trouble Loading file from disk using FileInput

Anupam_Das · February 15, 2025, 8:25pm

I found this PG example of how to load a file from disk like the sandbox does it using FileInput

my question is if I use use file button to pick the file how do i use FileInput with this? do I need to convert the file to a blob first?

labris · February 15, 2025, 9:00pm

Do you mean HTML <input type="file"> element?

Here is the example how it can be done.

github.com/eldinor/niceloader

src/externals/niceloader.ts

main


      
          assetsManager.onTaskErrorObservable.add(function (task) {

              console.log(

                  "task failed: " + task.name,

                  task.errorObject.message,

                  task.errorObject.exception

              );

          });

          

          const loadButton = document.getElementById("loadFile");

          

          loadButton!.onchange = function (evt) {

              let files: any = (evt.target as HTMLInputElement)!.files;

              let filename = files[0].name;

              let blob = new Blob([files[0]]);

          

              console.log(files[0].size);

          

              let sizeInMB = (files[0].size / (1024 * 1024)).toFixed(2);

          

              console.log(sizeInMB + " MB");

Anupam_Das · February 18, 2025, 10:04pm

@labris this seems to work as long as I include the babylon inspector as a dev dependency. Which is super weird. Without the inspector I get this error:
webRequest.ts:185 Not allowed to load local resource: file:///SimpleBox.glb

labris · February 19, 2025, 1:11am

Here is the PG - https://playground.babylonjs.com/#BN1ASL#3
Probably the error you have is related to your environment?

Anupam_Das · February 19, 2025, 1:13am

think I solved it. I needed to import the gltf plugin and seraizlizer when not using the inspector . (the inspector has that build in).

Topic		Replies	Views
Using FileInput to load glft+bin files Questions sandbox	5	1436	August 7, 2020
Babylon FilesInput -- for plain text files? Questions	4	1835	January 18, 2019
How to load gltf from a file browser locally Questions	1	498	May 26, 2023
Using FilesInput to handle drag and drop not working as expected Questions	7	509	November 29, 2022
Loading local glb file using HTML Browse File button via the AssetManager ?[Playground link inside] Questions	7	3774	April 27, 2020

Trouble Loading file from disk using FileInput

Related topics