0

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);
    }
Robertino
  • 55
  • 8

1 Answers1

0

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);
}
Robertino
  • 55
  • 8