在Atom.io包中加载HTML文件

Question

I am creating an Atom.io package, but I am having some trouble loading the HTML for my GUI.

What I did was to create a new HTML file to contain the basic GUI:

<atom-panel class='modal'>
    <h2>Please select file.</h2>
    <div name='open-file-list' class='select-list'>
        <ol />
    </div>

    <br />
    <div class='block'>
        <button name='cancelButton' class='inline-block'>Cancel</button>
        <button name='okButton' class='inline-block'>Ok</button>
        <button name='openFileButton' class='inline-block'>File not listed</button>
    </div>

</atom-panel>

And I am trying to load this into my package-view.js, however all that I get is an empty file. My code is the following:

    constructor(serializedState)
    {    
        // Create root element
        this.element = document.createElement('div');
        this.element.classList.add('srt-helper');

        let fileReader = new FileReader();
        fileReader.onload = function(e)
        {
            console.log('File loaded...')
            let result = fileReader.result;
            console.log(result);
        }
        let f = new File([''], '../views/file-select-panel.html');
        fileReader.readAsText(f);
    }

Please note that I am using javascript and not coffe script. Afterwards I am planning to create a new div object and add the contents of my file to it as an inner html.

Is this the best way to do it? If so, what I am doing wrong?

Note: I created a folder for the html file called: views.

Answer 1

I've solved the problem with the following code:

/*
 * Load a file using XMLHttpRequest.
 * Returns a promise that can be used for the loading.
 */
getFileLoadPromise(fileUrl)
{
    let promise = new Promise((resolve, reject) =>
    {
        let request = new XMLHttpRequest();
        request.open('GET', fileUrl);

        request.onload = () =>
        {
            if (request.status === 200)
                resolve(request.responseText);

            else
                reject(Error(request.statusText));
        };

        request.onError = () =>
        {
            reject(Error('Network error.'))
        };

        request.send();
    });

    return promise;
}