У меня есть элемент ввода файла, который связан с переменной ref.На основе загруженных файлов в событии onChange содержимое файла обрабатывается.В настоящее время я пишу тестовые случаи для проверки этой функциональности.
App.js
export class Dashboard extends React.Component {
constructor(props) {
this.uploadFile = React.createRef();
//Constructing...
}
readFileContents() {
const files = this.uploadFile.current.files;
for (let key in files) {
if (files.hasOwnProperty(key)) {
const file = files[key];
const reader = new FileReader();
let settings;
// eslint-disable-next-line no-loop-func
reader.onload = e => {
const extension = file.name.split('.')[1];
//OnLoad Handler
};
console.log(this.uploadFile.current.files)
reader.readAsText(file); //TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
}
}
};
render() {
return (
<div className="dashboard wrapper m-padding">
<div className="dashboard-header clearfix">
<input
type="file"
ref={this.uploadFile}
webkitdirectory="true"
mozdirectory="true"
hidden
onChange={this.readFileContents}
onClick={this.reset}
/>
<Button
outline
className="toggle-btn float-right"
onClick={this.openFileDialog}
>
Choose folder
</Button>
</div>
</div>
);
}
}
Я начал с этого ответа переполнения стека и смог издеваться над FileReader.
Первоначально я думал, что моделирование события изменения с целевыми файлами, как показано ниже, автоматически отразится на значениях для this.uploadFile
.
const file = new Blob([fileContents], {type : 'application/json'});
var event = {"target": {"files": []}};
event.target.files.push(file);
DashboardWrapper.find('input').first().simulate('change', event);
Но поведение было не таким, как я ожидал, и получил следующую ошибку.
TypeError: Не удалось выполнить readAsText для FileReader: параметр 1 не относится к типу Blob.
После этого я пытался изменить файлывведите переменную ref непосредственно из тестового файла, без результатов и с той же ошибкой.
Я хотел бы сначала понять, правильный ли мой подход.Если нет, то как правильно это сделать?