Development

Importing CSV files with HTML5 and Papa Parse!

PAPA PARSE

Papa Parse is a powerful, in-browser CSV parser for the big boys and girls :)
If you do need easy CSV parsing and conversion back to CSV, take a look at it!

  1. // Parse CSV string
  2. var data = Papa.parse(csv);
  3.  
  4. // Convert back to CSV
  5. var csv = Papa.unparse(data);
  6.  
  7. // Parse local CSV file
  8. Papa.parse(file, {
  9.         complete: function(results) {
  10.                 console.log("Finished:", results.data);
  11.         }
  12. });
  13.  
  14. // Stream big file in worker thread
  15. Papa.parse(bigFile, {
  16.         worker: true,
  17.         step: function(results) {
  18.                 console.log("Row:", results.data);
  19.         }
  20. });

SIMPLE TESTDRIVE

  1.  <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
  1. document.getElementById('txtFileUpload').addEventListener('change', upload, false);
  2.  
  3.  function upload(evt) {
  4.  
  5.         var data = null;
  6.         var file = evt.target.files[0];
  7.         var reader = new FileReader();
  8.         reader.readAsText(file);
  9.         reader.onload = function(event) {
  10.                 var csvData = event.target.result;
  11.                
  12.                  var data = Papa.parse(csvData, {header : true});
  13.                
  14.                 console.log(data);
  15.                
  16.         };
  17.         reader.onerror = function() {
  18.                 alert('Unable to read ' + file.fileName);
  19.         };
  20.  
  21. }

ABOUT

Papa Parse is the fastest in-browser CSV (or delimited text) parser for JavaScript. It is reliable and correct according to RFC 4180, and it comes with these features:

  • Easy to use
  • Parse CSV files directly (local or over the network)
  • Fast mode
  • Stream large files (even via HTTP)
  • Reverse parsing (converts JSON to CSV)
  • Auto-detect delimiter
  • Worker threads to keep your web page reactive
  • Header row support
  • Pause, resume, abort
  • Can convert numbers and booleans to their types
  • Optional jQuery integration to get files from <input type="file"> elements
  • One of the only parsers that correctly handles line-breaks and quotations

USAGE

I am currently using it to quickly parse Adobe Audition CSV marker files and prepare them for storage for my podcast.

  1. Name    Start   Duration        Time Format     Type    Description
  2. Ankündigungen  0:20.432        0:00.000        decimal Cue    
  3. Stargate Table Read     1:12.811        0:00.000        decimal Cue    
  4. Dune Part One 2021      1:58.677        0:00.000        decimal Cue    
  5. Dust - Cosmo    2:20.925        0:00.000        decimal Cue    
  6. Nina - Beyond Memory    2:51.276        0:00.000        decimal Cue    
  1. Papa.unparse(tabData, {
  2.         delimiter: "\tab",
  3.         header: true,
  4.         newline: "\r\n",
  5.         skipEmptyLines: true
  6. })

Papa Parse @ GitHUB

Homepage / Demo

Alex

I am a full-stack developer. I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing. I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest. Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Recent Posts

B&B / Hotel Booking Solutions for WordPress | 2024

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More

4 weeks ago

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

2 months ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

4 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

4 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

5 months ago

Archaeology Travel Booth – Travel Innovation Summit 2023

Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More

6 months ago