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 > 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

Nacht der Sterne 2022 – TYPEMYKNIFE®

Ich hatte dieses Jahr die Möglichkeit, über meinen Kunden TYPEMYKNIFE®, an der "Nacht der Sterne" in Stuttgart, im Mercedes-Benz Museum,… Read More

2 months ago

Visual House | 3D Visualisierung – 2022

"Visual House erstellt realistische 3D Video-Animationen, Panoramatouren, Außen- und Innen Ansichten für Ihr Bauvorhaben." "Visual House creates realistic 3D video… Read More

6 months ago

3D Messer Gravur Konfigurator – TYPEMYKNIFE® | 2022

TYPEMYKNIFE® - allows you to laser ingrave your knife using a unique 3D configurator. I redesigned their 3D knife configurator… Read More

6 months ago

Display Calibration / Spyder / Mac M1

Why? Color correction is important to me and to the projects I do. Regularly calibrating your monitor is essential in… Read More

9 months ago

Hosting MP3 files on Google Drive + HTML5 Audio Player

What Google Drive Sharing offers us! I am doing a Podcast on portalZINE.TV since last year and always host a… Read More

9 months ago

5 auf einen Streich – Folge 104

Die erste Folge nach einer langen Pause ;) Folge 104 Read More

10 months ago