.loadData is fails in react ts app

[MoriTAH3110]

When trying to load data to train a model by choosing a json file obtained throgh save data in bodyPose, file is being rejected with the following message:

Error: TypeError: FileReader.readAsText: Argument 1 does not implement interface Blob.

I am uploading the file via input field with type file

const handleOnLoadFile = (event: React.ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0]; if (file) { const url = URL.createObjectURL(file); fetch(url).then(response => response.json()).then(data => { console.log(data); brain.loadData(data.data, dataLoaded); }) } };

Is there any alternative for teachable machines in body pose?

[ziyuan-linn]

Hi @MoriTAH3110!

You can directly pass a FileList object parameter to the loadData method of NeuralNetwork, the loadData method will internally handle the FileList and read the content of files[0]. It actually does not accept a json object parameter (though it probably should in the future).

Let me know whether this works:

const handleOnLoadFile = (event: React.ChangeEvent<HTMLInputElement>) => {
  const fileList = event.target.files;
  brain.loadData(fileList, dataLoaded); 
};

[MoriTAH3110]

Hi @ziyuan-linn

It works like a charm. Thanks a lot!

I didn't know I could pass in the whole file list and the docs let me to understand that I needed to pass just the plain data.