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 ??
Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting. Tip: For <input type="email"> : Separate each email with a comma, like: [email protected], [email protected], [email protected] in the email field.
In order to upload files, the 'content-type' header must be set to 'multipart/form-data'. new FormData() creates a new empty formData object that we send as the payload in our POST request. Our POST request assumes there is an API endpoint on our backend server at http://localhost:3000/uploadFile.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With