react-jsonschema-form demo

https://github.com/mozilla-services/react-jsonschema-form

HTML

<script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div id="main"></div>
</div>

Babel + JSX

const Form = JSONSchemaForm.default;

function processFile(files) {
  const f = files[0];
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => resolve(event.target.result);
    reader.readAsDataURL(f);
  });
}

const FileWidget = (props) => {
  return (
    <input type="file"
      required={props.required}
      onChange={(event) => processFile(event.target.files).then(props.onChange)} />
  )
};

const schema = {
  type: 'object',
  required: ['name'],
  properties: {
    name: { type: 'string', title: 'Name', default: '' },
    file: { type: 'string', title: 'File' }
  }
}
const uiSchema = {
  file: {
    'ui:widget': FileWidget
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {formData: {}};
  }
  onSubmit({formData}) {
    this.setState({formData});
  }
  render() {
    return (
      <div>
        <Form 
          schema={schema} 
          uiSchema={uiSchema}
          onSubmit={this.onSubmit.bind(this)}
          liveValidate />
        <h4>Submitted file as data URL</h4>
        <pre>{this.state.formData.file}</pre>
      </div>
    );
  }
}

React.render(<App />, 
             document.getElementById("main"));