Uncaught ReferenceError: XLSX is not defined on drop file

Question

I want to be able to drag and drop an excel file, but for some reason when declaring my workbook var workbook = XLSX.read(data, {type: rABS ? 'binary':'array'}); it says it's not defined.

I think I'm missing something to connect this index.js to server.js which has the var XLSX = require('xlsx'); in it. I've looked and looked online and haven't found the right fix. I would like to avoid using a module to require() inside of HTML.

What I think is the important code:

server.js:

var express = require("express");
var app = express();
var XLSX = require('xlsx');
var fs = require('fs');
var JSON = require('JSON');
var path = require('path');

index.js:

$(document).ready(function(){
var rABS = true; // true: readAsBinaryString ; false: readAsArrayBuffer
    $excelHolder.on('drop', function(e){
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        var file = files[0];
        var reader = new FileReader();
        console.log("got to before reader");
        reader.onload = function (e) {
            console.log("got to reader.onload");
            var data =e.target.result;
            var workbook = XLSX.read(data, {type: rABS ? 'binary':'array'});

            var sheet_name_list = workbook.SheetNames;
            var excelObj = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]);
            var json = JSON.stringify(excelObj);
            var callback = "looks like it worked";
            console.log("did it upload?");

            fs.writeFile('excelfile.json', json, function(err){
                (err) ? console.error(err) : console.log(callback.toString());
            });
            // preview?
        };
        if(rABS) reader.readAsBinaryString(file); else reader.readAsArrayBuffer(file);

    });
}

index.html:

<div class="huge">22</div>
   <div>Uploads!</div>
   <input name="uploads[]" type="file" accept=".xls,.xlsx,.ods,.csv" style="display: none;" id="excelInput">

Any help is much appreciated.

Answer 1

I can see a few problems here:

• fs and path are modules that are built into NodeJs, hence they are not available in the browser.
• You'll need some kind of build tool for your JS if you want to use require for client-side code. Browserify and Webpack are good places to start.
• If you don't want to get into that (It's complex so I wouldn't blame you!) you can add the XLSX module to the browser with a <script> tag: https://www.npmjs.com/package/xlsx#installation - it seems like it should work.
• There are some examples on the XLSX GitHub page, one of which includes drag & drop and may help you get where you want? https://github.com/SheetJS/js-xlsx (And specifically https://github.com/SheetJS/js-xlsx/tree/master/demos/datagrid)