Input [type=’file’] Does not trigger the onChange event or the Upload component calls the onChange function only once

The reason is that the trigger condition of onChange is the change of value. When we select the file to upload, the value of value is the disk address of the file. Such as: D: \ test \ 1. Docx. So let’s just change the value.

Background 1: nativeinput

If you are using the native Input tag, simply empty the value when the event is clicked.

<input
  type="file"
  accept=".docx"
  onClick={(e) = > {
    (e.target as HTMLInputElement).value = "";
  }}
  onChange={(e) = > {
    console.log(`e`, e.target.files); }} / >Copy the code

Background 2: YesAntdtheInputUpload componentfile

At this point, you cannot directly change the value using the method of background 1, otherwise you will get the following information:

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
Copy the code

Cannot set the “value” attribute on the “HTMLInputElement” : This input element accepts the filename, which can only be set programmatically as an empty string.

This does not work for file input because the browser only allows reading, not writing, input.

Call setValue(value: string, callback? : () => void): void

<Input
  ref={uploadIptRef}
  type="file"
  accept=".docx"
  onClick={(e) = >{ uploadIptRef.current? .setValue("");
  }}
  onChange={(e) = > {
    console.log(`e`, e.target.files); }} / >;Copy the code

setValueinant-design\components\input\Input.tsxIn the performance of

setValue(value: string, callback? : () = >void) {
    if (this.props.value === undefined) {
        this.setState({ value }, callback);
    } else{ callback? . (); }}Copy the code

Rendering component

renderComponent = ({ getPrefixCls, direction, input }: ConfigConsumerProps) = > {
  const { value, focused } = this.state;
  const { prefixCls: customizePrefixCls, bordered = true } = this.props;
  const prefixCls = getPrefixCls("input", customizePrefixCls);
  this.direction = direction;

  return (
    <SizeContext.Consumer>
      {(size) => (
        <ClearableLabeledInput
          size={size}
          {. this.props}
          prefixCls={prefixCls}
          inputType="input"
          value={fixControlledValue(value)}
          element={this.renderInput(prefixCls, size.bordered.input)}
          handleReset={this.handleReset}
          ref={this.saveClearableInput}
          direction={direction}
          focused={focused}
          triggerFocus={this.focus}
          bordered={bordered}
        />
      )}
    </SizeContext.Consumer>
  );
};
Copy the code

Background 3: YesAnt designtheUploadComponent, encounteredonChangeOnly call the problem once

Refer to # 2423