captivationsoftware / react-file-input Goto Github PK

React.createClass is not a function

Hi there!
How can I clear seleted value? I'm tried to set
value={this.state.image}
and then to set it to null, but it doesnt work.

According to the Github and NPM docs, to use this library you should run:

npm install react-file-upload

but should instead say:

npm install react-file-input

Any chances to update to accept React 15?

Hello,

I tried using your plugin and found that the file received by the event handler was a Synthetic event with all its properties set to null. Is a fix in the works? I tried the demo and noticed the same thing happens. Thanks!

A common use case for a file input is to make it hidden and trigger a click on the input from another button. The way this is designed, it is difficult for me to understand how one could possibly do this. I tried giving the component a ref and then running "this.refs.fileImportInput.getDOMNode().click()" but I could not trigger it this way.

First, thank you for making this, it's a very helpful tool.

I'm trying to handle the case where a user:

• selects a file, say "abc.txt"
• does some other things in the app
• selects the same file, "abc.txt"

The second time the same file is selected, the onChange() handler does not fire. This does make sense, because the file technically has not changed.

But is there any way to "reset" the input, so that the same file will trigger some sort of event that I can handle?

I have setting a ref: <FileInput ref="myFile" ... /> followed by calling this.refs.myFile.state.value = ''; in the onChange function. This clears the string value in the input field, but it does not "reset" the component.

I'm able to click on the input and choose a file but then nothing happens, it seems onChange is never fired. Do you have any idea why ?

<FileInput
       name="file"
       accept=".jpg"
       placeholder="Your image"
       className="mdl-textfield__input"
       onChange={this.handleChange.bind(this)}
    />
    ....
    handleChange(event) {
    this.setState({
        'file': event.target.files[0]
    })
};

Hey,

Thanks for the package, I am stuck somewhere can you please help me?

I am trying the below piece of code for rendering the component, It is working perfectly fine, I am getting inputs in HTML but nothing is visible in the UI, no text or no button.

<FileInput
    name="avatarImage"
    accept=".jpg,.jpeg,.png,.gif"
    placeholder="Avatar Image"
    className="avatar-image"
    onChange={event => console.log('Selected file:', event.target.files[0])}
/>

Selecting file again, when it pops up the second time seems to be working.
The same issue is on the demo page.
OSX, Chrome Version 44.0.2403.61 beta (64-bit)

Example:
<input type="file" multiple>

Thank you.

Hi, i want to put an h2 above the input, but the file select only works if i click the h2, not the input itself. When i open the dev tools, it looks like that there are 2 input inside the code , and the one that responsible for selecting file, collides with the h2.

export class InputFile extends Component {

  handleChange(event) {
    console.log('Selected file:', event.target.files[0]);
  }

  render(){
    return(
      <div style={this.props.style}>
      {this.props.inputName ? <h2 className='input-desc'>{this.props.inputName}</h2> : null}
      <div className="selectFileContainer">
        <form>
          <FileInput
            name="selectFile"
            accept=".zip,.doc,.docs,.docx,.xls,.pdf,.xlsx,.jpg,.jpeg,.png"
            onChange={this.handleChange}
            >        
          </FileInput>
        </form>
        </div>        
      </div>
    )
  }
}