# Loading blob file with react and get unexpected magic error

**URL:** <https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652>\
**Category:** Questions\
**Tags:** react\
**Created:** [June 24, 2022, 3:24am UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652 "2022-06-24T03:24:06Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kayla\_Man](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kayla_man/32/12636_2.png) [@Kayla\_Man](https://forum.babylonjs.com/u/Kayla_Man)\
**Post date:** [June 24, 2022, 3:24am UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652/1 "2022-06-24T03:24:06Z")

</div>

Hi guys. I am struck at importing blob files with react (I am still new to react).  
I want to import glob files to model. but ends up with the magic error and no camera is defined,  
Here is some of my code

```auto
....///some codes before
this.state = {
      blob: ""
    };
    this.onModelLoaded = this.onModelLoaded.bind(this);
  }
  onModelLoaded(e) {
    let file = e.target.files[0];
    var url = URL.createObjectURL(file);
    console.log(file.name);

    this.setState((state) => ({
      ...this.state,
      blob: url
    }));
    return url;

```

I assign the blob value into the `rootURL` within `<Model/>`

```auto
 <Suspense fallback={null}>
              <Model
                rootUrl={this.state.blob}
                sceneFilename=""
                pluginExtension=".glb"
              />
            </Suspense>

```

The entire code and the error can be seen in my codesandbox: [babylonjs-react - CodeSandbox](https://codesandbox.io/s/babylonjs-react-vk9vdx?file=/src/App.js:1201-1404)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 24, 2022, 12:43pm UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652/2 "2022-06-24T12:43:48Z")

</div>

@brianzinn is the daddy of this amazing framework 🙂

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [June 24, 2022, 2:01pm UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652/3 "2022-06-24T14:01:28Z")

</div>

hi @Kayla_Man  
The reason is that you cannot load a model with an empty string. GLB files specifically start with a special “magic” identifier. This will get your scene loading:

```auto
{this.state.blob !== "" &&
  <Suspense fallback={null}>
    <Model
      rootUrl=""
      sceneFilename={this.state.blob}
      pluginExtension=".glb"
    />
  </Suspense>
}

```

Your code would be a cleaner with a Functional Component. I can show you how to switch it over, if you want - it looks like you got that started from an Storybook on the main repo.

---

<div class="post-metadata">

**Author:** ![Kayla\_Man](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kayla_man/32/12636_2.png) [@Kayla\_Man](https://forum.babylonjs.com/u/Kayla_Man)\
**Post date:** [June 27, 2022, 1:49am UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652/4 "2022-06-27T01:49:57Z")

</div>

Hi brian, I would like to see how to do it with a functional component if you dont mind to show!

Thank you,  
K

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [June 27, 2022, 4:21am UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652/5 "2022-06-27T04:21:49Z")

</div>

This is one way:  
[babylonjs-react (forked) - CodeSandbox](https://codesandbox.io/s/babylonjs-react-forked-klo5se?file=/src/App.js)

```nohighlight
import React, { Suspense, useRef, useState } from "react";
import "@babylonjs/loaders";
import { Engine, Scene, Model } from "react-babylonjs";
import { Vector3, Tools } from "@babylonjs/core";

export default () => {
  const link = useRef();
  const [model, setModel] = useState({ url: "", extension: "" });

  function onFileInputChanged(e) {
    if (e.target.files.length > 0) {
      let file = e.target.files[0];
      var url = URL.createObjectURL(file);
      const extension = file.name.substring(file.name.lastIndexOf("."));
      console.log(`loading '${extension}'.`);
      setModel({ url, extension });
    }
  }

  return (
    <div onClick={() => link.current.click()}>
      <h2>Upload files here!</h2>
      <input
        style={{ display: "none" }}
        type="file"
        ref={link}
        onChange={onFileInputChanged}
      />
      <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
        <Scene>
          <arcRotateCamera
            name="camera1"
            alpha={Tools.ToRadians(0)}
            beta={Tools.ToRadians(0)}
            radius={4}
            target={Vector3.Zero()}
            minZ={0.001}
          />
          <hemisphericLight
            name="light1"
            intensity={0.7}
            direction={Vector3.Up()}
          />
          {model.url !== "" && (
            <Suspense fallback={<box name="fallback" />}>
              <Model
                rootUrl=""
                sceneFilename={model.url}
                pluginExtension={model.extension}
              />
            </Suspense>
          )}
        </Scene>
      </Engine>
    </div>
  );
};

```

edit: that’s a more or less direct translation. just added `extension` otherwise state could be just a string.

---

<div class="post-metadata">

**Author:** ![Kayla\_Man](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kayla_man/32/12636_2.png) [@Kayla\_Man](https://forum.babylonjs.com/u/Kayla_Man)\
**Post date:** [June 27, 2022, 7:00am UTC](https://forum.babylonjs.com/t/loading-blob-file-with-react-and-get-unexpected-magic-error/31652/6 "2022-06-27T07:00:15Z")

</div>

thank you!  
i have another question but it isn’t related to the error or the component(they are all solved).  
Is there any camera emb(similar to `ArcRotateCamera`) or command which can create camera similar to `scene.createdefaultcamera` in BabylonJS original library? I use but sometimes each object has different origin and it’s difficult to set the camera target.