how to use onChange attribute in dragger tag?

Question

I implemented the file upload function using <input type="file" .../>.
But I wanted to try drag and drop function, so I imported ant design.
In input tag, I used onChange to setState, but I don't know what to do with dragger tag.

Below is the source code using input tag.

  onFileChange = (e) => {
        this.setState({
            thumbnail: e.target.files[0]
        });
    }

.
.
.

  <Input type="file" namge="thumbnail" size="large" placeholder="Thumbnail" onChange={this.onFileChange}></Input>

and this is the ant desing's Dragger.

const { Dragger } = Upload;

const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

.
.
.
<Dragger {...props}>
   <p> ... </p>
</Dragger>

Is it okay to attach "onchange" to the dragger with props like this?

<Dragger {...props} onChange={this.onFileChange}>
   <p> ... </p>
</Dragger>

I'd appreciate your help.

score 0 · Answer 1 · answered Nov 27 '19 at 10:28

Yes, it is ok to use onChange on Dragger if you are already not using in its props. And in the given example there is already onChange property in props object that you are passing to Dragger, so you should not use another onChange attribute instead you can write your logic inside onChange property of props object

const { Dragger } = Upload;

const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    //Here is onChange function written and you can use this to perform your action
    onChange(info) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

.
.
.
<Dragger {...props}>
   <p> ... </p>
</Dragger>

score -1 · Answer 2 · answered Jul 22 '22 at 10:20

If you want to add the file to the state from dragger then use this as an onChange. Is it given in AntDesing documentation how to use onChange function for the Dragger you can use it but the onChange won't be giving you like html onChage gives, it will only give you one list of object, that contains:

first one is file

second one is fileList.

Here is the solution for your problem.

const { Dragger } = Upload;

const props = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info) {
      const {fileList, file} = info; // 'fileList' for multiple images and 'file' for perticular image
      this.setState({ thumbnail: file }); 
    },
  };

.
.
.
<Dragger {...props}>
   <p> ... </p>
</Dragger>

how to use onChange attribute in dragger tag?

2 Answers2