Responsive JS File Upload Processing

Question

I am new to js response. I want to load an image asynchronously using js Suppose I have this code

var FormBox = React.createClass({ getInitialState: function () { return { photo: [] } }, pressButton: function () { var data = new FormData(); data.append("photo", this.state.photo); // is this the correct way to get file data? }, getPhoto: function (e) { this.setState({ photo: e.target.files[0] }) }, render: function () { return ( <form action='.' enctype="multipart/form-data"> <input type='file' onChange={this.getPhoto}/> <button onClick={this.pressButton}> Get it </button> </form> ) } }) ReactDOM.render(<FormBox />, document.getElementById('root')) 

Any answer would be appreciated!

Answer 1

You can use FileReader

 var FormBox = React.createClass({ getInitialState: function () { return { file: '', imagePreviewUrl: '' } }, pressButton: function () { e.preventDefault(); // TODO: do something with -> this.state.file console.log('handle uploading-', this.state.file); }, getPhoto: function (e) { e.preventDefault(); let reader = new FileReader(); let file = e.target.files[0]; reader.onloadend = () => { this.setState({ file: file, imagePreviewUrl: reader.result }); } reader.readAsDataURL(file); }, render: function () { let {imagePreviewUrl} = this.state; let imagePreview = null; if (imagePreviewUrl) { imagePreview = (<img src={imagePreviewUrl} />); } else { imagePreview = (<div className="previewText">Please select an Image for Preview</div>); } return ( <div> <form action='.' enctype="multipart/form-data"> <input type='file' onChange={this.getPhoto}/> <button onClick={this.pressButton}> Get it </button> </form> <div className="imgPreview"> {imagePreview} </div> </div> ) } }) ReactDOM.render(<FormBox />, document.getElementById('root')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

Use the following module to select images.
https://www.npmjs.com/package/react-image-uploader

You can then upload the image to the server using the xhr request. The following is sample code.

 var xhr = new XMLHttpRequest(); xhr.onload = function (e) { //your success code goes here } var formData = new FormData(); xhr.open("POST", url, true); formData.append('file', fileData); xhr.send(formData); 

code>

Answer 3

 import axios from 'axios'; var FormBox = React.createClass({ getInitialState: function () { return { photo: [], name : '', documents:[] } }, pressButton: function () { var component = this var data = new FormData(); data.append("photo", component.state.photo, component.state.name); var request = axios.post('http://localhost:3000/document', data) request.then(function(response){ // you need to send data from server in response if(response.status == 200){ console.log('saved in db') component.state.documents.push(response.data.documents) // pushed document data in documents array } }) }, getPhoto: function () { var uploadfile = document.getElementById(upload_doc).files[0] this.setState({ photo: uploadfile, name : uploadfile.name }) }, render: function () { var documents = this.state.documents.map((doc)=>{ return <div> <a href={doc.url}>{doc.name}</a> <img src={doc.photo} /> </div> }) // you can show your documents uploaded this way using map function return ( <form action='.' enctype="multipart/form-data"> <input type='file' id='upload_doc' onChange={this.getPhoto}/> <button onClick={this.pressButton}> Get it </button> <span>{documents}</span> // this way you can see uploaded documents </form> ) } }) ReactDOM.render(<FormBox />, document.getElementById('root')) 

Answer 4

Another simpler way: using axios node module axios-fileupload

 npm install --save axios-fileupload const axiosFileupload = require('axios-fileupload'); axiosFileupload(url,file);