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 = async(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');
   
    let res = fetch('https://api.cloudinary.com/v1_1/shirly/image/upload', {
      method: "post",
      mode: "cors",
      body: formdata
    });
  
  let json = await (response) => response.json();
  console.log(JSON.stringify(json));

  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')
);