Drag and drop the model through local machine

Help & Support
1

Hi hope you are doing well.I want to load the model through drag and drop functionality but once drag and drop the model then I’m getting an error and it seems like the error is base64 .Could you help me to load the model or if I’m doing wrong in script then let me know thanks


var ModelLoadManager = pc.createScript('modelLoadManager');

ModelLoadManager.attributes.add('loadModelPlane', { type: 'entity' });

ModelLoadManager.prototype.initialize = function () {
    ModelLoadManager.Instance = this;
   this.setupDragAndDrop();
};

ModelLoadManager.prototype.setupDragAndDrop = function () {
    var dropArea = document.getElementById('dropArea');

    dropArea.addEventListener('click', function () {
        document.getElementById('modelInput').click();
    });

    dropArea.addEventListener('dragover', function (e) {
        e.preventDefault();
        dropArea.style.border = '2px dashed #333';
    });

    dropArea.addEventListener('dragleave', function () {
        dropArea.style.border = '2px dashed #ccc';
    });

    dropArea.addEventListener('drop', function (e) {
        e.preventDefault();
        dropArea.style.border = '2px dashed #ccc';
        var file = e.dataTransfer.files[0];
        ModelLoadManager.Instance.handleFile(file);
    });

    document.getElementById('modelInput').addEventListener('change', function (e) {
        var file = e.target.files[0];
        ModelLoadManager.Instance.handleFile(file);
    });
};

ModelLoadManager.prototype.handleFile = function (file) {
    if (file && file.name.endsWith('.glb')) {
        var reader = new FileReader();

        reader.onload = function (event) {
            var arrayBuffer = event.target.result;
            ModelLoadManager.Instance.loadModel(arrayBuffer);
        };

        reader.readAsArrayBuffer(file);
    } else {
        alert('Please drop or select a valid GLB model file.');
    }
};

ModelLoadManager.prototype.loadModel = function (arrayBuffer) {
  
  console.log("come here");
    var asset = new pc.Asset('model', 'binary', {
        data: arrayBuffer
    });

    pc.app.assets.add(asset);

    pc.app.assets.load(asset.id, 'model', function (err, asset) {
        if (!err) {
            var modelEntity = new pc.Entity();
            modelEntity.addComponent('model', {
                type: 'asset',
                asset: asset
            });

            ModelLoadManager.Instance.loadModelPlane.addChild(modelEntity);

            console.log('Model loaded successfully.');
        } else {
            console.error('Failed to load GLB model:', err);
        }
    });
}

;