React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Shirly Manor

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Upload extends React.Component {
	processFile = (e) => {			
			var file = e.target.files[0]
			var formdata = new FormData();

			formdata.append('file', file);
			formdata.append('cloud_name', 'shirly');
			formdata.append('upload_preset', 'my-preset');
			
			var xhr = new XMLHttpRequest();
			xhr.open('POST', "https://api.cloudinary.com/v1_1/cloud_name/image/upload",true);
			
			xhr.onload = function () {
	    	// do something to response
	    		console.log(this.responseText);
			};
			xhr.send(formdata);		
		}	
    
  render() {
    return (
    	<div>
        <div>Please add a preset and your cloudname</div>
        <input type="file" onChange={this.processFile}/>
      </div>
    );
  }
}

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