HtmlFileInputForPhaser3.js

class HtmlFileInput {
    constructor({
        scene,
        spriteKey,
    }) {
        // Phaser's parent HTML element
        const mainElement = scene.sys.game.canvas.parentElement;

        // create html input type
        const fileInput = document.createElement('input');
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('accept', '.json');
        fileInput.setAttribute('id', spriteKey);

        // TODO this stylings
        fileInput.style.position = 'absolute';
        fileInput.style.top = 0;
        fileInput.style.display = 'block';
        fileInput.style.marginTop = '-400px';

        mainElement.appendChild(fileInput);
        this.setFileInput(fileInput);
        this.setScene(scene);
    }

    setFileInput = (fileInput) => {
        this.fileInput = fileInput;
    }

    setScene = (scene) => {
        this.scene = scene;
    }
}

export default HtmlFileInput;