Can`t get Uppy,React and transloadit working

Uppy
1

Hey, so here is my react component:

/**
 *
 * UploadFiles
 *
 */

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';

import { Uppy } from '@uppy/core';
import '@uppy/core/dist/style.css';
import '@uppy/drag-drop/dist/style.css';
import DragDrop from '@uppy/react/lib/DragDrop';
import Transloadit from '@uppy/transloadit';


import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import makeSelectUploadFiles from './redux/selectors';
import reducer from './redux/reducer';
import saga from './redux/saga';


export class UploadFiles extends React.Component {
  componentWillMount() {
    this.uppy = new Uppy({ debug: true, autoProceed: false });

    this.uppy.use(Transloadit, {
      params: {
        auth: {
          key: 'key',
        },
        template_id: 'template',
      },
      waitForEncoding: true,
    });
  }

  componentWillUnmount() {
    this.uppy.close();
  }

  render() {
    return (
      <div>
        <h2>UploadFiles</h2>
        <DragDrop uppy={this.uppy} />
      </div>
    );
  }
}

UploadFiles.propTypes = {};

const mapStateToProps = createStructuredSelector({
  uploadfiles: makeSelectUploadFiles(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps
);

const withReducer = injectReducer({ key: 'uploadFiles', reducer });
const withSaga = injectSaga({ key: 'uploadFiles', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect
)(UploadFiles);

Console err

Uncaught TypeError: Expected a plugin class, but got object. Please verify that the plugin was imported and spelled correctly.

Please help me :smiley:

2

This looks good to me, this code works with @uppy@1.2.0.

  1. What version of Uppy do you use?
  2. Could you provide me with a minimal nonworking example on github, or could you console.log(Transloadit) for me? We’d get this error if Transloadit was a js object.

Here is a minimal working example meanwhile: https://github.com/lakesare/uppy-transloadit-react.

3

Do you have found solution of this issue ?
It seems that I have the seems issue with Electron / Vuejs application…