Preview a CSV In-Browser

  • This uses Papa Parse to parse the first few rows of a CSV to preview it before uploading.
  • <script lang="ts">
      import Papa from 'papaparse';
      let columns: string|undefined;
      let previewRows: Array<Record<string, string>> = [];
      async function openFile(file: File|undefined) {
        if(!file) {
        Papa.parse(file, {
          header: true,
          preview: 3, // To read first 3 data rows
          skipEmptyLines: 'greedy', // Well-formed CSV files don't need this
          complete(parsed) {
            if(parsed.errors?.[0]) {
              error = parsed.errors[0].message;
            } else if(parsed.meta.fields) {
              columns = parsed.meta.fields;
              previewRows =;
      on:change={(e) => openFile(e.currentTarget.files?.[0])} 

Thanks for reading! If you have any questions or comments, please send me a note on Twitter.

Please also consider subscribing to my weekly-ish newsletter, where I write short essays, announce new articles, and share other interesting things I've found.