Skip to content

How to upload form for txt and xlsx in javascript

Mathias Rangel Wulff edited this page Mar 14, 2017 · 9 revisions

How to upload form for txt and xlsx in javascript?

Source: StackOverflow.com, StackOverflow.com

Questions

  1. I would like to make a form that allow user upload .txt and .xlsx file and write this file's contents in a div.I don't know if i should go server side to handle uploaded files.

  2. I want to read the file uploaded by users on the client side and then do processing on them, instead of doing it on server-side. Is it possible read files and do manipulation using javascript on client side.

Answer

You can read CSV or XLSX data with AlaSQL library. It uses js-xlsx library.

If you read data from server:

    alasql(['SELECT * FROM XLSX("data/myfile")']).then(function(data){
        // process data array
    });

If you are reading data from the browser:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.3.7/alasql.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.2/xlsx.core.min.js"></script>
    <p>Select CSV file to read:</p>
    <input id="readfile" type="file" onchange="loadFile(event)"/>
    <script>
        function loadFile(event) {
	        alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){
		        // Process data here
	        });
         }
    </script>

AlaSQL automatically recognize file type by file extension.

See this jsfiddle for a live example

Clone this wiki locally