reactjs how to input multiple file from form

Question

I have a component like:

class Media extends Component {

    render() {
        return (

                    <form className="uploader" encType="multipart/form-data">
                        <input type="file" id="file" />
                    </form>

        )
    }
}

export default Media

Here I want to upload multiple file . In HTML we can do it like

<input type="file" name="img" multiple>

How can I have multiple value in reactjs ?? Thank you in advance

Update

class Media extends React.Component {

    handleChange(e) {
    console.log(e.target.value)
  }

    render() {
        return (

                    <form className="uploader" encType="multipart/form-data">
                        <input type="file" id="file" multiple onChange={this.handleChange.bind(this)}/>
                    </form>

        )
    }
}

ReactDOM.render(
  <Media />,
  document.getElementById('container')
);

Here if I upload the image and the value is changed I only get first Image how to get all uploaded image ??

Oleksandr T. · Accepted Answer · 2019-01-17 08:35:32Z

13

You can do the same in React., you can find attributes which you can use here

class Media extends React.Component {
  render() {
    return (
      <form
        className="uploader"
        encType="multipart/form-data"
      >
        <input type="file" id="file" multiple />
      </form>
    )
  }
}  

ReactDOM.render(
  <Media /> ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

edited Jan 17, 2019 at 8:35

answered May 27, 2016 at 5:20

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Comments

NorahKSakal · Accepted Answer · 2019-03-18 18:26:38Z

2

The attribute multitple might have worked before, unfortunately I’m not getting it to work in my version of ReactJS (16.8.4) - using the attribute webkitdirectory=“true” worked though.

class Media extends React.Component {
  render() {
    return (
      <form
        className="uploader"
        encType="multipart/form-data"
      >
      
      <input 
        type="file" 
        id="file" 
        webkitdirectory="true" 
       />
      
      </form>
    )
  }
}  

ReactDOM.render(
  <Media /> ,
  document.getElementById('container')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

answered Mar 18, 2019 at 18:26

NorahKSakal

9049 silver badges18 bronze badges

1 Comment

metal_jacke1 Over a year ago

This forces you to select a folder.

Collectives™ on Stack Overflow

reactjs how to input multiple file from form

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related