upload a local pdb file to view

orangeSi commented 6 months ago

Is possiable to upload a local pdb file by user (like below) to ngl.js plugin to view?

<html>
 <input type="file" id="pdb_file" name="filename">
<html/>

fredludlow commented 6 months ago

Very minimal example here: https://codepen.io/fludlow/pen/KKJEXLN?editors=1111

The relevant JS (you can directly access the file attribute of your pdb_file input element):


// Create NGL Stage object
var stage = new NGL.Stage( "viewport" );

// Handle window resizing
window.addEventListener( "resize", function( event ){
    stage.handleResize();
}, false );

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) {
        return;
    }

    // Getting the file extension
    const fileName = file.name;
    const fileExtension = fileName.slice(((fileName.lastIndexOf(".") - 1) >>> 0) + 2); 

    stage.loadFile(file, {ext: fileExtension, defaultRepresentation: true})
});

orangeSi commented 6 months ago

thanks~

nglviewer / ngl

upload a local pdb file to view #1006