How to use @uppy/core - 10 common examples

componentDidMount () {
    this.uppy = Uppy({ autoProceed: false, debug: true })
    this.uppy.use(XHRUpload, {
      endpoint: 'http://192.168.1.7:7000/',
    })
    // this.uppy.use(Tus, { endpoint: 'https://master.tus.io/files/' })
    this.uppy.on('upload-progress', (file, progress) => {
      this.setState({
        progress: progress.bytesUploaded,
        total: progress.bytesTotal
      })
    })
    this.uppy.on('complete', (ev) => {
      this.setState({
        status: 'Upload complete ✅'
      })
      console.log('tadada!')
      console.log(this.uppy.state.files)

uploadStarted: false,
      uploadComplete: false,
      info: null,
      totalProgress: 0
    }

    this.isReactNative = (typeof navigator !== 'undefined' &&
      typeof navigator.product === 'string' &&
      navigator.product.toLowerCase() === 'reactnative')

    this.showFilePicker = this.showFilePicker.bind(this)
    this.hideFilePicker = this.hideFilePicker.bind(this)
    this.togglePauseResume = this.togglePauseResume.bind(this)

    console.log('Is this React Native?', this.isReactNative)
    this.uppy = Uppy({ autoProceed: true, debug: true })
    this.uppy.use(Tus, {
      endpoint: 'https://master.tus.io/files/',
      urlStorage: AsyncStorage,
      fileReader: getTusFileReader,
      chunkSize: 10 * 1024 * 1024 // keep the chunk size small to avoid memory exhaustion
    })
    this.uppy.on('upload-progress', (file, progress) => {
      this.setState({
        progress: progress.bytesUploaded,
        total: progress.bytesTotal,
        totalProgress: this.uppy.state.totalProgress,
        uploadStarted: true
      })
    })
    this.uppy.on('upload-success', (file, response) => {
      // console.log(file.name, response)

componentDidMount () {
    this.uppy = Uppy({ autoProceed: false, debug: true })
    this.uppy.use(XHRUpload, {
      // endpoint: 'http://192.168.1.7:7000/',
      endpoint: 'http://api2.transloadit.com/',
    })
    // this.uppy.use(Tus, { endpoint: 'https://master.tus.io/files/' })
    this.uppy.on('upload-progress', (file, progress) => {
      this.setState({
        progress: progress.bytesUploaded,
        total: progress.bytesTotal
      })
    })
    this.uppy.on('complete', (ev) => {
      this.setState({
        status: 'Upload complete ✅'
      })
      console.log('tadada!')

const PropTypes = require('prop-types')
const UppyCore = require('@uppy/core').Uppy

// The `uppy` prop receives the Uppy core instance.
const uppy = PropTypes.instanceOf(UppyCore).isRequired

// A list of plugins to mount inside this component.
const plugins = PropTypes.arrayOf(PropTypes.string)

// Language strings for this component.
const locale = PropTypes.shape({
  strings: PropTypes.object,
  pluralize: PropTypes.func
})

// List of meta fields for the editor in the Dashboard.
const metaField = PropTypes.shape({
  id: PropTypes.string.isRequired,

module.exports = () => {
  const uppyDashboard = Uppy({
    logger: Uppy.debugLogger,
    meta: {
      username: 'John',
      license: 'Creative Commons'
    }
  })
    .use(Dashboard, {
      trigger: '#pick-files',
      // inline: true,
      target: '.foo',
      metaFields: [
        { id: 'license', name: 'License', placeholder: 'specify license' },
        { id: 'caption', name: 'Caption', placeholder: 'add caption' }
      ],
      showProgressDetails: true,
      proudlyDisplayPoweredByUppy: true,
      note: '2 files, images and video only'

constructor (props) {
    super(props)

    this.uppy = new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
      .use(Tus, { endpoint: `${endpoint}/files/` })
      .use(GoogleDrive, { companionUrl: 'https://companion.uppy.io' })

    this.uppy2 = new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
      .use(Tus, { endpoint: `${endpoint}/files/` })

    this.state = {
      showInlineDashboard: true,
      open: false
    }

    this.handleModalClick = this.handleModalClick.bind(this)
  }

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Instagram from '@uppy/instagram'
import Tus from '@uppy/tus'

Uppy()
  .use(Dashboard, {
    trigger: '#select-files',
    showProgressDetails: true
  })
  .use(Instagram, {
    target: Dashboard,
    serverUrl: 'https://companion.uppy.io'
  })
  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
  .on('complete', (result) => {
    console.log('Upload result:', result)
  })

componentDidMount() {
    const { folderName, setImageUrls } = this.props;

    this.uppy = Uppy({
      id: 'MyUppy',
      debug: false,
      autoProceed: false,
      restrictions: {
        maxFileSize: 1000000,
        maxNumberOfFiles: 1,
        minNumberOfFiles: 1,
        allowedFileTypes: ['image/*']
      }
    })
      .use(Transloadit, {
        service: 'https://api2.transloadit.com',
        waitForEncoding: true,
        waitForMetadata: false,
        importFromUploadURLs: false,
        alwaysRunAssembly: false,

setup(props, { attrs }) {
    const state = reactive({
      error: false,
      fileName: null,
      progress: 0,
      status: 'IDLE',
    })

    preventDropEvents()

    const uppy = Uppy(uppyOptions)
      .use(AwsS3Multipart, {
        limit: 2,
        companionUrl: config.companionUrl || `${window.location.origin}/database_upload`,
      })
      .on('file-added', file => {
        state.fileName = file.name
        state.status = 'HAS_FILE'
      })
      .on('upload', () => {
        state.error = false
        state.progress = 0
      })
      .on('upload-progress', (file) => {
        const { percentage } = file.progress
        if (percentage > state.progress) {
          state.progress = file.progress.percentage

constructor(props) {
    super(props);
    this.uppy = Uppy({
      restrictions: { maxNumberOfFiles: 1 },
      autoProceed: false,
    });
    this.uppy.on('file-added', file => {
      if (file.type.includes('video')) {
        this.uppy.use(Tus, {
          id: 'vimeo',
          endpoint: `${process.env.REACT_APP_GRAPHQL_ENDPOINT}/video/upload`,
          resume: true,
          autoRetry: true,
          retryDelays: [0, 1000, 3000, 5000],
          headers: { authorization: `Bearer ${props.auth.token}` },
        });
      } else {
        this.uppy.use(AwsS3, {
          id: 'google',