Simple React component which handles the uploading of jpeg images to my rest api

FileUpload.tsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import uuid from 'uuid/v4';
import { baseUrl } from '../../environment.json';
import { MyState, MyThunkDispatch } from '../../typings/state';
import { User } from '../../typings/user';

type Type =
  'avatar' |
  'item' |
  'logo' |
  'cover' |
  'collection';

interface Props {
  className?: string;
  resource: string;
  type: Type;
  batch?: string;
  options?: { [key: string]: string };
  onUploaded?: (uris: string[]) => void;

  authenticated?: boolean;
  token_type?: string;
  access_token?: string;
  user?: User;
}

interface State {
  uploading: boolean;
}

class FileUpload extends Component<Props, State> {

  public state: State = {
    uploading: false
  }

  public render(): JSX.Element | null {
    const { uploadFile } = this;
    const { authenticated, children } = this.props;

    return authenticated ? (
      <div className="image-upload">
        <label htmlFor="file-input">
          {children}
        </label>

        <input id="file-input" type="file" accept="image/jpeg" onChange={uploadFile} />
      </div>
    ) : null;
  }

  private uploadFile = (ev: React.ChangeEvent<HTMLInputElement>) => {
    if (!ev.target.files)
      return;

    const [file] = Array.from(ev.target.files);

    if (!file)
      return;
    
    this.setState({ uploading: true }, async () => {
      const { authenticated, token_type, access_token, resource, type, batch = uuid(), options = {}, onUploaded = () => null } = this.props;

      try {
        if (!authenticated)
          throw new Error('Not authenticated ☹️');

        const formData = new FormData();
        formData.append('file', file);
        formData.append('resource', resource);
        formData.append('types', JSON.stringify([type, `${type}-thumbnail`]));
        formData.append('batch', batch);
        formData.append('options', JSON.stringify(options));
  
        const res = await fetch(`${baseUrl}/bucket`, {
          method: 'POST',
          headers: {
            "Authorization": `${token_type} ${access_token}`
          },
          body: formData
        });
  
        const uris = await res.json() as string[];
        onUploaded(uris);
      } catch (err) {
        console.error(err);
      }

      this.setState({ uploading: false });
    })
  }

}

const mapStateToProps = ({ auth: { authenticated, token_type, access_token } }: MyState) => ({
  authenticated,
  token_type,
  access_token
});

const mapDispatchToProps = (dispatch: MyThunkDispatch) => ({ });

export default connect(mapStateToProps, mapDispatchToProps)(FileUpload);