У меня есть приложение ReactJS, которое позволяет пользователю выбрать файл с помощью File Uploader и загрузить его в Firebase Storage (не в базу данных). Эти загрузки хранятся в каталоге под названием «сортировки». Пользователь может загрузить PDF, изображение, WebM и т. Д. c. Я пытаюсь перечислить все файлы, найденные в хранилище на пользовательском интерфейсе, но у меня возникли проблемы. Я думаю, что есть способ сделать это с базой данных Firebase, но не уверен, что это возможно с помощью Firebase Storage. Я пытался следовать документации , загружать файлы через Интернет , но я не мог заставить ее работать. Большая часть того, что я нашел в Интернете, отображает только один файл из хранилища, а не список всех файлов. В настоящее время я могу получить список URL-адресов для загрузки каждого файла в виде: https://firebasestorage.googleapis.com/v0/b/algorithms-visualiser-react.appspot.com/o/sorts%2Fvideo_956493.webm?alt=media&token=07b18ccf-3e3d-4a1f-88b5-193528f0cf09. Проблема возникает, когда я пытаюсь перечислить все это в реальном пользовательском интерфейсе (будь то фактическое визуальное представление каждого файла или просто список всех загруженных URL-адресов, которые при нажатии будут загружать файл).
Ниже приведен соответствующий код:
Загрузка:
handleUploadStart = () => {
this.setState ({
progress: 0
})
}
handleUploadSuccess = filename => {
this.setState ({
sort: filename,
progress: 100
})
firebase.storage().ref('sorts').child(filename).getDownloadURL()
.then(url => this.setState ({
videoURL: url
}))
}
Функция рендеринга (включает способ получения каждой ссылки на скачивание и как файлы загружено)
render() {
const { classes } = this.props;
console.log(this.state);
var i = 0;
let displayFile = '';
const sorts = [];
$('#Sorts').find('tbody').html('');
firebase.storage().ref().child('sorts/').listAll().then(function(result) {
result.items.forEach(function(fileRef) {
i++; // Counter for each file in storage
fileRef.getDownloadURL().then(function(fileURL) {
console.log(fileURL);
sorts.push(fileURL);
})
});
});
return (
<div className="App">
<SortsToolbar history={this.props.history} />
<FileUploader
accept="*"
name="video"
storageRef={firebase.storage().ref('sorts')}
onUploadStart={this.handleUploadStart}
onUploadSuccess={this.handleUploadSuccess} />
<br />
{sorts.items.map((item, index) => (
<li key={index} item={item} />
))}
</div>
);
}
Как уже упоминалось, если бы я мог просто найти способ перечислить все эти ссылки для скачивания в списке на стороне пользовательского интерфейса, это было бы что-то. Любая помощь будет оценена.