How can I reassign saved file in input file tag ReactJS

Question

In my react component I have this type of code :

state = {
    title: '',
    file: ''
}

handleTextChange = (e) => {
    this.setState({
        [e.target.id] : e.target.value
    })
}

handleFileChange = (e) => {
    this.setState({
        [e.target.id] : e.target.files[0]
    })
}

render(){
    return(
        <input type="text" id="title" defaultValue={title} onBlur={this.handleTextChange}/>
        <input type="file" id="file" onChange={this.handleFileChange}/>
    )
}

Now the problem is when I change text, the selected file automatically deselect and I have to select again it. I have to do this thing every time when I change the text in textbox.

How can I set default value in the file the same as I can do in textbox so every time I do not have to select the same file.

Nazeer · Accepted Answer · 2020-09-23 05:05:33Z

2

You have to concern about immutability here. Your state is an object. so every time you are setting state, you should only change, changing property only.

state = {
    title: '',
    file: ''
}

handleTextChange = (e) => {
    this.setState({
        ...state,
        [e.target.id] : e.target.value
    })
}

handleFileChange = (e) => {
    this.setState({
        ...state,
        [e.target.id] : e.target.files[0]
    })
}

render(){
    return(
        <input type="text" id="title" defaultValue={title} onBlur={this.handleTextChange}/>
        <input type="file" id="file" onChange={this.handleFileChange}/>
    )
}

answered Sep 23, 2020 at 5:05

Nazeer

5937 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

How can I reassign saved file in input file tag ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related