Grommet with react-dropzone

_uploader.scss

.comae-dropzone {
  width: auto;
  border-width: 0.5em;
  border-color: $button-border-color;
  border-style: dashed;
  border-radius: 2em;
  padding: 3.3em;
  margin-left: 3em;
  margin-right: 3em;
  background-color: $drop-background;
  font-size: $control-font-size;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s;

  &--active {
    border-style: solid;
    background-color: map-get($brand-status-colors, ok);
    transition: all 0.4s;
  }

  &--reject {
    border-style: solid;
    background-color: map-get($brand-status-colors, critical);
    transition: all 0.4s;
  }
};

@media (max-width: 600px) {
  .comae-dropzone {
    border-width: 0.5em;
    border-radius: 2em;
    padding: 2em;
    margin-left: 1em;
    margin-right: 1em;
  }
}

SnapshotUploader.js

import React from 'react';
import Dropzone from 'react-dropzone';

class SnapshotUploader extends React.Component {
  onDrop = (acceptedFiles, rejectedFiles) => {
    acceptedFiles.forEach(file => console.log(file, 'accepted'));
    rejectedFiles.forEach(file => console.log(file, 'rejected'));
  }

  render() {
    return (
      <Dropzone
            className='comae-dropzone'
            activeClassName='comae-dropzone--active'
            rejectClassName='comae-dropzone--reject'
            onDrop={this.onDrop}
            disablePreview
            accept={["application/json", "application/x-gzip", "", "application/x-moz-file"]}>
        <div>Drop full snapshot or results here</div>
      </Dropzone>
    )
  }
}

export default SnapshotUploader