React JS Image Uploader | Change Background Image

Question

I'm trying create a background image updater / uploader component.

An image is set on default however, if the user would like to update the background image I would like to update the state and store the image.

Research so far suggests I need to use the <input type="file" /> element to enable the upload dialog box.

Is there another way around not using the input element? If the user is to click on the <button> element to show the dialog box and then update the background image.

export default class ChangeBackground extends React.Component {
    constructor() {
        super();
        this.state = {
            backgroundImage: ''
        }
    }

    handleBackgroundChange() {
        let backgroundImage = backgroundImage
        this.setState({
            backgroundImage: backgroundImage
        });
    }

    render() {
        return (
            <div className="change-bg-wrap">
                <input type="file" accept="image/*" />
                <button>
                    <i className="fa fa-picture-o" style={{fontSize: 20}}></i>
                </button>
            </div>
        )
    }
}

Answer 1

Modified my answer from earlier. I modified some bits to make it work with my project. See code below.

class ChangeBackground extends React.Component {
    constructor() {
        super();
        this.state = {
            backgroundImage: 'START'
        }

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

    handleBackgroundChange(e) {
        const reader = new FileReader();
        const file = e.target.files[0];

        this.setState({
          backgroundImage: file.name,
        });
    }

    render() {
        return (
            <div className="change-bg-wrap">
                <input onChange={this.handleBackgroundChange} type="file" accept="image/*" />
                file: {this.state.backgroundImage}
                <button>
                    <i className="fa fa-picture-o" style={{fontSize: 20}}></i>
                </button>
            </div>
        )
    }
}

I added the last line of the constructor to access the setState. On handleBackgroundChange I added a file reader which you might want to look into later, file can be accessed through e.target. I added a line on the render function just to see if the state changes.

This works in my project, let me know if it doesn't on your and I can modify it.

Answer 2

Hide the input element with display: "none" , then do some javascript so that when the button is clicked on it will trigger the <input> .

   triggerInput = () => {
        document.querySelector("input[type='file']").click();
    }
   <input type="file" accept="image/*" />
    <button onClick={this.triggerInput}>
        <i className="fa fa-picture-o" style={{fontSize: 20}}></i>
    </button>

See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Cache the querySelector value in a var as well

Edit: I don't think you can trigger a react event click() which is why I used native js. Correct me if I am wrong.