React Tensorflow JS load the csv file uploaded by the user

Question

I can load csv files from external URL, but when I try to load a file that the user uploaded to the web, it shows an empty Object.

The object appears to be loaded, but you can`t access the information in any way. The solutions I found online were to setup servers, but I didn't want to do that. I want to have an client-side only web app with tensorflowJS.

main.js:

export default function Main() {
  const [archivo, setArchivo] = useState();

  const cargarArchivo = (archivo) => {
    setArchivo(archivo);
  };

  async function realizarCalculos() {
    await preprocesamiento(archivo);
  }

  return (
    <div>
      <Dropzone cargarArchivo={cargarArchivo} />
      <Button
        onClick={realizarCalculos}
        style={{ margin: "5vh" }}
        variant="outlined"
      >
        Calcular Caudales
      </Button>
    </div>
  );
}

Dropzone.js:

class Dropzone extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],
    };
  }
  handleChange(files) {
    this.props.cargarArchivo(files[0]);
    this.setState({
      files: files,
    });
  }
  render() {
    return (
      <DropzoneArea
        acceptedFiles={[".csv"]}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
}

export default Dropzone;

Tensorflow JS:

    import * as tf from "@tensorflow/tfjs";   

    export async preprocesamiento(archivo){ 
        const csvDataset = tf.data.csv(archivo.path);
    }

Answer 1

TensorflowJS tf.data.csv works with fetch under the hood. Meaning that you can't load local files, see this question. I resolved the issue by creating an URL object with the URL class, and serving the url to tensorflow :

import * as tf from "@tensorflow/tfjs";   

export async preprocesamiento(archivo){ 
    const url = URL.createObjectURL(archivo);
    const csvDataset = tf.data.csv(url);
}

Answer 2

Load data from file on your Disk (on your computer)

For those that want to import/ load the file directly from disk (from your computer).

You can upload the file to GitHub and you will end up with a url like this "https://raw.githubusercontent.com/ddoyediran/ml-linear-reg/main/fuelcar.csv"

So this way you can easily load the data using the tensorflowjs data() method as follows

import * as tf from "@tensorflow/tfjs";   

async function loadData(){ 
    const url = "https://raw.githubusercontent.com/ddoyediran/ml-linear-reg/main/fuelcar.csv";
    const csvDataset = tf.data.csv(url);
}

loadData()