I want the user to be be able to chose a JSON file on there computer, this JSON file should then be made available to the client side Javascript.
How would I do this using the FILE API, the ultimate goal is the the user selected JSON file to be available as an object which I can then play about with in Javascript. This is what I have so far:
JsonObj = null
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
f = files[0];
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
JsonObj = e.target.result
console.log(JsonObj);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
FIDDLE: http://jsfiddle.net/jamiefearon/8kUYj/
How would I convert the variable JsonObj to a proper Json object, one can can add new fields to etc.
Don't load the data as a "DataUrl" via readAsDataURL, instead use readAsText then parse it via JSON.parse()
e.g.
JsonObj = null
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
f = files[0];
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
JsonObj = JSON.parse(e.target.result);
console.log(JsonObj);
};
})(f);
// Read in the image file as a data URL.
reader.readAsText(f);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
Related
I have a binaryString variable as readAsBinaryString. How can I convert it to data:uri?
var reader = new FileReader();
reader.onloadend = function () {
var binaryString = reader.result;
console.log(binaryString);
console.log(window.btoa(binaryString));//does not contain mime-type at the beginning
}
var file=document.getElementById("fileToUpload").files[0];
reader.readAsBinaryString(file);
I need to operate over directly binaryString. I am sending the binaryString to another Javascript application. So in that context I only have binaryString value. The code above is just an example. Please do not recommend URL.createObjectURL or FileRader.readAsDataURL.
I need to operate over binaryString directly and convert it data:uri.
how can i generate base64 string from local audio file?
i needed for send after via socket.io as base 64 string
i use angularjs actually
angular.module('starter.controllers', [])
.controller('DashCtrl', function () {
var handleFileSelect = function (evt) {
var file = evt.target.files[0];
var reader = new FileReader();
// this is the path of the file that i will have to send to the server
// /android_asset/www/sounds/button-1.mp3
reader.onload = function (readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
};
});
I'm trying to read a zip file in my JavaScript.
function handleFileSelect(evt) {
var files = evt.target.files[0]; // FileList object
console.log("name "+files.name);
var reader = new FileReader();
var zip = new JSZip(evt.target.result);
for( var entryName in zip.files){
console.log("name of files "+entryName.name);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
https://github.com/Stuk/jszip
https://jsfiddle.net/3n4ndw86/1/
That's what I wrote so far, but I don't get the name of the files in the console
Consider the following code
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var myFile = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(myFile);
var myString = reader.toString();
alert(myString); // print - "[object FileReader]"
}
I try to get all the file content into String , for example if the file content is
helloWorld1
helloWorld2
I will get alert of that's content .
That's not how you get the result of a FileReader. Modify your code to this:
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var myFile = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(myFile);
reader.onload=function(){alert(reader.result)}
}
I have a function that is supposed to read from a file into a variable
I want to know the validity of the reads and was wondering if there was any way I could examine the contents of the variable after the upload action has been performed.
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
parser=new DOMParser();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Print the contents of the file
// var span = document.createElement('span');
xmlDoc=parser.parseFromString(e.target.result,"text/xml");
try{
DistributomeXML_Objects=xmlDoc.documentElement.childNodes;
}catch(error){
DistributomeXML_Objects=xmlDoc.childNodes;
}
//document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the file
//reader.readAsDataText(f,UTF-8);
reader.readAsText(f);
}
//xmlDoc.getElementsByTagName("distributome").item(0).appendChild(node);
traverseXML(false, null, DistributomeXML_Objects, distributome.nodes, distributome.edges, distributome.references, distributomeNodes, referenceNodes);
}
I want to check if xmlDoc is valid. What would be a good way to do this without using print statements.
You can use the console and log variables content using the
console.log("my variable content",variable);
you can see it in the browser console using firebug or the native console of chrome or opera...