title: How to combine an uploaded X3D file with an inline node?
body: <p>In my <a href="https://jsfiddle.net/c7tkvaw3/3/" rel="nofollow noreferrer">code example</a> I have an upload button and an x3d scene.
  After choosing an x3d file from the local file system the method <code>URL.createObjectURL</code> is called.</p>
  
  <p>The content of my html file looks like this:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"/&gt;
          &lt;title&gt;Include an external X3D-File&lt;/title&gt;
          &lt;script type='text/javascript' src='https://x3dom.org/download/dev/x3dom.js'&gt; &lt;/script&gt;
          &lt;link rel='stylesheet' type='text/css' href='https://x3dom.org/download/dev/x3dom.css'/&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;input type="file" onchange="onFileChange(event)" accept=".x3d"&gt;
          &lt;x3d width='500px' height='400px'&gt;
              &lt;scene id="scene"&gt;
              &lt;/scene&gt;
          &lt;/x3d&gt;
      &lt;/body&gt;
  
      &lt;script&gt;
          function onFileChange(event) {
            var inline = document.createElement("Inline");
            inline.setAttribute("nameSpaceName", "Inline");
            inline.setAttribute("mapDEFToID", true);
            var url = URL.createObjectURL(event.target.files[0]);
            inline.setAttribute("url", url);
            document.getElementById("scene").appendChild(inline);
            console.log("ObjectURL: " + url);
          }
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>An .x3d file could look like this:</p>
  
  <pre><code>&lt;x3d width="500px" height="400px"&gt;
    &lt;scene&gt;
      &lt;shape&gt;
        &lt;appearance&gt;
          &lt;material diffuseColor='red'&gt;&lt;/material&gt;
        &lt;/appearance&gt;
        &lt;box&gt;&lt;/box&gt;
      &lt;/shape&gt;
    &lt;/scene&gt;
  &lt;/x3d&gt;
  </code></pre>
  
  <p>I want to use the created object url for a new generated inline node but unfortunately the model is not showing up. Instead a loading circle stays at the upper left corner like in this 
  <a href="https://i.stack.imgur.com/ondUK.png" rel="nofollow noreferrer">screenshot</a> or in image below.</p>
  
  <p><a href="https://i.stack.imgur.com/dYRKB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dYRKB.png" alt="enter image description here"></a></p>
  
  <p>Did I overlook something or is there another way to load an x3d file into the browser and access it from the inline node?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>In the meantime I've solved the problem by myself.
  Which I did not think about was to use <code>contentType='model/x3d+xml'</code> with Inline because the blob url does not end with .x3d.</p>