Javascript parse XLS - XLSX not defined - javascript

I have been trying to use sheetJS and follow examples that completely work in jsfiddle, however I cannot get to work when creating a new js file. I have tried multiple browswers, but keep getting the same error "XLSX is not defined"
I have tried this Excel to JSON javascript code? and wanted to ask on there but needed 50 rep to leave a comment.
Here is the code snippet and am including the following files in this order:
shim.js, jszip.js,xlsx.js
var oFileIn;
$(function() {
oFileIn = document.getElementById('xlf');
if(oFileIn.addEventListener) {
console.log("if hit")
oFileIn.addEventListener('change', filePicked, false);
}
$("#xlf").on("change",function(oEvent){
console.log("jqiey workd?")
filePicked(oEvent)
})
});
function filePicked(oEvent) {
// Get The File From The Input
var oFile = oEvent.target.files[0];
var sFilename = oFile.name;
// Create A File Reader HTML5
var reader = new FileReader();
// Ready The Event For When A File Gets Selected
reader.onload = function(e) {
var data = e.target.result;
var cfb = XLSX.read(data, {type: 'binary'});
console.log(cfb)
cfb.SheetNames.forEach(function(sheetName) {
// Obtain The Current Row As CSV
var sCSV = XLS.utils.make_csv(cfb.Sheets[sheetName]);
var oJS = XLS.utils.sheet_to_json(cfb.Sheets[sheetName]);
$("#my_file_output").html(sCSV);
console.log(oJS)
$scope.oJS = oJS
});
};
I have tried numerous examples, this is just the only one I came across that worked on jsfiddle. The same error occurs if it is XLS or XLSX...
In other examples such as the one provided by sheetJS it has
var X = XLSX;
right under the script segment, and will automatically get error that XLSX is not defined on that line.
Anyone come across this, or know what the issue is?
-Thanks!!!

The included files with the project weren't correct. The project had a corrupt js file. I fixed it by manually adding all sheet project download folder and replacing files.

Related

Insert image from Google drive into sheet

I'm trying to insert image into sheet. However, it keeps return Error retrieving image from URL or bad URL. The webContentLink method works normally. It return a link with &export=download. I even tried to truncate that and insert image but still get the same error. Many of the image files have the public-anyone can see sharing setting.
I have tried many ways to insert image but none is working. Some answers about this were about 3-4 years ago so I just have to ask again to make sure. I have tried function IMAGE in sheet but it often load the image very slowly (often 10s of minutes after entering the function). I also tried blob method but to no avail. It returns the strange error that I don't know how to handle a server error occurred. The function works normally for other files, working with files in Google Drive is very very difficult. I am at my wit's end, please help.
function insertImg()
{
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
var currentCell = sheet.getActiveCell();
var thisFileId = SpreadsheetApp.getActive().getId();
var thisFile = DriveApp.getFileById(thisFileId);
var folder = thisFile.getParents().next();
var files = folder.getFiles();
var i =0;
while (files.hasNext())
{
var file = files.next();
if (file.getMimeType()== 'image/jpeg')
{
i++;
var img = Drive.Files.get(file.getId()).webContentLink;
sheet.insertImage(img, 1, i);
}
}
}

Web Development Displaying Local Files

Based on research, I've found tutorials, such as this one from Eric Bidelman, that go into FileReader usage. Instead of local files, these tutorials use files provided by the user. Modifying these examples to try and display local files were not successful.
After some research I've found that most browsers by default do not allow access to local files [1]. Some recommend using unsafe modes for testing, but that's not what I'm looking for as that would apply to only my testing [2].
Currently I allow the download of log files. My goal here with FileReader was to provide a way to view the files as well. Is there a way to achieve this? I'm coming up with blanks and have almost resigned to only allowing downloads instead of adding viewing. The following is example code of local file reading. This code fails since 'logpath' is not of type blob. I believe my question doesn't really require code, but I provided an example anyway.
HTML Code
<select name="loglist" id="loglist" onchange="run()" size="2">
<option>stack1.log</option>
<option>stack2.log</option>
</select>
Javascript
function run() {
var reader = new FileReader();
log = document.getElementById( "loglist" ).value;
var logdir = "/var/log/";
var logpath = logdir.concat(log);
reader.onload = function() {
logtext = reader.result;
alert(logtext);
}
reader.readAsText(logpath);
}
There is no way for JavaScript, embedded in a webpage, to access files on the user's local system other than through the File API when the user selects the file using a file input. It is not possible for the page to supply the file name to be opened.
var inp = document.querySelector("input");
inp.addEventListener("change", show);
function show(e) {
var f = this.files[0];
var r = new FileReader();
r.addEventListener("load", display);
r.readAsText(f);
function display(e) {
document.body.appendChild(
document.createTextNode(
e.target.result
)
);
}
}
<input type="file" id="input">

Javascript new File() gem file size

I have the following file structure:
test.html
test.json
And the following JS function:
function get_file(){
var app_path = app.activeDocument.path,
file = new File(app_path + '/test.json');
console.log(file);
}
How can I make the function log the file's content?
I'm not sure if everything you can do in the browsers environment translates to everything you can do in photoshops environment. But you should look at a few things.
Doing This in the Browser
The File object.
https://developer.mozilla.org/en-US/docs/Web/API/File
Notable that it extends the Blob object.
https://developer.mozilla.org/en-US/docs/Web/API/Blob
Which if you researched you would find it can be read using the FileReader.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
So this would work in the browser but may/may-not work in the photoshop scripting set.
function get_file(){
var app_path = app.activeDocument.path,
file = new File(app_path + '/test.json');
var reader = new FileReader();
reader.onloadend = function() {
console.log(reader.result);
}
reader.readAsText(file);
}
This is asynchronous so you may need to use a callback depending on what you're trying to do with this. You won't be able to return the string from inside the reader.onloadend event.
Doing This in Photoshop
Take a look at their scripting references. Specifically the javascript reference.
All Resources: http://www.adobe.com/devnet/photoshop/scripting.html
Javascript PDF: http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/photoshop/pdfs/photoshop-cc-javascript-ref-2015.pdf
It looks like they don't have the FileReader but instead the File object can be used to read content. The File API begins on page 109 but it's empty! The documentation is a bit pathetic so I can see why you'd have trouble finding this. With some searching I found someone doing this in 2012 (but I don't know if it will still work- worth a shot)
var b = new File("c:\test.txt");
b.open('r');
var str = "";
while(!b.eof) {
str += b.readln();
}
b.close();
alert(str);
Let me know if that works.

