Changing the upload id of an uppy file upload

[rockyhuber]

I would like to change the uppy file id before it is uploaded to the server.

I have tried the following:

onBeforeUpload: (files) => {
            let date = Date.now();
            let newObj = {};
            Object.keys(files).forEach(fileId => {
                let newId = date + '-' + fileId;
                newOb[fileId] = {...files[fileId]}; // replicate object
                newObj[fileId].id = newId; // update data
                let obz = {...newObj[fileId].meta};
                obz.clientFileNameToMap = newId; // update inner object
                newObj[fileId].meta = obz; // update inner object
            });
            return newObj;
        },

I am basically trying to add the date before the id before I upload it. Any suggestions greatly appreciated. The error when I get this code, is an key value that sits within the progress object is undefined.

[goto-bus-stop]

It's best not to muck with the ID because Uppy uses it internally for bookkeeping. The progress object error probably happens because Uppy tries to access a file by the ID it knew previously. Uppy's internal storage uses an immutable style, so file objects can be switched out at any time. We tend to not store references to file objects directly, the IDs are the only consistent thing :)

To get an identifieer suitable for use on the backend, I'd recommend using a properly unique one and sending it as metadata (or generating it on the backend in the first place if possible).

With a package like https://www.npmjs.com/package/uuid, you can do:

const generateUuid = require('uuid/v4')
uppy.on('file-added', (file) => {
  uppy.setFileMeta(file.id, { id: generateUuid() })
})

[rockyhuber]

Thanks for your quick reply. The problem I am facing is that I am getting duplicate keys from id's generated by Uppy. When I upload the same file, it creates a file name with the same Uppy upload id. Ideally I'd like to have this id different. Any suggestions?

[arturi]

It’s been discussed and asked for in a few issues, and there’s a PR: #1334. But we haven’t landed on a good solution yet, because the proposed ones might break some functionality for resumable uploads and such.

[goto-bus-stop]

Is the problem with IDs clashing on the frontend_, or on the backend? I would recommend against using Uppy-generated IDs for file names.

[rockyhuber]

I went around and fixed this by passing date metadata through on a new file upload and then appending that to the Uppy-generated ID, then mapping that back after I have processed that file on the server.

let date = Date.now();
this.uppyAudioVideo.setFileMeta(file.id, {newIdToTest: date});

So the problem is definitely on the front end though. We were using the Uppy-generated ID for an array key.

Though perhaps a bigger problem, is that the Uppy Tus options are not working altogether.

I am passing in the following options and the only one that seems to work is the endpoint. Nothing else is firing. RemoveFingerPrintOnSuccess is very important, though it isn't doing anything. The fingerprint seems to be only removed after I refresh the page? OnSuccess function or OnError function never called.

    .use(Tus, {
        endpoint: 'http://localhost:9000/uploads/',
        autoRetry: true,
        retryDelays: [0, 1000, 3000, 5000],
        limit: 1,
        withCredentials: true,
        removeFingerprintOnSuccess: true,
        resume: true,
        onSuccess: () => {
            console.log('we finished all the uploads, Tus works');
        }
    }),

Not sure why any of the Tus options are not working except the endpoint?

[kvz]

Hi there, closing this, as we're continuing the remaining issue in #1327. Feel free to re-open if you disagree!