У меня есть компонент, написанный следующим образом:
import React from 'react';
import { connect } from 'react-redux';
import '../assets/js/CommonFunctions.js'
import * as clientConfiguration from '../assets/clientConfiguration.json'
class AccessData extends React.Component {
constructor(props) {
super(props);
};
state = {
files: [],
communities: [],
selectedCommunity: { display: "Select a Community...", value: "" },
communityValidationError: "",
downloadButtonVisibile: false
};
handleDownload = (e) => {
e.preventDefault();
let communityName = this.state['selectedCommunity'];
let checkedFiles = this.state.files.filter(i => i.checked);
console.log(checkedFiles);
//axios({
// method: 'post',
// url: clientConfiguration['filesApi.local'],
// body: {
// communityname: communityName,
// files: files
// }
//});
fetch(clientConfiguration['filesApi.local'], {
method: 'POST',
headers: new Headers(),
body: {
communityname: communityName,
files: checkedFiles
}
}).then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.log(err))
}
componentDidMount() {
console.log(clientConfiguration)
fetch(clientConfiguration['communitiesApi.local'])
.then((response) => {
return response.json();
})
.then(data => {
let communitiesFromApi = data.map(community => { return { value: community, display: community } })
this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });
}).catch(error => {
console.log(error);
});
};
handleDDLCommunityChange = event => {
this.setState(
{
selectedCommunity: event.target.value
});
if (event.target.value == "") {
this.setState(
{
files: null
});
}
else {
fetch(clientConfiguration['filesApi.local'] + '/' + event.target.value)
.then((response) => { return response.json(); })
.then(response => {
this.setState({
files: response.map(file => {
return {
fileName: file,
checked: false
}
})
})
})
.catch(error => {
console.log(error);
debugger;
});
}
};
handleFileSelection = event => {
const files = [...this.state.files];
let selectedFile = event.target.value;
selectedFile = files.find(file => file.fileName === selectedFile);
selectedFile.checked = event.target.checked;
this.setState({
files
});
};
renderDownloadButton() {
if (this.state.files && this.state.files.filter(i => i.checked).length) {
return (
<button id="download" styles="display: none;" onClick={this.handleDownload} >
Download
</button>
);
}
};
render() {
const { files } = this.state;
return (
<main>
<div className="aqview-header">
<div className="container about">
<div className="header-tab">
<div className="row">
<div className="col-md-12">
<div className="text-wrap">
<h1>Access Data</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="container">
<div className="aqview-section">
<div className="row">
<div className="col-md-12">
<p>
The files available for download below are preliminary data files from AB 617 monitoring. Please note that we are currently working with data providers to make data available for each listed community below, so please check back if you do not see data for your community.
Available data are grouped into monthly files, with new data added weekly. Please select the AB 617 community you are interested in to begin downloading files.
</p>
</div>
</div>
<div id="download_tool">
<form id="download_form" method="post" >
<div className="row">
<div className="col-md-12">
<div className="header-box">
<h2>Data Download Tool</h2>
</div>
<select id="communityName" title="Select a Community" name="communityName" onChange={this.handleDDLCommunityChange.bind(this)} value={this.state.selectedCommunity.display}>
{this.state.communities.map((community) => <option key={community.value} value={community.value}>{community.display}</option>)}
</select>
<div id="file_list_box">
<p><strong>Data Files</strong></p>
<ul id="file_listing">
{files && files.map((file, i) => {
return (
<li key={i}>
<label>
<input
type="checkbox"
name="file"
value={file.fileName}
onChange={this.handleFileSelection}
/>
{file.fileName}
</label>
</li>
);
})}
</ul>
</div>
{this.renderDownloadButton()}
</div>
</div>
</form>
</div>
<div className="aqview-section">
<div className="row">
<div className="col-md-12">
<p>
Disclaimer: This download tool only provides preliminary data files that have not been verified
or extensively quality assured. These files should not be used for any official purposes.
</p>
</div>
</div>
</div>
<div className="aqview-section">
<div className="row">
<div className="col-md-12 text-center">
<p>
Provide feedback at <a href="mailto:aqview@arb.ca.gov">AQview@arb.ca.gov</a>
</p>
</div>
</div>
</div>
</div>
</div>
</main>
);
}
}
export default connect()(AccessData);
Я не понимаю, когда я проверяю Api, что он получает только пустую строку для communityName и пустой массив для коллекции файлов, я также вставляю код Apiздесь:
[HttpPost]
public FileContentResult Post([FromForm] string communityName, [FromForm] string[] files)
{
//communityName = "Community-1";
string rootPath = Configuration.GetValue<string>("ROOT_PATH");
string communityPath = rootPath + "\\" + communityName;
byte[] theZipFile = null;
using (MemoryStream zipStream = new MemoryStream())
{
using (ZipArchive zip = new ZipArchive(zipStream, ZipArchiveMode.Create, true))
{
foreach (string attachment in files)
{
var zipEntry = zip.CreateEntry(attachment);
using (FileStream fileStream = new FileStream(communityPath + "\\" + attachment, FileMode.Open))
using (Stream entryStream = zipEntry.Open())
{
fileStream.CopyTo(entryStream);
}
}
}
theZipFile = zipStream.ToArray();
}
return File(theZipFile, "application/zip", communityName + ".zip");
}
И еще одна проблема, с которой я сталкиваюсь, заключается в том, что этот метод post возвращает файл zip, обычно он должен автоматически загружаться при нажатии кнопки, а предыдущее приложение находилось в jQuery и загружалоzip-файл без другого кода, я не знаю по какой-то причине, даже если я жестко запрограммировал communityName в API, чтобы проверить, работает ли загрузка - она не работает.