J'utilise des composants de conception de fourmi et j'ai une entrée de téléchargement: https://ant.design/components/upload/
Selon la documentation, une action est requise sur les accessoires.
Cependant, je n'ai pas besoin que le fichier soit publié dans une URL lors du téléchargement, j'ai besoin que le FORMULAIRE entier soit soumis à un point de terminaison de repos (vérifiez la fonction de gestion des soumissions)
En essayant de parcourir la documentation, j'ai utilisé l'événement handlechange pour ajouter le fichier à l'état, mais le STATUS n'est jamais terminé, de sorte que la ligne n'est jamais atteinte.
Qu'est-ce que j'oublie ici?
import React, { Component } from 'react';
import { Input, Upload , Icon, message} from 'antd';
import Form from '../../components/uielements/form';
import Checkbox from '../../components/uielements/checkbox';
import Button from '../../components/uielements/button';
import Notification from '../../components/notification';
import { adalApiFetch } from '../../adalConfig';
const FormItem = Form.Item;
class RegisterTenantForm extends Component {
constructor(props) {
super(props);
this.state = {TenantId: '', TenantUrl: '', CertificatePassword: '', confirmDirty: false, loading: false, buttondisabled: true};
this.handleChangeTenantUrl = this.handleChangeTenantUrl.bind(this);
this.handleChangeCertificatePassword = this.handleChangeCertificatePassword.bind(this);
this.handleChangeTenantId= this.handleChangeTenantId.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleupload = this.handleupload.bind(this);
this.handleTenantIdValidation = this.handleTenantIdValidation.bind(this);
this.handleTenantAdminUrl = this.handleTenantAdminUrl.bind(this);
};
handleChangeTenantUrl(event){
this.setState({TenantUrl: event.target.value});
}
handleChangeCertificatePassword(event){
this.setState({CertificatePassword: event.target.value});
}
handleChangeTenantId(event){
this.setState({TenantId: event.target.value});
}
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('You can only upload JPG file!');
}
}
handleupload(info){
//let files = e.target.files;
if (info.file.status === 'uploading') {
this.setState({ loading: true });
return;
}
if (info.file.status === 'done') {
this.setState({ loading: false });
this.setState({ 'selectedFile': info.file });
}
}
handleTenantIdValidation(rule, value, callback){
const form = this.props.form;
const str = form.getFieldValue('tenantid');
var re = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
if (str && !str.match(re)) {
this.setState({buttondisabled: true});
callback('Tenant id is not correctly formated id');
}
else {
this.setState({buttondisabled: false});
callback();
}
}
handleTenantAdminUrl(rule, value, callback){
const form = this.props.form;
const str = form.getFieldValue('tenantadminurl');
var re = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/i;
if (str && !str.match(re)) {
this.setState({buttondisabled: true});
callback('Tenant Url is not correctly formated id');
}
else {
this.setState({buttondisabled: false});
callback();
}
}
handleSubmit(e){
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
/*Notification(
'success',
'Received values of form',
JSON.stringify(values)
);*/
let data = new FormData();
//Append files to form data
data.append("model", JSON.stringify({ "TenantId": this.state.TenantId, "TenantUrl": this.state.TenantUrl, "CertificatePassword": this.state.CertificatePassword }));
//data.append("model", {"TenantId": this.state.TenantId, "TenantUrl": this.state.TenantUrl, "TenantPassword": this.state.TenantPassword });
let files = this.state.selectedFile;
for (let i = 0; i < files.length; i++) {
data.append("file", files[i], files[i].name);
}
const options = {
method: 'put',
body: data,
config: {
headers: {
'Content-Type': 'multipart/form-data'
}
}
};
adalApiFetch(fetch, "/Tenant", options)
.then(response => response.json())
.then(responseJson => {
if (!this.isCancelled) {
this.setState({ data: responseJson });
}
})
.catch(error => {
console.error(error);
});
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 14,
offset: 6,
},
},
};
return (
<Form onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} label="Tenant Id" hasFeedback>
{getFieldDecorator('tenantid', {
rules: [
{
required: true,
message: 'Please input your tenant id',
},
{
validator: this.handleTenantIdValidation
}],
})(<Input name="tenantid" id="tenantid" onChange={this.handleChangeTenantId}/>)}
</FormItem>
<FormItem {...formItemLayout} label="Certificate Password" hasFeedback>
{getFieldDecorator('certificatepassword', {
rules: [
{
required: true,
message: 'Please input your password!',
}
],
})(<Input type="password" name="certificatepassword" id="certificatepassword" onChange={this.handleChangeCertificatePassword}/>)}
</FormItem>
<FormItem {...formItemLayout} label="Tenant admin url" hasFeedback>
{getFieldDecorator('tenantadminurl', {
rules: [
{
required: true,
message: 'Please input your tenant admin url!',
},
{
validator: this.handleTenantAdminUrl
}],
})(<Input name="tenantadminurl" id="tenantadminurl" onChange={this.handleChangeTenantUrl} />)}
</FormItem>
<FormItem {...formItemLayout} label="Certificate File">
<Upload onChange={this.handleupload} beforeUpload={this.beforeUpload}>
<Button >
<Icon type="upload" /> Click to Upload
</Button>
</Upload>
</FormItem>
<FormItem {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" disabled={this.state.buttondisabled}>
Register tenant
</Button>
</FormItem>
</Form>
);
}
}
const WrappedRegisterTenantForm = Form.create()(RegisterTenantForm);
export default WrappedRegisterTenantForm;
Passer outre <Upload/>
upload par défaut AJAX implémentation avec un upload réussi simulé.
Il semble que vous essayez d'utiliser andt
's <Upload/>
composant simplement comme sélecteur de fichier, car vous ajoutez vous-même le fichier à formData
. La raison de ne jamais atteindre le point où status === "done"
est dû au fait que le fichier n'est vraiment téléchargé nulle part.
Ainsi, vous n'avez pas besoin que le fichier soit téléchargé automatiquement comme il le devrait OOB.
Tout ce dont vous avez besoin est que le onChange
vous enverra le fichier sélectionné et vous pouvez l'enregistrer quelque part dans l'arborescence d'état.<Upload/>
rend un autre composant ( rc-upload ) comme son enfant qui gère le réel AJAX upload. Vous pouvez remplacer ce comportement en passant un customRequest
prop à <Upload/>
(qui sera transmis à rc-upload
composant).
Vous pouvez voir ici quelles options sont passées à la fonction de demande. Voici une implémentation d'une fonction de demande factice:
const dummyRequest = ({ file, onSuccess }) => {
setTimeout(() => {
onSuccess("ok");
}, 0);
};
Ensuite, vous pouvez le transmettre à <Upload customRequest={dummyRequest}/>
onChange
sera toujours déclenché, mais cette fois avec le "done"
status, car la fonction de demande factice simule un flux de téléchargement réussi.
Selon la documentation officielle Téléchargement manuel :
Téléchargez les fichiers manuellement après que
beforeUpload
renvoiefalse
.
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
message.error('You can only upload JPG file!');
}
return false;
}