How can I get data from a local file into my React app?

Question

I have a txt file that I want to parse and have some data from that be used to populate part of a React app. I've been banging my head against the wall a bit because from what I've seen, I can't use fs in React (because it runs in a browser environment), nor can I use AJAX to look at local files.

I understand why, and I understand the security concerns around AJAX and local files. However, is there any way for me to get those bits of text into my app?

Code for the component in question is below as I said, I already know that using fs here isn't going to work).

import React from 'react';
import PropTypes from 'prop-types';
import fs from 'fs';

function StopList (props) {
var firstInstance = new RegExp(`^${props.subway}`);
var stops = [];
function stopNames() {
    fs.readFile('..utils/stops.txt', null, (err, data) => {
        if (err) {
            return console.log(err);
        } else {
            var stopData = data.split('\n');
        }
        stopData.map((line) => {
            if (firstInstance === line.charAt(0)) {
                var firstCommas = line.indexOf(',,');
                var secondCommas = line.indexOf(',,', firstCommas);
                stops.push(line.slice(firstCommas + 2, secondCommas));
            }
        });
    });
}
stopNames();
return (
    <select>
        {
            stops.map((stop) => {
                <option key={stop}>
                    {stop}
                </option>
            })
        }
    </select>
)
}
StopList.PropTypes = {
    stops: React.PropTypes.array.isRequired,
    subway: React.PropTypes.string.isRequired
};

export default StopList;

EDIT: The file in question is already online at http://web.mta.info/developers/data/nyct/subway/google_transit.zip. The problem is I wouldn't know how to get at it and read it online because it's inside a zip directory.

Answer 1

You could use:

<input type=file></input> 

and have the user manually give the file to your app.