Upload 'onChange' invoked 4 times with status 'done' while upload one file
See original GitHub issueEnvironment(required)
- antd version: 2.5.3
- OS and its version: osx ei capitan
- Browser and its version: google chrome 56.0.2924.87
What did you do? Please provide steps to re-produce your problem.
use upload component as follows:
import React from 'react';
import { Upload, Icon, Modal, Button } from 'antd';
class Cpnt extends React.Component {
constructor(props) {
super(props);
const defaultProps = {
action: '/common/ajaxUploadImg.json',
listType: 'picture',
fileList: [],
onChange: this.handleChange,
onPreview: this.handlePreview,
withCredentials: true,
previewVisible: false,
previewImage: '',
fileList: this.props.fileList || [],
imgUrl: ''
}
this.state = {...defaultProps, ...this.props.params};
}
handleCancel = () => this.setState({ previewVisible: false })
handlePreview = (file) => {
console.log(file.url);
this.setState({
previewImage: file.url || file.thumbUrl,
previewVisible: true
});
}
handleChange = (info) => {
this.setState({ fileList: info.fileList });
console.log('====info====', info);
this.props.params.onUploadChange && this.props.params.onUploadChange(info);
}
render() {
const { previewVisible, previewImage, fileList } = this.state;
return (
<div className="clearfix upload-img">
<Upload {...this.state}>
<Button>
<Icon type="upload" /> {this.props.data.title || '点击上传'}
</Button>
</Upload>
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
<img alt="img" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
);
}
}
ReactDOM.render(
<Cpnt data={{}} params={{}}/>
, mountNode);
What do you expected?
When a file was uploaded, onChange function be invoked once with status ‘done’ .
What happen?
When a file was uploaded, onChange function be invoked four times with status ‘done’ .
Re-producible online demo
Issue Analytics
- State:
- Created 7 years ago
- Comments:9 (6 by maintainers)
Top Results From Across the Web
React, ANTD: onChange called twice - Stack Overflow
This behavior is explained by working beforeUpload function. The function has a description in Uploader API. Here it is:.
Read more >Upload - Ant Design
Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload...
Read more >How to implement multiple file uploads in React?
To handle the file upload event, add an onChange attribute to the input that takes a callback function handleFileEvent . const handleFileEvent =...
Read more >react-dropzone
onDrop, func. Cb for when the drop event occurs. Note that this callback is invoked after the getFilesFromEvent callback is done. Files are...
Read more >Using files from web applications - Web APIs - MDN Web Docs
Using the File API, web content can ask the user to select local files and then read the contents of those files. This...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@shaozj could you provide here? Most people can’t access internal network.
This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.