How can I trigger input[type="file"] programmatically with no actual click involved?

Question

I am trying to trigger a file upload as soon a user navigates to the /uploads route on my website. The upload buttons all work and trigger as expected. However, I cannot seem to programmatically get the input[type=file] to work.

I am really hoping this is possible, but I feel it isn't because of security or something. :(

Anyway, I created this demo as a minimum code example:

class Hello extends React.Component {
  componentDidMount() {
    console.log('this won\'t trigger')
    this._test.click()
    
    setTimeout(() => {
      console.log('this also won\'t trigger')
      this._test.click()
    }, 5000);
  }
  clickInput() {
    console.log('this will trigger')
    this._test.click()
  }
  render() {
    return (
      <div>
        <input 
          ref={(test) => this._test = test}
          name="test"
          type="file"
          multiple={this.props.multiple}
        />
        <button 
          type="button"
          onClick={this.clickInput.bind(this)}
        >
          Trigger upload
        </button>
      </div>
    );
  }
};

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

guest271314 · Accepted Answer · 2017-03-22 20:34:50Z

1

User action is required to render Choose File dialog from click or change event at <input type="file"> element.

answered Mar 22, 2017 at 20:34

guest271314

1

Sign up to request clarification or add additional context in comments.

3 Comments

S.Kiers Over a year ago

That is what I was afraid of. Follow up, if they are clicking a link on a prior page, which triggers a react router change, which triggers the file upload; can I somehow preserve that user input (the original link change) to do the trigger?

guest271314 Over a year ago

It is possible to chain click event to open Choose File dialog. See stackoverflow.com/a/41336449, stackoverflow.com/questions/29728705/…

S.Kiers Over a year ago

thanks for that answer. That is what I was looking for. :)

Collectives™ on Stack Overflow

How can I trigger input[type="file"] programmatically with no actual click involved?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related