I'm building an HTML based app for querying imported CSV file using AlaSQL. I started with this demo and tried to implement the same behavior by setting the onChange event through JQuery rather than in the tag. I basically follow the same pattern, and naively pass the event forward to the loadFile method. Alternatively, I tried just handling the alasql request right in the callback.
html:
<input id="with-jquery" name="with-jquery" type="file" />
javascript:
$('#with-jquery').on('change', function(event)
{
console.log('in jquery callback');
filename = $('#with-jquery').val();
console.log("filename: " + filename);
alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(res){
console.log('in alasql callback');
data = res;
console.log(res);
document.getElementById("jquery-result").textContent = JSON.stringify(res);
});
//loadFile(event);
});
http://plnkr.co/edit/FOWwVsW7zAUGwv3BDBdN?p=preview
When I try to load the file using the JQuery handler, I get
in jquery callback
test.js:7 filename: C:\fakepath\sample.csv
alasql.min.js:13 Uncaught Error: Wrong usage of FILE() function
Here are some questions:
I can't find documentation for what alasql expects in the [event] slot.
How does the FROM FILE method relate to the more specific FROM CSV and FROM XLSX methods.
The wiki shows using the FROM CSV method by supplying a file name. I can't imagine how that would work without supplying the full path to a local file. But you can't get that from the browser.
The wiki also recommends using the "promise" format. How would I implement that here?
Related
I'm having some trouble getting the html2pdf.js to properly give me a callback so that I can convert it to a base64 string.
I have tried this:
html2pdf().from(el).then(function(pdf) {
// pdf is null when I log this...
console.log(pdf);
}).save();
Along with many other variations using everything from output() to this:
var pdf = new jsPDF();
html2pdf().from(element).set({ pdf: pdf }).toPdf().save();
All to no avail.
I'm currently on v.0.9.0. All that I really need to get is the base64 so I can send that back to the server and attach it to an email - it doesn't really matter to me how I accomplish that but I'm having issues figuring out how to use this callback properly.
I have searched through the documentation and the issues on github.
What is missing is a call to the outputPdf() method. You should also make sure that you have upgraded to the latest version of the html2pdf plugin as older versions did not have this support.
Your new code should look like this:
html2pdf().from(el).outputPdf().then(function(pdf) {
// This logs the right base64
console.log(btoa(pdf));
});
From the documentation:
[outputPdf] Sends type and options to the jsPDF object's output method, and
returns the result as a Promise (use .then to access)
Simply using output() will not return a promise, you must use outputPdf().
I am trying to download a CSV file from json data stored in a variable.
The issue is that I am not able to set the name of the downloaded file.
Here is the code...
$('#downloadCSV').click(function () {
var exportData = 'data:attachment/csv;charset=utf-8,';
exportData += 'nodeid,value\n1,212\n';
var newWindow = window.open(encodeURI(exportData));
return false;
});
I have already tried to add the HTML5 download attr:
<a id="downloadCSV" download="data.csv" href="#">Download CSV</a>
I have already tried the solutions provided by others and nothing is working with the current browsers ...
I find the FileSaver library a really useful cross-browser solution for saving files from JavaScript. Their documentation provides a compatibility table which will show you which browsers support file names.
BTW the download attribute on the <a> tag is an HTML5 feature which would apply if you were linking to a file's URL directly with the href. As you are catching the click event using JavaScript, and then returning false, this will not be doing anything.
I'm creating an offline javascript app that uses sql.js to load a sqlite database, add some filters and query the data and display various d3 based charts. However my users don't want to be bothered with the database stuff and having database file. I want to load file when the page loads.
<input id="inpLoadDB" type="file" onchange="loadDB()">
When I query that element it returns a FileList Object from which I can get the selected file. How can I build the FileList (or just the file object) without including the HTML element. Something like:
var fl=new FileList();
fl.readDir("./data/");
Accessing files from browser is restricted. If you're executing it from a browser it requires user interaction like upload file button. Even the File access api for HTML5 requires user to do something to get a file https://www.html5rocks.com/it/features/file_access
Check this other answer on StackOverflow with an update for 2016 https://stackoverflow.com/a/372333/4635829
You can access the filesystem programming with Javascript if you write a Node.js app and use the File I/O module
var fs = require("fs");
// Asynchronous read
fs.readFile('input.txt', function (err, data) {
if (err) {
return console.error(err);
}
console.log("Asynchronous read: " + data.toString());
});
// Synchronous read
var data = fs.readFileSync('input.txt');
console.log("Synchronous read: " + data.toString());
console.log("Program Ended");
I can't find a single bit of information about how to do this, so I'm resorting to asking a question here.
How do I actually load a local file and parse it using PapaParse?
I currently have:
$(function() {
Papa.parse(new File("text.csv"), {
complete: function(results)
console.log("Finished:", results.data);
}
});
});
...but I have decided the constructor must be intended for creating new files. How am I supposed to do this? PapaParse's website shows this:
Papa.parse(file, {
complete: function(results) {
console.log("Finished:", results.data);
}
});
...buuut that doesn't explain where file came from.
You need to read the file from the system before trying to parse it.
If you are trying this in a web application, you could add a file uploader and call Papa.parse() after an event: i.e. either when file changes, or at the click of a button.
<input type="file" id="fileInput" />
Then you need to add an onchange or onclick event function accordingly.
Inside the event function, you can access the file as:
event.target.files[0]
If you are using this on a server, you can use any filesystem methods to read your file.
Like in Node.js we have fs.readFile() function to read a file from the system at a given path.
Is it possible to get a fileEntry object in Chrome Apps by opening a file via Drag'n'Drop? When I drop a file into my app I only get a file object which seems to be unrelated to the file system. I can't use that object to save the file after changing it.
I get the file like this:
document.body.addEventListener('drop', function (event) {
file = event.dataTransfer.files[0]
});
What I want to do
I'm developing a text editor and I want to add a feature to open a file by dragging it into my app.
As I said: I already get the content of the file, but I can't write changes back to the file since I need a fileEntry object in order to do so.
Okay, I just found it while inspecting the event object. In the event object there's a function called webkitGetAsEntry() to get the fileEntry object. Here's the correct code:
document.body.addEventListener('drop', function (event) {
fileEntry = event.dataTransfer.items[0].webkitGetAsEntry();
});
This is the object you can use to write changes back to the file system.
Code for reference:
// Of course this needs the "fileSystem" permission.
// Dropped files from the file system aren't writable by default.
// So we need to make it writable first.
chrome.fileSystem.getWritableEntry(fileEntry, function (writableEntry) {
writableEntry.createWriter(function (writer) {
// Here use `writer.write(blob)` to write changes to the file system.
// Very important detail when you write files:
// https://developer.chrome.com/apps/app_codelab_filesystem
// look for the part that reads `if (!truncated)`
// This also is very hard to find and causes an annoying error
// when you don't know how to correctly truncate files
// while writing content to the files...
});
});