Loading files with drag/drop (FileInput)?

[carlreid]

I'm trying to use FilesInput (docs) as a drag/drop handler on the canvas, so I can load in files by drag/drop.

I thought I could just do something like below, but when I drag/drop files, simply nothing happens at all (nothing is loaded automatically anyway.

Any thoughts on what I am missing? I think in the "reload" callback, I am provided with a File (onReloadCallback: (sceneFile: File) => void) which I think I may need to manually load in. However I am not sure how exactly to do that. Should it be with useAssetManager, sceneLoader? Both of which don't accept File?

function DragDropFileLoader(): JSX.Element {
  const scene = useScene();
  const engine = useEngine();

  if (!filesInput) {
    filesInput = new FilesInput(
      engine,
      scene,
      () => console.log("scene loaded"),
      () => console.log("progress"),
      () => console.log("additional render loop"),
      () => console.log("texture load"),
      (files) => console.log("loading", files), // Is called with array of files I drag/dropped
      () => {  // Is called, requesting a "reload"
        console.log("reload called");
        scene.debugLayer.show();
      },
      (file, scene, message) => {
        console.log(message, file, scene);
      }
    );
    filesInput.monitorElementForDragNDrop(engine.getRenderingCanvas());
  }

  return <></>;
}

      <Engine antialias adaptToDeviceRatio canvasId="turntable">
        <Scene onSceneMount={onSceneMounted} environmentTexture={hdrTexture}>
          <DragDropFileLoader />
          // Lighting, cameras etc...
        </Scene>
      </Engine>

[carlreid]

Okay, I managed to make it load. The ScaledModelWithProgress is just from the story examples. Don't really like how I am setting state of a JSX element to force the render, but it works. Any further suggestions welcome!

function DragDropFileLoader(): JSX.Element {
  const scene = useScene();
  const engine = useEngine();
  const [renderModel, setRenderModel] = useState<JSX.Element | undefined>();

  if (!filesInput) {
    console.log("init file input");
    filesInput = new FilesInput(
      engine,
      scene,
      () => void 0,
      () => void 0,
      () => void 0,
      () => void 0,
      () => void 0,
      (sceneFile: File) => {
        setRenderModel(
          <ScaledModelWithProgress
            rootUrl={`file:`}
            sceneFilename={sceneFile.name}
            scaleTo={100}
            progressBarColor={Color3.FromInts(255, 165, 0)}
            center={Vector3.Zero()}
          />
        );
      },
      (file, scene, message) => {
        console.log(message, file, scene);
      }
    );
    filesInput.monitorElementForDragNDrop(engine.getRenderingCanvas());
  }

  if (renderModel) {
    return renderModel;
  }

  return <></>;
}

[brianzinn]

oh - that's how you are using it - i have never seen JSX used to set state! it's not declarative, but maybe this will give you some ideas?
https://github.com/BabylonJS/Babylon.js/blob/master/packages/tools/sandbox/src/components/renderingZone.tsx#L96

[carlreid]

I did already base the file input on that code, but it wasn't obvious how the model actually got loaded in. For example, they have null set as the argument where I need to handle the (sceneFile: File) callback, so I can actually load it into the scene. Maybe when they override loadAsync, is how it works, but either way, copy pasted the whole of that over and nothing ever loaded for me 😢

Probably a good thing you didn't see JSX used in state! It was only a way I could essentially force the component to be re-rendered. There's probably a much better way to do it.

[brianzinn]

What about something along these lines:?

const [fileName, setFilename] = useState(null)
...

(sceneFile: File) => {
        setFilename(sceneFile.name)
        ...
        
return (
  <>
    {fileName &&
      <ScaledModelWithProgress
            key={fileName}
            rootUrl={`file:`}
            sceneFilename={fileName}
            ...
      />
            
    }
  </>
)

[carlreid]

Ah of course, that'll be a lot better than storing the JSX. Good thinking 👍