Single instance of Uppy initiated in parent component, available in children components

[rockyhuber]

Having a problem implementing Uppy at the top level most component, so that even if I close a child component, the upload still continues uploading to the server. Getting Id error and a number of other funny behaviours. See React code below:

Utility file called uppyAudioVideo.js

import React from "react";
import store from "../store";
import Uppy from '@uppy/core';
import ReduxStore from '@uppy/store-redux';

const uppyAudioVideo = Uppy({
    store: ReduxStore({
        store: store
    }),
    debug: true,
    autoProceed: false,
    restrictions: {
        maxFileSize: 2000000000,
        maxNumberOfFiles: 10,
        minNumberOfFiles: 1,
        allowedFileTypes: ['audio/*', 'video/*']
    },
    });

export default uppyAudioVideo;

Parent Component

import uppyAudioVideo from '../utility/uppyAudioVideo'; // attempt to initialise the component from the parent
...
this.uppy.on('complete', result => {

this.uppy.on('file-added', result => {
...

Child Component - Modal

import uppyAudioVideo from '../utility/uppyAudioVideo';
...
componentDidMount(){
uppyAudioVideo.use(Dashboard, {
  trigger: '.UppyModalOpenerBtn',
  inline: true,
  showLinkToFileUploadResult: false,
  hideRetrybutton: true,
  target: '#drag-drop-area',
  hideUploadButton: true,
  replaceTargetContent: true,
  showProgressDetails: true,
  height: 470,
  width: '100%',
  browserBackButtonClose: true,
});
uppyAudioVideo.use(UpTus, {
  endpoint: 'http://localhost:9000/uploads/',
  resume: true,
  autoRetry: true,
  retryDelays: [0, 1000, 3000, 5000],
  limit: 1,
  withCredentials: true
});
}

I am trying to initialise a single instance the plugin as high up in the component tree that I can go, so that when I close the Child Component modal, the files still upload. Though no matter how many things I try, I always get an Error, your plugin must have and id. Of course I have tried adding an id field but nothing has worked. I have tried initiating uppy with a singleton in many ways, that hasn't worked and I am still getting the same error. This error occurs only once I close and re open the modal again.

Any help greatly appreciated.

[arturi]

Hi! Are you using Uppy React components? https://uppy.io/docs/react/dashboard/#Initializing-Uppy. The React version of the Dashboard is built to be using in render and will get unmounted properly.

[rockyhuber]

Hi Aturi. Thanks! Yes I started to use the React components and managed to get it working. This is how I got it working: #1329 (comment). Your opinion on how I got it working would be greatly appreciated. Now the only problem I have is with Tus and fingerprint removal. It is not working as expected. See this problem #1327

[kvz]

Seeing as you opened an issue for the remaining issue, I'll be closing this one, feel free to re-open if this is in error!