Skip to content

fix: uid conflict when multiple upload components paste at same time #686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arksia wants to merge 4 commits into
base: master
Choose a base branch
from
+68 −5
Open

fix: uid conflict when multiple upload components paste at same time #686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f9160ad
fix: uid conflict when multiple upload components paste at same time
arksia Dec 1, 2025
456d89b
style: simplify arrow function
arksia Dec 2, 2025
756b651
test: add uid uniqueness check in multi upload paste test
arksia Dec 2, 2025
1aeb019
test: optimize test case
Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/AjaxUploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,12 @@ class AjaxUploader extends Component<UploadProps> {
const { multiple, directory } = this.props;

const items: DataTransferItem[] = [...(dataTransfer.items || [])];
let files: File[] = [...(dataTransfer.files || [])];
let files: File[] = [...(dataTransfer.files || [])].map(file => (
new File([file], file.name, {
type: file.type,
lastModified: file.lastModified,
})
));
Comment on lines +98 to +103
Copy link
Member

@afc163 afc163 Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

// Clone File objects to avoid shared uid mutation between multiple Upload components
const files: File[] = Array.from(dataTransfer.files ?? [], file =>
  new File([file], file.name, {
    type: file.type,
    lastModified: file.lastModified,
  })
);


if (files.length > 0 || items.some(item => item.kind === 'file')) {
existFileCallback?.();
Expand Down Expand Up @@ -296,7 +301,6 @@ class AjaxUploader extends Component<UploadProps> {
delete this.reqs[uid];
},
};
Copy link

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whitespace-only change appears to be unintentional. Consider keeping the blank line after the object definition for better readability.

Suggested change
};
};

Copilot uses AI. Check for mistakes.

onStart(origin);
this.reqs[uid] = request(requestOption, { defaultRequest });
}
Expand Down
65 changes: 62 additions & 3 deletions tests/uploader.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ describe('uploader', () => {
Object.defineProperty(files, 'item', {
value: i => files[i],
});

Copy link

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whitespace-only change appears to be unintentional. Consider keeping the original blank line for consistency with the rest of the codebase.

Suggested change

Copilot uses AI. Check for mistakes.
// Only can trigger once
let triggerTimes = 0;
handlers.onStart = () => {
Expand All @@ -345,7 +345,7 @@ describe('uploader', () => {
fireEvent.drop(input, { dataTransfer: { files } });

setTimeout(() => {
handlers.onSuccess!(['', files[0].name] as any, files[0] as any, null!);
requests[0].respond(200, {}, `["","${files[0].name}"]`);
}, 100);
});

Expand Down Expand Up @@ -432,7 +432,7 @@ describe('uploader', () => {
fireEvent.paste(input, { clipboardData: { files } });

await sleep(100);
handlers.onSuccess!(['', files[0].name] as any, files[0] as any, null!);
requests[0].respond(200, {}, `["","${files[0].name}"]`);
});

it('support action and data is function returns Promise', async () => {
Expand Down Expand Up @@ -524,6 +524,65 @@ describe('uploader', () => {
expect(preventDefaultSpy).toHaveBeenCalledTimes(0);
preventDefaultSpy.mockRestore();
});

it('should prevent uid overwritten when multiple upload components paste simultaneously', async () => {
const uidsInBeforeUpload: string[] = [];
const uidsInOnStart: string[] = [];
const uidsInOnSuccess: string[] = [];

const createUploadProps = (index: number): UploadProps => ({
...props,
pastable: true,
beforeUpload(file) {
uidsInBeforeUpload[index] = file.uid;
return true;
},
onStart(file) {
uidsInOnStart[index] = file.uid;
},
onSuccess(ret, file) {
uidsInOnSuccess[index] = file.uid;
},
onError(err) {
throw err;
},
});

const { container } = render(<Upload {...createUploadProps(0)} />);
render(<Upload {...createUploadProps(1)} />);

const input = container.querySelector('input')!;
const files = [new File([''], 'success.png', { type: 'image/png' })];
Object.defineProperty(files, 'item', {
value: i => files[i],
});

fireEvent.paste(input, { clipboardData: { files } });

await sleep(100);

expect(uidsInBeforeUpload[0]).toBeDefined();
expect(uidsInBeforeUpload[1]).toBeDefined();
expect(uidsInBeforeUpload[0]).not.toEqual(uidsInBeforeUpload[1]);

expect(uidsInOnStart[0]).toBeDefined();
expect(uidsInOnStart[1]).toBeDefined();
expect(uidsInOnStart[0]).not.toEqual(uidsInOnStart[1]);

expect(uidsInOnStart[0]).toEqual(uidsInBeforeUpload[0]);
expect(uidsInOnStart[1]).toEqual(uidsInBeforeUpload[1]);

expect(requests).toHaveLength(2);
requests[0].respond(200, {}, `["","${files[0].name}"]`);
requests[1].respond(200, {}, `["","${files[0].name}"]`);

expect(uidsInOnSuccess[0]).toBeDefined();
expect(uidsInOnSuccess[1]).toBeDefined();
expect(uidsInOnSuccess[0]).not.toEqual(uidsInOnSuccess[1]);

Copy link

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing whitespace detected. Consider removing it for consistency with the codebase style.

Suggested change

Copilot uses AI. Check for mistakes.
expect(uidsInOnSuccess[0]).toEqual(uidsInBeforeUpload[0]);
expect(uidsInOnSuccess[1]).toEqual(uidsInBeforeUpload[1]);
});
});

describe('directory uploader', () => {
Expand Down