Menu
Using javascript, I want to read xml file from the disk, modify the values/add elements/attributes and save the xml back to disk.
Anyone knows here can i find examples that works with IE and Firefox? I allready find examples to read, now changing values that's the problem.
Thanks
995
Assuming you are trying to read and write to disk from the browser and not node.js,
the first step is to use an input tag of type file to get access to the file system.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>
As soon as a file is selected we want to extract the blob from the element. A good moment to do that is during the change event.
const input = document.querySelector('#input');
input.addEventListener('change', () => {
const file = input.files.item(0);
});
There is more than one way to parse the blob into a tree of elements. Here I took advantage of the fact that the browser parses xml documents in HTTP requests.
function blobToDocument(blob, callback) {
const url = URL.createObjectURL(blob);
const request = new XMLHttpRequest();
request.open('Get', url);
request.responseType = 'document';
request.addEventListener('load', () => {
callback(request.response);
});
request.send();
}
After the blob has been parsed we can manipulate it like we would manipulate the DOM tree.
function editDocument(document) {
const element = document.createElement('editor');
element.textContent = 'JavaScript';
document.firstChild.appendChild(element);
return document;
}
In order to save the file to disk we need to reverse the process of parsing, converting the tree of elements back to a string.
function documentToString(document) {
const serializer = new XMLSerializer();
return serializer.serializeToString(document);
}
The only thing left is to send the file back to disk. To achieve this we can trigger a click event on a link with our modified file.
function download(string, mime) {
const blob = new Blob([string], { type: mime });
const a = document.createElement('a');
const url = URL.createObjectURL(blob);
a.href = url;
a.download = 'document.xml';
a.click();
}
Here is the complete code
const input = document.querySelector('#input');
input.addEventListener('change', () => {
const file = input.files.item(0);
blobToDocument(file, (xmlDocument) => {
editDocument(xmlDocument);
download(documentToString(xmlDocument), "text/xml");
});
});
function blobToDocument(blob, callback) {
const url = URL.createObjectURL(blob);
const request = new XMLHttpRequest();
request.open('Get', url);
request.responseType = 'document';
request.addEventListener('load', () => {
callback(request.response);
});
request.send();
}
function editDocument(document) {
const element = document.createElement('editor');
element.textContent = 'JavaScript';
document.firstChild.appendChild(element);
return document;
}
function documentToString(document) {
const serializer = new XMLSerializer();
return serializer.serializeToString(document);
}
function download(string, mime) {
const blob = new Blob([string], { type: mime });
const a = document.createElement('a');
const url = URL.createObjectURL(blob);
a.href = url;
a.download = 'document.xml';
a.click();
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
