How to pass variable with uppy tus upload

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) {

        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 =[^a-zA-Z0-9.]+/g, '-');
                        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]);
                }, '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: {
                filetype: file.type

   componentDidMount() {

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.

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?