How to read uploaded xml file using javascript?

Question

I want to read my uploading xml file and show it in a TextArea from the client-side. I am facing problem in my javascript code where I am using string variable instead of url. Is it not correct way to use url? If not how can I use it? Most of the query I have found that they are using fixed file as url but my file can be changed. Here is my code:

function fillTextArea() {
    var text = document.getElementById("connectionName").value;
    document.getElementById("recentDevices").value += text + '\n';
    var filename = $('input[type=file]').val().split('\\').pop();
    var xml = new XMLHttpRequest();
    xml.open('Get', filename, false);
    xml.send();
    var xmlData = xml.responseXML;
    document.getElementById("xmlFileInfo").value += xmlData;
}

<div class="row">
    <div class="col-md-6">
        <div class="input-group">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Connect To:</span>
                <input type="text" class="form-control" id="connectionName" name="connectionName" placeholder="Name" aria-describedby="basic-addon1">
            </div>
            <table>
                &nbsp; &nbsp;
                <tr>
                    <td>Upload XML File</td>
                    <td><input type="file" name="xmlFile" id="xmlFile" accept=".xml" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="submit" value="upload" class="btn btn-primary" onClick="fillTextArea()" /></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Recent Machines</h3>
            </div>
            @Html.TextArea("Xml File Information", new { id = "xmlFileInfo", style = "max-width:100%; min-height:250px", @class = "form-control" })
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Recent Devices</h3>
            </div>
            @Html.TextArea("Recent Devices", new { id = "recentDevices", style = "max-width:100%; min-height:250px", @class = "form-control" })
        </div>
    </div>
</div>

I think my code has a problem in this line below,

xml.open('Get', filename, false);

Your logic isn't quite correct. You use XMLHttpRequest to make calls to the server, not to read a file on the client. You can use the FileReader to read a file directly on the client using JS. Note that if you need to store the file, then you would still have to upload it to your server — Rory McCrossan
– Rory McCrossan, Commented Nov 8, 2016 at 14:12

Mahbub · Accepted Answer · 2016-11-08 14:50:10Z

I have modified my javascript code and got another way to show it successfully. Thank you @Rory McCrossan. Here is my modified Javascript code portion,

    window.onload = function () {
    var fileInput = document.getElementById('xmlFile');
    var fileDisplayArea = document.getElementById('xmlFileInfo');

    fileInput.addEventListener('change', function (e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function (e) {
                xmlFileInfo.innerText = reader.result;
            }

            reader.readAsText(file);
        } else {
            xmlFileInfo.innerText = "File not supported!"
        }
    });

Collectives™ on Stack Overflow

How to read uploaded xml file using javascript?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related