How to reset ReactJS file input

Question

I have file upload input:

And I handle upload t

Answer 1

Here is my solution using redux form

class FileInput extends React.Component {
  constructor() {
    super();

    this.deleteImage = this.deleteImage.bind(this);
  }

  deleteImage() {
    // Just setting input ref value to null did not work well with redux form
    // At the same time just calling on change with nothing didn't do the trick
    // just using onChange does the change in redux form but if you try selecting
    // the same image again it doesn't show in the preview cause the onChange of the
    // input is not called since for the input the value is not changing
    // but for redux form would be.

    this.fileInput.value = null;
    this.props.input.onChange();
  }

  render() {
    const { input: { onChange, value }, accept, disabled, error } = this.props;
    const { edited } = this.state;

    return (
      

        {/* ref and on change are key properties here */}
         onChange(e.target.files[0])}
          multiple={false}
          accept={accept}
          capture
          ref={(input) => { this.fileInput = input; }}
          disabled={disabled}
        />
        {!value ?
          {/* Add button */}
           this.fileInput.click()}
            disabled={disabled}
          />
          :
          

            

              {/* Image preview */}
              
              

                {/* This button does de replacing */}
                 this.fileInput.click()}
                  disabled={disabled}
                />
                {/* This button is the one that does de deleting */}