How do i remove files from a zip file uploaded through kendoUpload? Using jszip

After the user uploads a zipped file, i want to remove the images folder from it before sending it over the network. I am using kendo for uploading, and the existing functionality works fine. I just want to add on the removing images part. This is what i have so far:
function onSelect(e) {
var file = e.files[0];
if (endsWith(file.name, '.eds')) {
var contents = e.target.result;
var jszip = new JSZip(contents);
jszip.remove("apldbio/sds/images_barcode");
fileToSend = jszip.generate({type: "base64", compression: "DEFLATE"});
}
e.files[0] = fileToSend;
openProgressDialog(e.files.length); //this is existing code, works fine
}
target.result doesn't seem to exist in the event e. And nothing works properly from that point on. e should probably be used inside a FileReader object's onload(), (as seen here and here) but i have no idea how to use a FileReader for my purpose, with kendo Upload.
EDIT:I did some more reading and now i am using FileReader like this:
var reader = new FileReader();
reader.onload = function (e) {
// do the jszip stuff here with e.target.result
};
reader.onerror = function (e) {
console.error(e);
};
reader.readAsArrayBuffer(file);
Note : file = e.files[0] as in the 1st code block.
With this though, i get the error:
Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

repeative partial reads using html5 file APIs

I do NOT want to read the ENTIRE contents of a file into memory; only parts of it, and only on demand.
Yet, It seems I can read a chunk ONLY ONCE (using a file.slice()), while all following reads return zero-length. Any ideas?
Here is a simplified sample of the code that fails on 2nd call:
var chunkNo=0;
function readNextChunk()
{
var file=document.getElementsByTagName("input").item(0).files[0];
var blob=file.slice(100*chunkNo, 100);
var reader=new FileReader();
reader.onload=function(e) { console.log("No"+chunkNo+":\n"+reader.result);
chunkNo++;
};
reader.readAsText(blob);
}

Categories

Resources