MediaUpload.jsx

import React, {Component} from 'react';
import Dropzone from 'react-dropzone';

class MediaUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: null,
      files: [],
      generatedFile: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    let _generatedFile = event.target.files[0];
    // remove any previous image to avoid memory issues
    URL.revokeObjectURL(this.state.generatedFile);
    this.setState({
      file: URL.createObjectURL(_generatedFile),
      generatedFile: _generatedFile
    })
  }

  handleSubmit = (e) => {
    const {uploadHandler, closeHandler} = this.props;
    const {file, generatedFile} = this.state;
    e.preventDefault();
    // get file as bytes
    const reader = new FileReader();
    reader.onload = () => {
      const fileAsBinaryString = reader.result;
      // do whatever you want with the file content
    };
    reader.onabort = () => console.log('file reading was aborted');
    reader.onerror = () => console.log('file reading has failed');
    reader.readAsBinaryString(this.state.generatedFile);
    if(reader && reader.result) {
      // UPLOAD
      console.log("Reader result: " + reader.result);
      uploadHandler(reader.result, generatedFile.name);
      URL.revokeObjectURL(generatedFile);
      this.setState({
        file: null,
        generatedFile: ''
      });
      closeHandler();
    }
  };

  onDrop(files) {
    let _generatedFile = files[0];
    // remove any previous image to avoid memory issues
    URL.revokeObjectURL(this.state.generatedFile);
    this.setState({
      files,
      file: URL.createObjectURL(_generatedFile),
      generatedFile: _generatedFile
    });
  }

  onCancel() {
    this.setState({
      files: []
    });
  }

  render() {
    return (
      <div>
        <div className="message-input">
          <form
            onSubmit={this.handleSubmit}
            className="upload-file-form">
            <div className="upload-image-chooser">
              <Dropzone
                onDrop={this.onDrop.bind(this)}
                onFileDialogCancel={this.onCancel.bind(this)}
              >
                <p>Try dropping some files here, or click to select files to upload.</p>
              </Dropzone>
              <input type="file"
                     name="video"
                     accept="video/*,image/*"
                     onChange={this.handleChange}/>
            </div>
            <div className="upload-image-preview">
              <img src={this.state.file}/>
            </div>
            <div className="upload-image-buttons">
              <button
                onClick={this.props.closeHandler}
                className="sendButton">
                Close
              </button>
              <button
                type="submit"
                className="sendButton">
                Upload
              </button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}

export default MediaUpload;