This is my below function i want to directly provide value to file reader which will read csv file from c:\mp.csv and perform it task.
$("#csv").bind("change", function (event) {
var reader = new FileReader();
reader.onload = function (theFile) {
try {
alert(theFile.target.result);
var input = $.csv.toArrays(theFile.target.result);
} catch (e) {
alert("CSV Parse error.");
return;
}
$("#output").pivotUI(input, {
renderers: $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.gchart_renderers,
$.pivotUtilities.d3_renderers)
});
};
reader.readAsText(event.target.files[0]);
});
Related
I have a webpage where I drop the zip file which extracts the files. how to get the file and use it as img src. I'm getting 'undefined' imgurl1 value
let url1 = "IM/" + DIALOG_BACKGROUND_IMAGE ;
try {
JSZip.loadAsync(newFile).then(function (zip) {
for (var name in zip.files) {
if (name === url1) {
return zipFiles.file(name).async('blob');
}
}
return zip.file("").async("string");
}).then(function success(blob) {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
imgurl1 = reader.result;
}
puttingData(data, imgurl1,imgurl1);
}, function error(e) {
console.log(e);
});
} catch (e) {
console.log(e);
}
I am trying to access only the text from an event.target but using innerText does not return the text. It returns undefined or blank.
Here's what I've tried.
function init(){
document.getElementById('fileInput').addEventListener('change', handleFileSelect); //'change' refers to when the file changes, 2nd argument calls function
}
function handleFileSelect(event){
const reader = new FileReader();
reader.onload = (evt)=>{
console.log(evt.target.result);
// console.log(evt.target.result.innerText);
document.getElementById('fileContent').textContent = evt.target.result;
};
reader.onerror = ()=>{
console.log("ERROR READING FILE");
};
reader.readAsText(event.target.files[0]); //takes only the first element (file) uploaded
}
window.onload = init; //when everything loads
I have also tried
console.log(evt.target.innerText)
But still does not work. Does anyone know why?
JQuery Verison
function getTextFromHTML(htmlText) {
var temp = $('<div>');
var text = temp.html(htmlText).text();
temp.remove();
return text;
}
function init() {
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
}
function handleFileSelect(event) {
const reader = new FileReader();
reader.onload = (evt) => {
var htmlText = evt.target.result;
document.getElementById('fileContent').textContent = getTextFromHTML(htmlText);
};
reader.onerror = () => {
console.log("ERROR READING FILE");
};
reader.readAsText(event.target.files[0]);
}
window.onload = init;
<input id="fileInput" type="file" />
<div id="fileContent"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Pure JavaScript Version
function getTextFromHTML(htmlText) {
var temp = document.createElement("div");
var html = temp.innerHTML = htmlText;
var text = temp.textContent;
return text;
}
function init() {
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
}
function handleFileSelect(event) {
const reader = new FileReader();
reader.onload = (evt) => {
var htmlText = evt.target.result;
document.getElementById('fileContent').textContent = getTextFromHTML(htmlText);
};
reader.onerror = () => {
console.log("ERROR READING FILE");
};
reader.readAsText(event.target.files[0]);
}
window.onload = init;
<input id="fileInput" type="file" />
<div id="fileContent"></div>
To get the result from a FileReader you should just use reader.result.
Like so (this is your code, working completely fine):
function init(){
document.getElementById('fileInput').addEventListener('change', handleFileSelect); //'change' refers to when the file changes, 2nd argument calls function
}
function handleFileSelect(event){
const reader = new FileReader();
reader.onload = (evt)=>{
document.getElementById('fileContent').textContent = evt.target.result;
};
reader.onerror = ()=>{
console.log("ERROR READING FILE");
};
reader.readAsText(event.target.files[0]);
}
window.onload = init;
<input type="file" id="fileInput" />
<div id="fileContent">file content</div>
If this doesn't work as intended on your end, check here if your browser supports the FileReader API: https://caniuse.com/#feat=filereader
I am using FileReader in ExtJs and i want to return a boolean after reading the file and compare lines number with a constant. The problem is that i cant get the result in on-load event. I think i need to use callback but i dont know hot to write the ExtJs function with callback. Any help, please?
My function:
fileHasAdmittedSize: function() {
var me = this;
var file = me.getView().down('#newImsiForm').down('filefield').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = (function() {
return function(e) {
var match = e.target.result.match(/\r?\n/g);
if (match.length > 4000000) {
Ext.MessageBox.show({
title: 'ERROR',
msg: WebUI.Msg.imsiMaxFileSize,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
return false;
} else {
return true;
}
};
})(file);
reader.readAsText(file);
}
If i call this function the result is undefined.
Using a FileReader object to get the size of a file is overkill, you can just use the size property of the File object.
fileHasAdmittedSize: function() {
var file = me.getView().down('#newImsiForm').down('filefield').getEl().down('input[type=file]').dom.files[0];
if (file.size > 4000000) {
Ext.MessageBox.show({
title: 'ERROR',
msg: WebUI.Msg.imsiMaxFileSize,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
return false;
}
return true;
}
I would like to know how I can get the value from a filereader() function.
Here is the code :
$(document).ready(function(){
$('#file_input').on('change', function(e){
readFile(this.files[0], function(e) {
var txt = e.target.result
var lines = txt.split("\n");
var url_check = null;
$.each(lines, function(n, data) {
if (n == 0 && data != "") {
url_check = data
}
});
$('#output_field').text(url_check);
});
console.log(url_check)
});
});
function readFile(file, onLoadCallback){
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsText(file);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file_input" type="file">
<div id="output_field"></div>
And I have this error :
Uncaught ReferenceError: url_check is not defined
My goal is to return the variable url_check to be accessible outside the readFile function
I also tried declaring url_check outside the readFile function like :
$(document).ready(function(){
$('#file_input').on('change', function(e){
var url_check = null;
readFile(this.files[0], function(e) {
var txt = e.target.result
var lines = txt.split("\n");
$.each(lines, function(n, data) {
if (n == 0 && data != "") {
url_check = data
}
});
$('#output_field').text(url_check);
});
console.log(url_check)
});
});
function readFile(file, onLoadCallback){
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsText(file);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file_input" type="file">
<div id="output_field"></div>
Since you are declaring the url_check variable inside $(document).ready(function() ..., it means it is going to be accessible only there. A solution would be to declare the parameter globally, so that any changes from the function would be still visible. If you want to do something with the variable after it is assigned, you'd have to call the function there, immediately. Calling it before might result in null results, since the file wasn't processed yet. See the jsfiddle below. I tested it any it does what you want.
$(document).ready(function() {
$('#file_input').on('change', function(e) {
readFile(this.files[0], function(e) {
var txt = e.target.result
var lines = txt.split("\n");
if (lines && lines.length > 0)
url_check = lines[0];
$('#output_field').text(url_check);
console.log(url_check);
callbackPrint();
});
});
});
var url_check = null;
function readFile(file, onLoadCallback) {
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsText(file);
}
function callbackPrint() {
console.log("From testPrint: " + url_check);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file_input" type="file">
<div id="output_field"></div>
Since the function is run asynchronously you should consider using a promise or a callback function to resolve/return the url_check in order to access it outside of the readFile function.
If you just want to log the value of url_check out console.log(url_check) must be placed inside the readFile
Thanks to some help on here I have a way of previewing images selected for and upload using:
<input type='file' name="files[]" onchange="readURL(this);" multiple />
<div id="previews"></div>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#previews');
var image = $('<img>').attr('src', e.target.result).width(150);
image.appendTo(container);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
I was wondering how to loop this function for each file selected on the input? I just don't see where to use something like .each()
edit:
am trying this.. but its wrong somewhere, as it displays 2 previews but both of the same image?
function readURL(input) {
$.each(input.files,function(i) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#previews');
var image = $('<img>').attr('src', e.target.result).width(150);
image.appendTo(container);
};
reader.readAsDataURL(input.files[0]);
});
}
input.files is a FileList, which acts like an array.
You can use jQuery.each on it like any other array.
You just need to loop over the last line, where the file is selected.
function readURL(input) {
var reader = new FileReader();
reader.onload = function (e) {
var container = $('#previews');
var image = $('<img>').attr('src', e.target.result).width(150);
image.appendTo(container);
};
$.each(input.files,function(i) {
reader.readAsDataURL(input.files[i]);
});
}