Uploading of same file simultaneously in two different tabs of same window is failing

[GopalZadafiya]

Describe the bug If we try to upload the same file in two different tabs of same window It considers the 2nd file same as the first and shows the same progress for both(try to upload large file).

To Reproduce Steps to reproduce the behavior: 1) download and setup the demo upload pages running. 2) open localhost:4200 in two different tabs within a window. 3) try to open a file in first and then the same file in second window. 4) click pause for few seconds and click upload again. 5) It will show the same progress on both the pages now.

Expected behavior Both pages should show actual upload progress.

Setup details:

• Used ngx-uploadx 4.0.1
• Used Angular 7.3.10
• Used Firefox on windows 10
• Used node-uploadx 3.0.0

[kukhariev]

This is expected behavior for resumable uploads. Both windows try to save the file to the same file on the server.

[GopalZadafiya]

@kukhariev I see that we generate same ids for those files. so what if we generate different Ids for those files ? Then server considers it as separate files.

[kukhariev]

Then server considers it as separate files.

Not quite so. The server will still detect that this is the same file and generate an identical link/id to upload. You can get around it by changing the metadata.name field.

From node-uploadx file.ts:

const generateFileId = (file: File): string => {
  const { originalName, size, userId, metadata } = file;
  return metadata.lastModified
    ? md5([originalName, size, metadata.lastModified, userId || ''].join('-'))
    : uid();
}; 

This is better for browsers in incognito mode and some deduplication in storage mechanism than just using a random id.

It is also possible to use dest (node-uploadx v3) or filename (node-uploadx v4) option

• server:

  const opts = { directory: UPLOAD_DIR, path: '/files',  filename: file => `${file.originalName}-${file.metadata.version`,};
  const upx = new Uploadx(opts);

• client:

  options: UploadxOptions = {
  metadata: { version: getVersion()}
  endpoint: `${environment.api}/files?uploadType=uploadx`,
  };