So I had to write a new user importer for School Email and I was looking for a simple plugin in solution but didn’t find one so here is a simple way of uploading a csv file that is uploaded to a file and rendered to a table..
Projects used: CsvToTable & jQuery File Upload & Editable Grid *optional for live edits.
Grab those two projects, grab the below files and put them in a /js folder then put the .js files into your head..
Put the jQuery-File-Upload folder in your root, we will be uploading files to here.. You may want to add a layer of security in front of the upload function.
<head> <script src="/js/csvToTable.js"></script> <script src="/js/jquery.iframe-transport.js"></script> <script src="/js/jquery.fileupload.js"></script> </head>
At the bottom of your body add..
<div id="csvToTable"></div> <div id="fileupload"></div> <script> var loggedIn = 1; // you will want to modify this if you require auth $(function () { if(loggedIn == "1"){ $('#fileupload').fileupload({ dataType: 'json', acceptFileTypes: '/(csv)$/i', url: '/jQuery-File-Upload/php/index.php', done: function (e, data, Users) { $.each(data.result, function(index, file){ $('#csvToTable').html(""); $('#csvToTable').CSVToTable(file.url).bind("loadComplete",function() { console.log("Loaded data into table"); /* Call functions to manipulate data here */ });; }); } }); } }); </script>
Want to make your table editor like the rest of the cool kids? Check out this jQuery plugin