Showing results for 
Search instead for 
Did you mean: 

Meta Quest Browser file input fails with some file extensions

Honored Guest

While developing a web app with three.js, I noticed an unexpected behavior of Meta Quest Browser:

  • if I choose a .glb model file with a <input type="file"> tag, and try to access it in javascript, the browser does not allow access to the file
  • if I manually change the extension to .png, it works.

Disabling safe navigation in browser's settings does not solve the problem.

The problem occur only on Meta Quest Browser: Chrome on Windows and Android behave as expected.

This is the code handling file input:



const fileInput = document.getElementById('file') as HTMLInputElement
fileInput.addEventListener('change', (e) => loadModel(( as HTMLInputElement).files![0]))
function loadModel(file: File) {
    const url = URL.createObjectURL(file)

    const loader = new GLTFLoader()
    loader.load( url, function ( gltf ) {
        scene.add( gltf.scene );
        console.log('Model loaded')

    }, undefined, function ( error ) {

        console.error( error );

    } );



And this is the console error I get when accessing file with .glb extension



GET blob: 
load    @   three.module.js:41933
load    @   GLTFLoader.js:222
loadModel   @   index.ts:58
(anonymous) @   index.ts:52

Uncaught (in promise) TypeError: network error
Promise.then (async)        
readData    @   three.module.js:41973
start   @   three.module.js:41969
(anonymous) @   three.module.js:41966
Promise.then (async)        
load    @   three.module.js:41934
load    @   GLTFLoader.js:222
loadModel   @   index.ts:58
(anonymous) @   index.ts:52



I set up a sample web app to reproduce the problem:

source code here:


Other details of the problem explained here:

and here: