0

I am using react-input-files, to implement a styled file input b

         <InputFiles
            accept="video/*"
            onChange={this.uploadVideo}
          >
            <Button
              className="btn-round"
              color="default"
              outline
              disabled={this.state.userHasChosenAFile}
            >
              Styled input button
            </Button>
          </InputFiles>

After user chooses a file, I would like to disable the button. I managed to disable Button component. But, the input itself still works.
In other words, even though the button seems disabled, when the user clicks on it the file choosing window gets opened and the user can choose a file again.

I would like both to make the button look disabled and prevent the user from uploading a file again.

AG_HIHI
  • 1,705
  • 5
  • 27
  • 69
  • Can you share your `uploadVideo` function? – BadPiggie Feb 06 '21 at 14:10
  • By looking at the source code, I think there is no way to disable the upload. So, maybe you can try using [label](https://stackoverflow.com/a/66077576/2873538). In that way, you have direct control over your file `input` element and you can disable it too. – Ajeet Shah Feb 06 '21 at 14:17

1 Answers1

0

You can add to the style prop some css like:

<InputFiles
  style={{ pointerEvents: this.state.userHasChosenAFile ? 'none' : 'all' }}
  ...otherProps
/>
AdriSolid
  • 2,570
  • 1
  • 7
  • 17