I want to count words from below file types..
['pdf','xls','xlsx','odt','ppt','pptx','txt','doc','docx','rtf']/
currently my code reads text files only..
please help me for other file types..
Below is my code..
<script>
$('#file').change( function(event) {
var imgpath=document.getElementById('file');
if (!imgpath.value==""){
var ext = imgpath.value.split('.').pop().toLowerCase();
if($.inArray(ext, ['pdf','xls','xlsx','odt','ppt','pptx','txt','doc','docx','rtf']) != -1) {
var f = event.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var strings = "";
var contents = e.target.result; alert(contents);
var words = contents.match(/\S+/g).length;
$('#display_file_count').text(words);
}
r.readAsText(f);
}
}else{
alert('file type not supported.');
$('#file').val('');
}
}
});
</script>
Related
Here is my output image
Here is my code
let input = document.querySelector('input');
var textarea = document.getElementsByClassName('area')[0];
var txtreplace = document.getElementsByClassName('demo')[0];
window.addEventListener('load',
function () {
input.addEventListener('change', () => {
let files = input.files;
if (files.length == 0) return;
const file = files[0];
let reader = new FileReader();
const fruits = [];
reader.onload = (e) => {
const file = e.target.result;
const lines = file.split(/\r\n|\n/);
//console.log(lines.length);
textarea.value = lines.join('\n');
lines.forEach(function (arrayItem) {
//console.log(arrayItem.replace("\u001bE", ""));
var arr1 = arrayItem.replace("\u001bE", "");
var arr2 = arr1.replace("\u001bF", "");
fruits.push(arr2);
});
console.log(fruits.length);
if (parseInt(fruits.length) > 0) {
console.log(fruits);
txtreplace.innerHTML = fruits;
}
};
reader.onerror = (e) => alert(e.target.error.name);
reader.readAsText(file);
});
}, false);
function printDiv() {
var divContents = document.getElementsByClassName("demo").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h1>Print PDF <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script> </body>
You can take a look at https://github.com/parallax/jsPDF.
It's js library allow you to build pdf using Javascript.
Otherwise have some solutions to convert html page to pdf ( https://www.html2pdf.co.uk/ ), but I don't think it's what you are looking for.
Exemple of code using JSPDF :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.save('Test.pdf');
Hope it will helps you ;)
I currently I have this piece of code which was originally a sample code online but edited slightly to fit my needs.
<input type="file" id="files" name="file" />
<span class="readBytesButtons">
<button>display injected files</button>
<span>
<div id="displayedText"></div>
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files;
console.log(files);
if (!files.length) {
alert('Please select a file!');
return;
}
//var file = files[0];
var reader = new FileReader();
reader.readAsText(files[0], "UTF-8");
reader.onload = function (evt) {
try {
var startWord = "inject";
var endWord = "];";
var injectedFilesString = evt.target.result.slice(evt.target.result.indexOf(startWord), evt.target.result.indexOf(endWord)) + "]";
var injectedFiles = injectedFilesString.split('[')[1].split(']')[0].split(', ');
document.getElementById("displayedText").innerHTML = injectedFiles
; }
catch(err) {
document.getElementById("displayedText").innerHTML = "<span style='color: red; font-weight: bold; font-family: verdana;'>This file does not have any injected files within it.</span>";
}
}
reader.onerror = function (evt) {
alert("error reading file");
}
}
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readBlob(startByte, endByte);
console.log(files);
}
}, false);
This piece of code currently reads and displays a certain portion of a file which is selected by the file selector tool. How could I change this code so that I don't need the file selector and could print portions of a file using a method such as fileName.injected();
Thanks, let me know if you have any clarifications
I have tried to pass the uploaded files value to apex method but facing some issues in javascript logic.
I have added alert after reader.onload = function(e) but didn't get any alert when I'm hitting this javascript function.
HTML CODE
function SponsorshipLetter() {
var files = document.getElementById('fileUpload');
var appId = getCookie('apex__app');
var fileName = 'Passport';
var reader = new FileReader();
reader.file = files[0];
reader.onload = function(e) {
alert('Hello 1' + document.getElementById('fileUpload').value);
var att = new sforce.SObject("Attachment");
att = fileName;
att.ContentType = this.file.type;
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
att.Body = (new sforce.Base64Binary(binary)).toString();
alert('attt');
PAP_Finances.sponsorFileUpload(att.Name, att.Body, att.ContentType, appId,
function(result, event) {
return 'Success';
});
}
reader.readAsDataURL(e.target.files[0]);
}
I have two form fields. I want to convert the base 64 encode from image. I want to pass it in JSON format to the next URL.
Sometimes I am getting
uncaught error property_img
How can I do this?
var files = document.getElementById('floorplan_img').files;
if (files.length > 0) {
var file = files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
console.log(reader.result);
var base64 = reader.result;
var str = base64;
var arr = str.split(",");
var floor_img = arr[1];
console.log(floor_img);
};
reader.onerror = function(error) {
console.log('Error: ', error);
};
}
var files1 = document.getElementById('upload_properties').files;
if (files1.length > 0) {
var file1 = files1[0];
var reader1 = new FileReader();
reader1.readAsDataURL(file1);
reader1.onload = function() {
var base64_img = reader1.result;
var str_64 = base64_img;
var arr_str = str_64.split(",");
var property_img = arr_str[1];
console.log(property_img);
};
reader1.onerror = function(error) {
console.log('Error: ', error);
};
}
alert(property_img);
<input type="file" id="floorplan_img">
<input type="file" id="upload_properties">
I am struck in a problem where I am trying to read a csv file using Browse button by the following HTML tag:
<input type="file" name="filename" id="filename">
<div id="csvimporthint"></div>
and my jquery code to read and process the input file is as below:
<script>
$("#filename").change(function(e) {
var ext = $("input#filename").val().split(".").pop().toLowerCase();
if($.inArray(ext, ["csv"]) == -1) {
alert('Upload CSV');
return false;
}
if (e.target.files != undefined) {
var reader = new FileReader();
var csvLines;
var csvValues;
var i;
reader.onload = function(e) {
csvLines = e.target.result.split("\n");
for(i=1; i<csvLines.length; i++){
csvValues = csvLines[i].split(",");
importedLat = csvValues[0];
importedLon = csvValues[1];
markerFunc(importedLat, importedLon);
addLayer();
}
//$("#csvimporthint").html(importedLat + " " + importedLon);
reader.readAsText(e.target.files.item(0));
};
}
return false;
});
</script>
The problem that I am facing is that my reader.onload is never fired, in result of which I cannot process my file data. Kindly help me find a solution to make this code running.
P.S: To write this above code, I followed this link: http://jsfiddle.net/W8fME/1650/
I have found the answer of this question myself. The problem was in jquery code in the script tag, correct jquery code is as below:
<script>
$("#filename").change(function(e) {
var ext = $("input#filename").val().split(".").pop().toLowerCase();
if($.inArray(ext, ["csv"]) == -1) {
alert('Upload CSV');
return false;
}
if (e.target.files != undefined) {
var reader = new FileReader();
var csvLines;
var csvValues;
var i;
reader.onload = function(e) {
csvLines = e.target.result.split("\n");
for(i=1; i<csvLines.length; i++){
csvValues = csvLines[i].split(",");
importedLat = csvValues[0];
importedLon = csvValues[1];
markerFunc(importedLat, importedLon);
addLayer();
}
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
</script>