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);
});
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>
document.addEventListener('DOMContentLoaded', function() {
let fileInput = document.getElementById("fileInput")
let displayArea = document.getElementById("displayArea")
fileInput.addEventListener("change", (e) => {
let file = fileInput.files[0];
let reader = new FileReader();
reader.onload = (e) => {
displayArea.innerText = e.target.result;
};
reader.onerror = (e) => {
console.error("File could not be read! Code " + e.target.error.code);
};
reader.readAsText(file);
console.log(displayArea.innerText);
});
}, false);
<input type="file" id="fileInput">
<div id="displayArea"></div>
div contains the text, but console.log gets <empty string>.
I think it logs before reader.onload.
I tried to do something with async and await, but without any success.
Thanks a lot!
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 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");
}
}
});
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/