question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upload 'onChange' invoked 4 times with status 'done' while upload one file

See original GitHub issue

Environment(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

https://riddle.alibaba-inc.com/riddles/2856a1b4

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
xueqingxiaocommented, Mar 13, 2017

@shaozj could you provide here? Most people can’t access internal network.

0reactions
lock[bot]commented, May 1, 2018

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found