How to pass variable with uppy tus upload

Uppy
1

Hi Friends,

I am using Uppy in my React JS projects and my requirement is I need to upload files inside of the dynamically created folder. Eg. /project/media/84

So my question is how I can pass the above-highlighted mediaId with Uppy TUS upload. I was trying the below code in my React JS project but it doesn’t seem to be working.

constructor(props) {
        super(props);

        this.state = {
            mediaFiles: [],
            files: '',
            projectId: this.props.projectId,
        }

       this.uppy = new Uppy()
            .on('files-added', (files) => {
                this.state.mediaFiles = [];
                for (const file of files) {
                    //remove comma or double inverted comma from file name.
                    var filename = file.name.replace(/[^a-zA-Z0-9.]+/g, '-');
                    this.state.mediaFiles.push(
                        this.renameFile(file, filename)
                    );
                }
            })
            .on('upload', () => {
                let mediaInfo = {
                    projectId: this.state.projectId,
                    mediaFiles: []
                };

                HttpRequest('media', mediaInfo, response => {
                    if (response.success) {
                        let i = 0;
                        let mediaIds = response.mediaIds;
                        for (const [key, file] of Object.entries(this.state.mediaFiles)) {
                            this.uploadFile(this.state.mediaFiles.length, file, mediaIds[i]);
                            i++;
                        }
                    }
                }, 'POST');
            })
      }
}

This is function that handle to upload media

    uploadFile(file, media) {
        this.uppy.use(Tus, {
            endpoint: APIURL + "tus?mediaId=" + media,
            retryDelays: [0, 1000, 3000, 5000, 10000],
            chunkSize: 500000,
            resume: true,
            removeFingerprintOnSuccess: true,
            metadata: {
                filename: file.name,
                filetype: file.type
            }
        })
    }

   componentDidMount() {
        this.uploadFile();
   }

When the above is function mediaId not been set. It always posting undefined. Please help me out from here anyone. I got stuck here from past two days.

Thanks in advance.

2

Hi, uppy.use(Tus) is something that should only be done once, as it installs the plugin. You can’t call it every time in a custom upload function.

I’m not sure what renameFile is doing in your code, but perhaps relativePath could help:

  meta: {
    // optional, store the directory path of a file so Uppy can tell identical files in different directories apart.
    relativePath: webkitFileSystemEntry.relativePath,
  },

Lastly, uploading files in a dynamically created folder has to be done on the server. How that is done depends on which Tus server you use. What are you using?