Filth Filth - 1 year ago 217
Javascript Question

React JS Image Uploader | Change Background Image

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
element to show the dialog box and then update the background image.

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

handleBackgroundChange() {
let backgroundImage = backgroundImage
backgroundImage: backgroundImage

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

Answer Source

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 = () => {
   <input type="file" accept="image/*" />
    <button onClick={this.triggerInput}>
        <i className="fa fa-picture-o" style={{fontSize: 20}}></i>


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download