使用JavaScript将tsv文件上传按钮添加到Jupyter Notebook

Question

So I am using Jupyter 4.x and python 3.5, trying to "upload" a .tsv , but really just trying to capture it as a string and then use setTimeout(function(){IPython.notebook.kernel.execute("stringData=StringIO(+"fr.result")");},5000);

to allow time for the FileReader() object to complete the binary-string conversion then save the string into a python variable. I tested that the Filereader() was working by printing the entire .tsv file in the console. For some reason, though, stringData remains undefined on the python side.Here is the javascript cell:

%%HTML
<input type="file" id="CSVFileInput" onchange="handleFiles(this.files)" value="upload csv">

<script>
var inputElement=document.getElementById('CSVFileInput');
function handleFiles() {
    var file = inputElement.files[0];
    var fr = new FileReader();
    fr.readAsText(file);
    var outputString=fr.result;
    var command = "dataString ='"+outputString+"'";  
    setTimeout(function(){
        IPython.notebook.kernel.execute(command);}
        ,5000);
}
inputElement.addEventListener("change", handleFiles, false);
</script>

And in the next cell I test the output and get NameError because dataString is undefined, here is the next cell:

dataString

Also, I'm kind of new to javascript, so any and all advice is welcome, I only think this is the easy way. Pls? And, of course, thanks a lot!

Answer 1

FileReader methods are asynchronous so there is no data loaded at the time you try to set outputString to the result.

The proper way to handle this is to use the load event handler, so instead of using setTimeout() , which is unreliable for asynchronous handling, you can modify the code to the following:

function handleFiles() {
  var file = this.files[0];              // "this" is the calling element
  var fr = new FileReader();
  fr.onload = function() {
    var outputString = this.result;      // here the data is ready. Now "this" = fr
    var command = "dataString ='" + outputString + "'";  
    IPython.notebook.kernel.execute(command);
  };
  fr.readAsText(file);                   // invoked asynchronously
}

Also remove the inline JavaScript in the HTML:

<input type="file" id="CSVFileInput" onchange="handleFiles(this.files)" value="upload csv">

to

<input type="file" id="CSVFileInput" title="upload csv">

( value has no effect when input is type=file , use title instead). Then use the following code to take care of event handling (after the DOM has loaded):

document.getElementById("CSVFileInput").addEventListener("change", handleFiles);

 function handleFiles() { var file = this.files[0]; // "this" is the calling element var fr = new FileReader(); fr.onload = function() { var outputString = this.result; // here the data is ready. Now "this" = fr var command = "dataString ='" + outputString + "'"; //IPython.notebook.kernel.execute(command); console.log("Loaded file. Command:", command); }; fr.readAsText(file); // invoked asynchronously } document.getElementById("CSVFileInput").addEventListener("change", handleFiles); 

 <input type="file" id="CSVFileInput" title="upload csv"> 

Answer 2

So, @K3N definitely gave me a valuable piece of the puzzle and lesson in async functions. However, the main issue was that python did not recognize the string inputs it was receiving from javascript, so I thought I'd share my journey with all. I ended up converting the string to a 2d javascript array, then I shift() the first row off for the column names, transpose the remaining rows, and clean out all the dumb stuff from english that stops it from working (quotes and apostrophes). Now I can pd.DataFrame(dict(zip(colNames,cols))) and run all the calculations I run on the same .tsv when I read it in from my filesystem. Here is the full script, basically the fixes @K3N showed me plus the pythonify(arr) function:

    <input type="file" id="TSVFileInput" title="upload tsv">

function handleFiles() {
    //read in file and instantiate filereader
    let file = this.files[0];// "this" is the calling element
    let fr = new FileReader();

    fr.onload = function() {        
        //split on row delimeter (CRLF)
        let outputBuffer = this.result.split("\r\n");  
        let command;
        // split outputBuffer into 2d array
        outputBuffer= outputBuffer.map(line => line.split("\t"));
        //pop names row from output Buffer
        let names=outputBuffer.shift();
        //optimized transpose   
        outputBuffer=outputBuffer.reduce(
            (temp,row) => 
                row.map((element,i) => 
                    (temp[i] || []).concat(element))
            ,[] //initializes temp
        );
        //build python command 
        command="colNames ="+pythonify(names);
        //send command to notebook kernel
        IPython.notebook.kernel.execute(command);    
        //loop appends columns on python side
        for(let i=0 ; i< outputBuffer.length ; i++){  
            command="cols.append("+pythonify(outputBuffer[i])+")";    
            IPython.notebook.kernel.execute(command);   //send command to kernel
        } 
    }; //end fr.onload()
    fr.readAsText(file); // invoked asynchronously, triggers fr.onload
}//end handleFiles()

function pythonify (arr){    
//turns javascript array into string representation of python list
    let out= '[';
    for(let i=0 ; i<arr.length ; i++){
        var element=arr[i];
        //format double and single quotes
        element=element.replace(/\"/g,'\\"').replace(/'/g,"\\'");
        //use python raw string
        out+='r"'+element+'"';
        if(i<arr.length-1){ //skip last comma
            out+=',';
        }
    }
    out+=']';
    return out;
}// end pythonify(arr)

document.getElementById("CSVFileInput").addEventListener("change", handleFiles);