In my .js, I want to be able to provide some function with the path, and then be able to read from the .xlsx file. I have tried the FileReader(), but there is no way to specify a local path to read from. Does anyone know of any way to do this? Thanks.
The MDN page for FileReader links to Using files from web applications which has examples.
You specify the local path using a file input:
<input type="file" id="input">
and then
var selected_file = document.getElementById('input').files[0];
var reader = new FileReader();
reader.readAsBinaryString(selected_file);
Obviously a web page cannot specify an arbitrary file on the user's system to read. That would be a massive security risk.
Related
I need to read excel file data when upload the file .
Is there any way that can use html5 to read excel file data when file uploading in client side??
heard about
var reader = new FileReader();
any way that we can use this
Referring to #mituw16 comment on the question, take a look at the following question:
How to parse Excel file in Javascript/HTML5
As a seperate response to work from, I would suggest using a plugin like:
https://github.com/SheetJS/js-xlsx
To iterate through the spreadsheet and save the information in your database.
Working in Chrome, loading a local html or JS file.
I found many examples of how to load a file that is selected using the Choose File input.
However, didn't figure out how to do it given a file name without using the Choose File input.
The Choose File input returns a File object.
How to create the File object without the Choose File input?
From the File API:
new File(
Array parts,
String filename,
BlobPropertyBag properties
);
But didn't figure out what the parts and properties would be.
Edit: Use case:
I have code coverage results generated as part of a test suite. It is stored as JSON (which is easy to read), but I need to display it with the source code.
So the feature is to load the source code and JSON data, and render them together on a web page using HTML and Javascript.
The file would be opened from the browser and lives on the local machine. There is no server.
The browser cannot load arbitrary files by name from your filesystem without special extensions or other shenanigans. This is a security policy to prevent random web sites from reading files from your hard disk as you browse the internet.
If you're down to do something special like if you want to write a chrome app, you could get access to some nice APIs for accessing the filesystem:
https://developer.chrome.com/apps/fileSystem
The File constructor doesn't read a file from the harddrive, but rater make a virtual file, consider this:
var file = new File(["some", "content"], "/tmp/my-name.txt");
var reader = new FileReader();
reader.onload = function() {
console.log(reader.result); // somecontent
};
No file will be read or stored on the clients machine.
If you are talking about creating files in nodejs then you should take a look at fs.
For security reasons all browsers don't support predefined values on file fields so the answer is you can't.
I used the following code. I can download the file with extension .xls. When I open this downloaded file I receive this warning:
The file you are trying to open, 'Statement.xls', is in a different
format than specified by the file extension. Verify that the file is
not corrupted and is from a trusted source before opening the file. Do
you want to open the file now?
Javascript Code:
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.ms-excel;" });
saveAs(blob, "Statement.xls");`
HTML code:
`<table id="exportable">
<tbody>
<tr><th>ColumnOne</th><th>ColumnTwo</th><th>ColumnThree</th></tr>
<tr><td>row1Col1</td><td>row1Col2</td><td>row1Col3</td></tr>
<tr><td>row2Col1</td><td>row2Col2</td><td>row2Col3</td></tr>
<tr><td>row3Col1</td><td>row3Col2</td><td>test</td></tr>
</tbody>
</table>`
External library:
https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js
Office and Excel are able to cope with two different file formats. As those formats are totally different from the inside (the old one is binary, the new one is simply zipped up XML) different extensions and mimetypes were assigned to these formats.
Obviously you are creating a file with the new format and assign it the old extension. Excel complains about that.
Change your code to look like this:
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
saveAs(blob, "Statement.xlsx");
For the sake of learning you might want to have a look at your created file with a hex editor.
Others had similar issues, have a look here: https://github.com/eligrey/FileSaver.js/issues/139
When saving file with *.xls extension, file type should be set to "application/xls"
Since file type and extension will be matching, you shouldn't get any warning.
I need to add a browse button inside my Chrome extension. Users click it and choose a file. I then want to retrieve the file contents (bytes) and do some work on it.
I don't want to have to submit the file to a remote server and then get the response (if that's even doable from inside a Chrome extension), it should be all client-side.
Is this doable inside Chrome extensions?
You should be looking at the FileReader API.
The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
A very good basic example of using this interface is in this question.
A minimal example: suppose that you have an <input type="file" id="file"> with a text file selected.
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.onload = function(e){
console.log(e.target.result);
}
reader.readAsText(file);
If you need methods other than reading as text (i.e. binary data), see the docs.
Also, this is a good overview: Using files from web applications
Regarding your question it is totally feasible to load and process a file within an extension. I implemented it using message passing https://developer.chrome.com/docs/extensions/mv3/messaging/.
Here is an example of how you can implement it, in my case I used the input file to load an excel. This is my public repo.
https://github.com/juanmachuca95/gomeetplus
Is there any way to check for file format and size of the file before uploading it in javascript?
No, that's not possible. You can check for the extension but still it could be wrong because a text file renamed to zip will show you zip as an extension. You need server-side script for that.
Once file is uploaded, you can check its mime-type and size with server-side script.
Assuming you've obtained the fileTobeUploaded object (i don't know how you are doing the upload), with the following you could get the size in bytes.
var reader = new FileReader();
reader.onload = (function(theFile) {
alert(theFile.size);
})(fileTobeUploaded);
I believe you can retrieve size information about the file using FLASH, however to determine the file format, you will most probably need to rely on the file extension... and that's a weak determination with regards to security (malware etc.)