如何使用<input type="file" id="myFile">上传CSV？优化Meteor的fast-csv文件选择功能

Hey there! Let's break down your two CSV-related needs and solve them step by step.

1. Implementing CSV Upload with <input type="file" id="myFile"> #

To let users select and process a CSV file via the file input, follow these straightforward steps:

First, add the file input element to your HTML (restricting it to CSV files improves user experience):

<input type="file" id="myFile" accept=".csv">

Next, add JavaScript to listen for file selection and read the file content. Since we’re working in the browser, we’ll use the FileReader API to access the file’s text content:

const fileInput = document.getElementById('myFile');

fileInput.addEventListener('change', (event) => {
  // Grab the selected file from the input
  const selectedFile = event.target.files[0];
  if (!selectedFile) return; // Exit early if no file was chosen

  // Create a FileReader to read the file as plain text
  const reader = new FileReader();
  reader.onload = (e) => {
    const csvText = e.target.result;
    // The CSV content is now ready to be parsed (we’ll cover this with fast-csv next)
    console.log('Raw CSV content:', csvText);
  };

  // Start reading the file
  reader.readAsText(selectedFile);
});

2. Modifying Your Meteor App to Support Custom CSV File Selection #

Your current code uses fs.createReadStream—this is a Node.js server-only API that won’t work in the browser (client-side) because browsers don’t have access to the fs module. Here’s how to rework your client-side code to use user-selected files with the chhib:fast-csv package:

Step 1: Add the File Input to Your Client HTML #

First, add the file input to your client-side HTML (e.g., client/main.html):

<body>
  <h3>Select a CSV File to Process</h3>
  <input type="file" id="csvSelector" accept=".csv">
</body>

Step 2: Rewrite the Client-Side JavaScript (client/main.js) #

Update your code to listen for file selection, read the content, and parse it with fast-csv:

// Wait for Meteor to finish initializing and the DOM to be ready
Meteor.startup(() => {
  const csvInput = document.getElementById('csvSelector');

  csvInput.addEventListener('change', (event) => {
    const selectedFile = event.target.files[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      const csvContent = e.target.result;

      // Use fast-csv to parse the CSV text
      csv.parseString(csvContent, {
        // Optional: Add configuration to match your CSV structure
        // Example: headers: true (if your CSV has a header row)
        // delimiter: ',' (default, adjust if your CSV uses a different separator)
      })
      .on('data', (rowData) => {
        console.log('Parsed row:', rowData);
        // Add your custom processing logic here (e.g., save to a Meteor collection, display data)
      })
      .on('end', () => {
        console.log('CSV processing complete!');
      })
      .on('error', (error) => {
        console.error('Error parsing CSV:', error);
      });
    };

    reader.readAsText(selectedFile);
  });
});

Key Takeaways: #

• No fs in the browser: The fs module only works on the server. Client-side code must use FileReader to access user-selected files.
• fast-csv in Meteor client: The chhib:fast-csv package exposes the csv object to the client, so you can use csv.parseString() to process the text content from the file.
• Customize parsing: Adjust the parseString options (like headers: true) to match your CSV’s structure.

内容的提问来源于stack exchange，提问作者SirBT