CSV Import/Export

Example Code

import React, { useState } from 'react';

const CSVHandler = () => {
  const [importedData, setImportedData] = useState([]);
  const [fileName, setFileName] = useState('');

  // Sample data to be exported
  const sampleData = [
    { id: 1, name: 'Alice', age: 30, city: 'New York' },
    { id: 2, name: 'Bob', age: 24, city: 'London' },
    { id: 3, name: 'Charlie', age: 35, city: 'Paris, France' }, // Example with a comma in a field
    { id: 4, name: 'Diana', age: 28, city: '"Berlin", Germany' }, // Example with quotes in a field
  ];

  // Function to handle CSV file import
  const handleImportCSV = (event) => {
    const file = event.target.files[0];
    if (file) {
      setFileName(file.name);
      const reader = new FileReader();

      reader.onload = (e) => {
        const text = e.target.result;
        // Split by new line, then filter out empty lines
        const lines = text.split(/\r?\n/).filter(line => line.trim() !== ''); 
        
        if (lines.length === 0) {
          alert('CSV file is empty or invalid.');
          setImportedData([]);
          return;
        }

        // Basic CSV parsing: assumes first row is header. 
        // This simplified parser does not handle complex quoted fields robustly.
        const headers = lines[0].split(',').map(h => h.trim().replace(/^"|"$/g, '')); // Remove surrounding quotes from headers
        const data = lines.slice(1).map(line => {
          const values = line.split(',');
          const rowObject = {};
          headers.forEach((header, index) => {
            // Basic trimming and quote removal for values
            rowObject[header] = values[index] ? values[index].trim().replace(/^"|"$/g, '') : '';
          });
          return rowObject;
        });
        setImportedData(data);
      };

      reader.onerror = () => {
        alert('Error reading file!');
        setImportedData([]);
      };

      reader.readAsText(file);
    } else {
      setImportedData([]);
      setFileName('');
    }
  };

  // Function to handle CSV file export
  const handleExportCSV = () => {
    if (sampleData.length === 0) {
      alert('No data to export!');
      return;
    }

    const headers = Object.keys(sampleData[0]);

    // Manually construct CSV string with proper quoting
    const csvRows = [];

    // Add headers, ensuring they are quoted
    csvRows.push(headers.map(header => `"${header}"`).join(','));

    // Add data rows
    for (const row of sampleData) {
      const values = headers.map(header => {
        const value = row[header];
        // Convert value to string to handle non-string types
        let stringValue = String(value);

        // Escape double quotes within the string and enclose in quotes if it contains 
        // comma, newline, or double quote.
        if (stringValue.includes(',') || stringValue.includes('\n') || stringValue.includes('"')) {
          stringValue = `"${stringValue.replace(/"/g, '""')}"`; // Escape existing double quotes and wrap in quotes
        }
        return stringValue;
      });
      csvRows.push(values.join(','));
    }

    const csvString = csvRows.join('\n');

    // Create a Blob and trigger download
    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.setAttribute('download', 'exported_data.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>CSV Import/Export Example</h1>

      {/* CSV Import Section */}
      <section style={{ marginBottom: '40px', border: '1px solid #ddd', padding: '20px', borderRadius: '5px' }}>
        <h2>Import CSV</h2>
        <p>Select a CSV file to import its data.</p>
        <input
          type="file"
          accept=".csv"
          onChange={handleImportCSV}
          style={{ marginBottom: '10px' }}
        />
        {fileName && <p>Selected File: <strong>{fileName}</strong></p>}

        {importedData.length > 0 && (
          <div>
            <h3>Imported Data Preview:</h3>
            <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '10px' }}>
              <thead>
                <tr>
                  {Object.keys(importedData[0]).map((key) => (
                    <th key={key} style={{ border: '1px solid #ddd', padding: '8px', textAlign: 'left', backgroundColor: '#f2f2f2' }}>{key}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {importedData.map((row, index) => (
                  <tr key={index}>
                    {Object.values(row).map((value, i) => (
                      <td key={i} style={{ border: '1px solid #ddd', padding: '8px' }}>{String(value)}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        {importedData.length === 0 && fileName && <p>No data parsed or file was empty.</p>}
      </section>

      {/* CSV Export Section */}
      <section style={{ border: '1px solid #ddd', padding: '20px', borderRadius: '5px' }}>
        <h2>Export CSV</h2>
        <p>Click the button below to export sample data to a CSV file. The data will be downloaded as 'exported_data.csv'.</p>
        <button
          onClick={handleExportCSV}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            fontSize: '16px',
          }}
        >
          Export Sample Data to CSV
        </button>
        <h3>Sample Data to Export:</h3>
        <pre style={{ backgroundColor: '#f9f9f9', padding: '10px', border: '1px solid #eee', borderRadius: '4px', overflowX: 'auto' }}>
          {JSON.stringify(sampleData, null, 2)}
        </pre>
      </section>
    </div>
  );
};

export default CSVHandler;