FileReader

by toubia95

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.7/download.min.js"></script>
<input name="file" type="file" id="files" class="form-control" value="">
<br><br>
<textarea id="editeur" name="editeur" class="form-control"></textarea><br><br>
<input name="exportxml" type="submit" id="exportxml" value="Exporter en .xml">

CSS

/*
- https://stackoverflow.com/questions/35188924/reading-txt-file-into-a-textarea-using-javascript
- https://markitup.jaysalvat.com/home/ text/xml
- utiliser un menu en accordéon de jqueryui ou bootstrap
*/
#editeur {
  width: 100%;
  height: 300px;
}

JavaScript

function readTextFile(file, callback, encoding) {
    var reader = new FileReader();
    reader.addEventListener('load', function (e) {
        callback(this.result);
    });
    if (encoding) reader.readAsText(file, encoding);
    else reader.readAsText(file);
}

function fileChosen(input, output) {
    if (input.files && input.files[0]) {
        readTextFile(
            input.files[0],
            function (str) {
                output.value = str;
            }
        );
    }
}

$('#files').on('change', function () {
    $('#editeur').val('Chargement du fichier...');
    fileChosen(this, document.getElementById('editeur'));
});

$("#exportxml").click(function() {
  var mydoc = $('#editeur').val();
  download(mydoc, "TEST.xml", "text/xml");
});