I have a user uploaded file using AngularJS and like to manipulate the file contents using XML. However, I have a difficulty in the DOMParser recognising the text file.
index.html
<div ng-controller = "myCtrl">
<input type="file" file-model="myFile"/>
<button ng-click="uploadFile()">upload me</button>
</div>
app.js
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
reader = new FileReader();
reader.onload = function() {
showout.value = this.result;
txtFile = showout.value;
console.log(txtFile);
};
reader.readAsText(file);
parser=new DOMParser();
xmldoc = parser.parseFromString(txtFile,"text/xml");
console.log(xmlDoc);
In this example, the txtFile is correctly printed to the console, within the Reader.onLoad. However, xmlDoc shows as undefined.
I should I be referencing the file and converting it so that it can be read by DOMParser?
NOTE: if I replace txtFile in ... xmldoc = parser.parseFromString("bob","text/xml"), the code works.
Thanks in advance.
I know this is old but I want drop a working example here in case people still come across this
var parser = new DOMParser();
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
var data = parser.parseFromString(evt.target.result, "application/xml");
console.log(data);
};
Related
I have a problem with a little site (it's intended to work as a local site) I try to create.
I want it to print text from local txt file onto the page. I want it to display it like this one,
<script type="text/javascript">
var arr = ['Heading 1','Para1','Heading 2','Para2','Heading 3','Para3'];
var result = arr.map((val, i) => i%2===0 ? `<h2>${val}</h2>` : `<p>${val}</p>`).join('');
document.getElementById('test').innerHTML = result ;
</script>
but I want it to do it from a file, like this one
<script>
var fileInput = document.getElementById('inputfile');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('output').innerText = reader.result;
};
reader.readAsText(file);
});
</script>
I tried to merge them together like this
<script>
var fileInput = document.getElementById('inputfile');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('output').innerHTML = reader.result.split("\n").map((val, i) => i%2===0 ? <h2>${val}</h2> : <p>${val}</p>).join('');
};
reader.readAsText(file[0]);
});
</script>
But something is still not working right (after choosing the file to read, it does nothing) and I am not sure what am I doing wrong. I am green in javascript, so I would appreciate any help in that matter.
Actually, now that I read that again - the only issue with your example is you were using file[0] instead of file
<input type="file" id="inputfile" />
<p id="output"></p>
<script>
var fileInput = document.getElementById('inputfile');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('output').innerHTML = reader.result.split("\n").map((val, i) => i%2===0 ? `<h2>${val}</h2>` : `<p>${val}</p>`).join('');
};
reader.readAsText(file); // HERE!
});
</script>
I'm trying to read a html file from client computer and load its body content to a div. However, I'm not sure about the correct way to do that. I tried apply these to an uploaded file:
$('#theFile').on("change", function () {
var file = (this).files[0];
var reader = new FileReader();
reader.onload = function (e) {
str = e.target.result;
slides = new Array(1);
var pattern = new RegExp(/<body[^>]*>((.|[\n\r])*)<\/body>/im);
var res = str.match(pattern).join();
console.log(res);
$('#slide').html(res);
slides[0] = res;
};
reader.readAsText(file);
});
The res is an array with 3 elements so I joined them together. Is there better solutions which don't engage with regular expressions?
Add a file-input element to the HTML page:
<input type="file" id="file" onchange="readTxT()"/>
And select sample.txt manually:
function readTxT(){
var reader = new FileReader();
var files=document.getElementById('file').files;
var f = files[0];
reader.onload = function(e) {
var text = reader.result;
$(".diagram").text(text);
}
reader.readAsText(f);
}
I'm trying to dispay the one node e.g. "title" on a internal html page but I need it to pull the data from an XML document that is saved on my Desktop but it doesn't seem to be finding the XML document. I'm not to sure what to add or how to combat this problem? Any help would be much appreciated! Many thanks
var parser, xmlDoc;
var text = loadXMLDoc("/Desktop/test.xml");
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
First of all you can't access any files from the absolute path of your system due to security reasons. you must need to upload file at first place, there after you can process the XML content.
follow link below tried to create small snippet for you.
HTML:
<div>
<label id="txtFileInfo"></label>
<input id="xmlFile" type="file">
</div>
JS:
(function($){
$('#xmlFile').unbind('change')
.bind('change', function(e){
if(this.files.length > 0){
var file = this.files[0];
if(file.type == 'text/xml'){
setTimeout(function(){
console.log('Reader');
var reader = new FileReader();
reader.addEventListener('load', function(){
console.log(reader.result);
parser = new DOMParser();
xmlDoc = parser.parseFromString(reader.result, file.type);
console.log(xmlDoc);
});
reader.readAsDataURL(file);
}, 100);
}
// $('#txtFileInfo').text('Type: '+ file.type);
}
});
})($);
https://codepen.io/smtgohil/pen/gGWoRe
All the best.
Trying to upload images to website. encode it to base64. I have this code works in new Chrome/Mozzill/IE11. but it doesn't in Safari 5.1.4 (Windows)
I can see now that FileReader is not available at safari until version 6.0... So any alternatives to this?
<input id="#avatar" type="file" onchange="previewFile()">
This is code
<script>
var img;
function previewFile() {
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
img = reader.result;
alert(img)
}, false);
if (file) {
reader.readAsDataURL(file)
}
}
<...>
</script>
I'm working on a project to encrypting data and sent it to the server, so I need to store the data in a file and then sent it to the server(php). the user then grab the file on the client side to decrypt it. But I'm runing into the problem of storing the data in the text file or open it.
I have no problem creating the file, but when I open the file/use FileReader(), it said: [objectFile] instead of the data.
What am I doing wrong? Here is an example below, I try to make it as simple as possible.
note: I can't read jquery.
<!DOCTYPE html>
<html>
<head>
<script>
function createdTextFile(){
var date = new Date();
var file = new File(["text text text text text text"], "textfile.txt", {type: "text", lastModified: date});
/*
sent file to server
var formdata = new FormData();
formdata.append("Uploaded_file", file);
*/
//Created download link
var uriContent = "data:application/octet-stream,"+file;
var div_idFileDownload = document.getElementById("file_dowload");
div_idFileDownload.innerHTML = "";
var createElement_aFileDownload = document.createElement("a");
createElement_aFileDownload.setAttribute("download", "textfile.txt");
createElement_aFileDownload.setAttribute("href", uriContent);
div_idFileDownload.appendChild(createElement_aFileDownload);
var nm = document.createTextNode("textfile.txt");
createElement_aFileDownload.appendChild(nm);
}
//open text file: [objectFile]
//Need the text file to say: text text text text text text
</script>
</head>
<input type="file" id="upload_img">
<input type="button" onclick ="createdTextFile()" value="download">
<div id="file_dowload"><div/>
</html>
Try it, you can test see this working here:
function createdTextFile(){
var date = new Date();
var file = new File(["text text text text text text"], "textfile.txt", {type: "text", lastModified: date});
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
//Created download link
//var uriContent = "data:application/octet-stream,"+file;
var uriContent = reader.result;
var div_idFileDownload = document.getElementById("file_dowload");
div_idFileDownload.innerHTML = "";
var createElement_aFileDownload = document.createElement("a");
createElement_aFileDownload.setAttribute("download", "textfile.txt");
createElement_aFileDownload.setAttribute("href", uriContent);
div_idFileDownload.appendChild(createElement_aFileDownload);
var nm = document.createTextNode("textfile.txt");
createElement_aFileDownload.appendChild(nm);
};
}