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
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
Share Improve this question edited Feb 3, 2010 at 19:37 Jason Berkan 8,9147 gold badges31 silver badges39 bronze badges asked Feb 3, 2010 at 19:27 SlimBoySlimBoy 4212 gold badges5 silver badges14 bronze badges1 Answer
Reset to default 1Assuming 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 plete 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>