mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
fix: Upload preview should work with Blob (#17392)
* fix: Upload preview should work with Blob * rm only
This commit is contained in:
parent
d87bff6203
commit
b5143df1a4
@ -42,19 +42,22 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
return;
|
||||
}
|
||||
(items || []).forEach(file => {
|
||||
const isValidateFile =
|
||||
file.originFileObj instanceof File || file.originFileObj instanceof Blob;
|
||||
|
||||
if (
|
||||
typeof document === 'undefined' ||
|
||||
typeof window === 'undefined' ||
|
||||
!(window as any).FileReader ||
|
||||
!(window as any).File ||
|
||||
!(file.originFileObj instanceof File) ||
|
||||
!isValidateFile ||
|
||||
file.thumbUrl !== undefined
|
||||
) {
|
||||
return;
|
||||
}
|
||||
file.thumbUrl = '';
|
||||
if (previewFile) {
|
||||
previewFile(file.originFileObj).then((previewDataUrl: string) => {
|
||||
previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
|
||||
// Need append '' to avoid dead loop
|
||||
file.thumbUrl = previewDataUrl || '';
|
||||
this.forceUpdate();
|
||||
|
@ -506,28 +506,35 @@ describe('Upload List', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('customize previewFile support', async () => {
|
||||
const mockThumbnail = 'mock-image';
|
||||
const previewFile = jest.fn(() => {
|
||||
return Promise.resolve(mockThumbnail);
|
||||
});
|
||||
const file = {
|
||||
...fileList[0],
|
||||
originFileObj: new File([], 'xxx.png'),
|
||||
};
|
||||
delete file.thumbUrl;
|
||||
describe('customize previewFile support', () => {
|
||||
function test(name, renderInstance) {
|
||||
it(name, async () => {
|
||||
const mockThumbnail = 'mock-image';
|
||||
const previewFile = jest.fn(() => {
|
||||
return Promise.resolve(mockThumbnail);
|
||||
});
|
||||
const file = {
|
||||
...fileList[0],
|
||||
originFileObj: renderInstance(),
|
||||
};
|
||||
delete file.thumbUrl;
|
||||
|
||||
const wrapper = mount(
|
||||
<Upload listType="picture" defaultFileList={[file]} previewFile={previewFile}>
|
||||
<button type="button" />
|
||||
</Upload>,
|
||||
);
|
||||
wrapper.setState({});
|
||||
await delay(0);
|
||||
const wrapper = mount(
|
||||
<Upload listType="picture" defaultFileList={[file]} previewFile={previewFile}>
|
||||
<button type="button" />
|
||||
</Upload>,
|
||||
);
|
||||
wrapper.setState({});
|
||||
await delay(0);
|
||||
|
||||
expect(previewFile).toHaveBeenCalledWith(file.originFileObj);
|
||||
wrapper.update();
|
||||
expect(previewFile).toHaveBeenCalledWith(file.originFileObj);
|
||||
wrapper.update();
|
||||
|
||||
expect(wrapper.find('.ant-upload-list-item-thumbnail img').prop('src')).toBe(mockThumbnail);
|
||||
expect(wrapper.find('.ant-upload-list-item-thumbnail img').prop('src')).toBe(mockThumbnail);
|
||||
});
|
||||
}
|
||||
|
||||
test('File', () => new File([], 'xxx.png'));
|
||||
test('Blob', () => new Blob());
|
||||
});
|
||||
});
|
||||
|
@ -23,7 +23,7 @@ export interface UploadFile {
|
||||
status?: UploadFileStatus;
|
||||
percent?: number;
|
||||
thumbUrl?: string;
|
||||
originFileObj?: File;
|
||||
originFileObj?: File | Blob;
|
||||
response?: any;
|
||||
error?: any;
|
||||
linkProps?: any;
|
||||
|
Loading…
Reference in New Issue
Block a user