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.
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>
);
}
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;
import * as tf from "@tensorflow/tfjs";
export async preprocesamiento(archivo){
const csvDataset = tf.data.csv(archivo.path);
}
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);
}