#reactjs #frontend
Вопрос:
Я новичок в react, и у меня есть задача : в форме я должен ввести номер (который позже должен быть именем папки), если он присутствует в базе данных, он открывает более длинную форму. этот шаг уже сделан. следующий шаг-загрузить файл и сохранить его в папке (с именем, указанным ранее).
вот кусочек моего бэкенда :
@PostMapping("/uploadMultipleFiles/{type}/{code}")
public List<UploadFileResponse> uploadMultipleFiles(@RequestParam("files") MultipartFile[]
files, @PathVariable("type") String type, @PathVariable("code") String code) {
return Arrays.asList(files)
.stream()
.map(file -> uploadFile(file, type, code))
.collect(Collectors.toList());
}
класс FileEditDette расширяет React.Компонент {
constructor (props) {
super(props)
this.state = {
exercices:[],
naturedettes:[],
tfinancements:[],
debiteurs:[],
creanciers:[],
faitgenerateurs:[],
fonctions:[],
files:[
// {id_file:"", content_type:"", code:""}
],
}
}
componentDidMount() {
this.retrieveDataToSelect(Config.CONFIG_SERVER "dette/getCreancierAll", "creanciers")
this.retrieveDataToSelect(Config.CONFIG_SERVER "dette/getAllDebiteurs", "debiteurs")
this.retrieveDataToSelect(Config.CONFIG_SERVER "list/getAllNatureDettes", "naturedettes")
this.retrieveDataToSelect(Config.CONFIG_SERVER "list/getAllExercices", "exercices")
this.retrieveDataToSelect(Config.CONFIG_SERVER "list/getAllFonctions", "fonctions")
this.retrieveDataToSelect(Config.CONFIG_SERVER "list/getAllFinancements", "tfinancements")
this.retrieveDataToSelect(Config.CONFIG_SERVER "list/getAllFaitGenerateurs", "faitgenerateurs")
axios.post(Config.CONFIG_SERVER "upload_file", FormData).
then((res) => {
if (res.status == 200) {
sessionStorage.setItem("uploadFile", this.state.files);
toast.success('Fichier chargé avec succès', { autoClose: 3000 });
this.props.history.push("/listDettes");
} else {
toast.error('Echec de la création !', { autoClose: 3000 });
this.props.history.push("/accueil");
}
})
}
retrieveDataToSelect = (url, data)=> {
const oHeaders= {
'Authorization':'Bearer ' localStorage.getItem("token").valueOf("token")
}
axios.get(url, {headers: oHeaders}).then(response=>{
console.log(response.data);
this.setState({
[data]: response.data
});
});
}
isVisibleField = (value) => {
const naturedettes = this.state.naturedettes;
const currentIndex = this.props.dette.naturedette.id ? this.props.dette.naturedette.id : this.props.dette.naturedette;
for (let index = 0; index < naturedettes.length; index ) {
const naturedette = naturedettes[index].id == currentIndex ? naturedettes[index] : null;
if (naturedette amp;amp; naturedette.naturedette.toUpperCase() == value.toUpperCase()) {
console.log("index nature", naturedette.naturedette)
return true
}
}
return false
}
onHandleClickCancel = () =>{
this.props.history.push("/ListeDettes");
toast.info('Modifications annulées !', {autoClose:3000});
}
handleChangedatesignature = (event) => {
this.setState({
date_signature: Moment(event.target.value).format('YYYY-MM-DD')
});
}
onFileChange = event => {
// Update the state
this.setState({ selectedFile: event.target.files[0],
loaded : 0,
});
};
onFileUpload = (event) => {
const formData = new FormData();
formData.append(
"file",
this.file,
this.state.selectedFile,
this.state.selectedFile.name
);
const oHeaders = {
'Authorization': 'Bearer ' localStorage.getItem("token").valueOf("token"),
}
}
render() {
const {creanciers, tfinancements, faitgenerateurs, naturedettes, exercices} = this.state;
const {handleChange, dette, submitFileEditDette} = this.props;
return (
<div class="card-body ">
<p class="card-description ">Informations générales</p>
<form onSubmit={submitFileEditDette} className="forms-sample" >
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Créancier</label>
<div class="col-sm-10">
<select onChange={handleChange} class="form-control" required name="creancier">
{creanciers.map(creancier =>(
<option value={creancier.id} selected={creancier.id==dette.creancier.id}>{creancier.name}</option>
))}
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Débiteur</label>
<div class="col-sm-10">
<select onChange={handleChange} class="col-sm-5" class="form-control" required name="debiteur">
<option value="">{sessionStorage.getItem("DetteDebiteur")}</option>
{dette.debiteur?
<option value={dette.debiteur.id} selected>{dette.debiteur.nameDebiteur}</option>
: null}
{this.state.debiteurs.map((debiteur) =>{
return <option value={debiteur.id} >{debiteur.nameDebiteur}</option>;
})}
</select>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Objet de la dette</label>
<div class="col-sm-10">
<input type="text" onChange={handleChange} className="form-control" defaultValue = {dette.objet} name="objet" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Référence fait générateur</label>
<div class="col-sm-10">
<input type="text" onChange={handleChange} className="form-control" defaultValue = {dette.numeroFaitGenerateur} name="numeroFaitGenerateur"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Montant de la dette</label>
<div class="col-sm-9">
<input type="number" onChange={handleChange} name="montant" defaultValue = {dette.montant} class="form-control" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Type de financement de la dette</label>
<div class="col-sm-9">
<select class="col-sm-5" onChange={handleChange} class="form-control" required name="tfinancement">
<option value="">Sélectionner une valeur</option>
{tfinancements.map(tfinancement =>(
<option value={tfinancement.id} selected={tfinancement.id==dette.tfinancement.id}>{tfinancement.typefinancement}</option>
))}
</select>
</div>
</div>
</div>
</div>
<div class="row border-bottom">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Nature de la dette</label>
<div class="col-sm-9">
<select onChange={handleChange} class="col-sm-5" class="form-control" required name="naturedette">
<option value="">Sélectionner une valeur</option>
{naturedettes.map(t_naturedette => (
<option value={t_naturedette.id} selected={t_naturedette.id==dette.naturedette.id}>{t_naturedette.naturedette}</option>
))}
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Exercice budgétaire</label>
<div class="col-sm-9">
<select onChange={handleChange} class="col-sm-5" class="form-control" required name="exercice">
<option value="">Sélectionner une valeur</option>
{exercices.map(exercice =>(
<option value={exercice.id} selected={exercice.id==dette.exercice.id}>{exercice.lblexercice}</option>
))}
</select>
</div>
</div>
</div>
</div>
{/*Début des éléments du fait générateur*/}<br/>
<div class="row">
<p class="card-description">Détails du fait générateur de la dette encours</p>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Type fait générateur</label>
<div class="col-sm-9">
<select onChange={handleChange} class="col-sm-5" class="form-control" required name="faitgenerateur">
<option value="">Sélectionner une valeur</option>
{faitgenerateurs.map((faitgenerateur) =>{
return <option value={faitgenerateur.id} selected={faitgenerateur.id==dette.faitgenerateur.id} >{faitgenerateur.lblfaitgenerateur}</option>;
})}
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Date signature</label>
<div class="col-sm-9">
<input onChange={handleChange} type="date" className="form-control" defaultValue = {dette.date_signature_fait_generateur} name="date_signature_fait_generateur"/>
</div>
</div>
</div>
</div>
<div class="row border-bottom">
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Signataire fait générateur</label>
<div class="col-sm-9">
<input onChange={handleChange} type="text" className="form-control" D = {dette.signataire_fait_generateur} name="signataire_fait_generateur"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Fonction du Signataire</label>
<div class="col-sm-9">
<input onChange={handleChange} type="text" className="form-control" defaultValue = {dette.fonction_fait_generateur} name="fonction_fait_generateur"/>
</div>
</div>
</div>
</div>
<br/>
<div class="row">
<p class="card-description ">Ajoutez des fichiers au dossier</p>
<div class="col-md-12">
<div class="form-group row">
<label>Sélectionner le fichier</label>
{/* <input type="file" onChange={this.onFileChange} name="img[]" class="file-upload-default" /> */}
<div class="input-group col-xs-12">
<input type="file" class="form-control file-upload-info" multiple onChange={this.onFileChange}/>
<span class="input-group-append">
<button class="file-upload-browse btn btn-gradient-primary" type="button" >Charger</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<div class="form-check form-check-success">
<button type="submit" class="btn btn-gradient-success btn-icon-text" onClick={this.onClickHandler}>
<i class="mdi mdi-playlist-check btn-icon-prepend"></i> Enregistrer
</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<div class="form-check form-check-success">
<button type="button" class="btn btn-gradient-danger btn-icon-text" >
<i class="mdi mdi-backup-restore btn-icon-prepend"></i><a href="/ListeDettes" ></a> Annuler
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
)
}
}
экспортировать файловую папку по умолчанию;