We Keep Coding

HTML JavaScript print from file onto page

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>

java script: How can I read html file and load its content to a div

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);
}

How to determine if PDF is encrypted javascript client side

Need to determine if if pdf uploaded by user is password protected without using external libs.
So far got this POC.
Any one know cases when this might not work?
<input type='file' onchange='openFile(event)'><br>
<script>
var openFile = function (event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function (event) {
console.clear();
var contents = event.target.result;
if (contents.indexOf('/Encrypt') !== -1) {
console.log("Is encrypted");
} else {
console.log("Not encrypted");
}
console.log("File contents: " + contents);
};
reader.onerror = function (event) {
console.error("File could not be read! Code " +event.target.error.code);
};
reader.readAsText(input.files[0]);
};
</script>

You can use the below code to find whether the PDF is encrypted or not
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var files = new Blob([reader.result], {type: 'application/pdf'});
files.text().then(x=> {
console.log("isEncrypted", x.includes("Encrypt"))
console.log("isEncrypted", x.substring(x.lastIndexOf("<<"), x.lastIndexOf(">>")).includes("/Encrypt"));
console.log(file.name);
});

How to read HTML file contents in javascript

I am sending data via ajax to post in mysql. In this context how to inlude image file contents ?
If i use like :
var formData = document.getElementById("img_file");
alert(formData.files[0]);
, i get error . Note : img_file is the id of the file dom.
Any idea about this ?

You can use javascript FileReader for this purpose. Here is a sample code demonstration.
<html>
<body>
<input type="file" id="fileinput" />
<div id="ReadResult"></div>
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function (e) {
var contents = e.target.result;
document.getElementById("ReadResult").innerHTML = contents;
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>
</body>
</html>
Find more details here.

i think it may help you.
$('#image').change(function () {
$("#add").attr("disabled", true);
var img = this.files[0];
var reader = new FileReader;
reader.readAsDataURL(img);
reader.onload = function (e) {
var file = new Image;
file.src = e.target.result;
file.onload = function () {
$("#height").text(file.height);
$("#width").text(file.width);
$("#imageprev").attr("src", file.src);
$("#upld").removeAttr("disabled");
}
}
});

Image upload with ajax

I know, there are many tutorials, but I can't figure out how to make them work.
I have an input form for file upload:
<input onChange="userPreviewImage(this)" type="file" accept="image/*" style="display:none"/>
There is my Javascript code
function userPreviewImage (fileInput) {
save = true;
var files = fileInput.files;
var file = files[0];
current = file;
var imageType = /image.*/;
var img = document.createElement("img");
img.classList.add("obj");
img.classList.add("preview");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
As a result I have img, which is an object <img src="data:image/png;base64..."> which I can print out.
I've been using this for a while, but now I need to change the workflow.
My goal now is instead of printing the image, send its source to the server (the server code is working fine).
I can't figure out how to get the image source from what I have (just the data:image/png;base64... part). Can someone give me a tip?

Try posting data URI aImg to server as String
window.onload = function () {
this.userPreviewImage = function (fileInput) {
var files = fileInput.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function (aImg) {
$.post("/echo/html/", {
html: aImg.target.result
})
.then(function (data, textStatus, jqxhr) {
console.log(data, textStatus);
}, function(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
})
};
reader.readAsDataURL(file);
}
};
jsfiddle http://jsfiddle.net/8gjb82b6/1/