feat: add custom isImgurl prop to Upload Component #23248

onjuju · 2020-04-14T09:58:42Z

feat: add custom isImgurl prop to Upload

🤔 这个变动的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

某些oss服务使用"!"或其他分隔符传递参数，使得文件的thumbUrl不能正确被识别为图片路径。这里增加自定义传入判断是否为图片url的方法，默认仍为内置的判断方法。

📝 更新日志怎么写？

语言	更新描述
🇺🇸 英文	Add custom isImgUrl props to Upload Component
🇨🇳 中文	上传组件增加自定义判断图片地址方法的支持

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充
Changelog 已提供或无须提供

View rendered components/upload/index.en-US.md
View rendered components/upload/index.zh-CN.md

tests-checker

Could you please add tests to make sure this change works as expected?

ant-design-bot · 2020-04-14T10:01:21Z

codesandbox-ci · 2020-04-14T10:03:30Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c4525d6:

Sandbox	Source
antd reproduction template	Configuration

codecov · 2020-04-14T10:12:32Z

Codecov Report

Merging #23248 into feature will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff            @@
##           feature   #23248   +/-   ##
========================================
  Coverage    98.35%   98.35%           
========================================
  Files          365      365           
  Lines         7289     7290    +1     
  Branches      1999     2001    +2     
========================================
+ Hits          7169     7170    +1     
  Misses         120      120

Impacted Files	Coverage Δ
components/upload/Upload.tsx	`99.18% <ø> (ø)`
components/upload/UploadList.tsx	`99.23% <100.00%> (+<0.01%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fca1367...c4525d6. Read the comment docs.

afc163 · 2020-04-14T10:16:51Z

feature branch

onjuju · 2020-04-14T10:19:17Z

feature branch

changed...

afc163 · 2020-04-14T10:21:29Z

components/upload/index.zh-CN.md

@@ -34,6 +34,7 @@ title: Upload
 | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false |  |
 | name | 发到后台的文件参数名 | string | 'file' |  |
 | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 |  |
+| isImageUrl | 自定义缩略图是否使用 img 标签进行显示 | (file: UploadFile) => boolean | 无 |  |


默认值可以给一个 github 源代码地址。

onjuju · 2020-04-14T10:24:20Z

ok

…

afc163 · 2020-04-14T10:39:21Z

components/upload/index.en-US.md

@@ -33,7 +33,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |  |
 | name | The name of uploading file | string | 'file' |  |
 | previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - |  |
-| isImageUrl | Customize if render <img /> in thumbnail | (file: UploadFile) => boolean | - |  |
+| isImageUrl | Customize if render <img /> in thumbnail | (file: UploadFile) => boolean | [inside implementation](https://github.com/ant-design/ant-design/blob/master/components/upload/utils.tsx) |  |


ant-design/components/upload/utils.tsx

Lines 47 to 68 in 4ad5830

export const isImageUrl = (file: UploadFile): boolean => {

if (file.type) {

return isImageFileType(file.type);

}

const url: string = (file.thumbUrl || file.url) as string;

const extension = extname(url);

if (

/^data:image\//.test(url) ||

/(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i.test(extension)

) {

return true;

}

if (/^data:/.test(url)) {

// other file types of base64

return false;

}

if (extension) {

// other file types which have extension

return false;

}

return true;

};

sorry... i got. done

onjuju added 2 commits April 14, 2020 17:51

feat: customize isImageUrl support

dbba178

docs: Update Upload doc

979a1ad

pr-triage bot added the PR: unreviewed label Apr 14, 2020

tests-checker bot suggested changes Apr 14, 2020

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: unreviewed labels Apr 14, 2020

onjuju changed the base branch from feat/compact-small-font to feature April 14, 2020 10:18

afc163 reviewed Apr 14, 2020

View reviewed changes

docs: Add isImgUrl default implement link

6ea3b2b

pr-triage bot added PR: unreviewed and removed PR: reviewed-changes-requested labels Apr 14, 2020

afc163 reviewed Apr 14, 2020

View reviewed changes

docs: update default link address

c4525d6

afc163 approved these changes Apr 14, 2020

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Apr 14, 2020

afc163 merged commit 87da7bf into ant-design:feature Apr 14, 2020

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Apr 14, 2020

afc163 mentioned this pull request Apr 14, 2020

UploadList组件，当传入的fileList的url为感叹号进行传参时，组件会将url识别为非图片，导致无法正确显示图片 #23203

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add custom isImgurl prop to Upload Component #23248

feat: add custom isImgurl prop to Upload Component #23248

onjuju commented Apr 14, 2020 •

edited by markdownify bot

Loading

tests-checker bot left a comment

ant-design-bot commented Apr 14, 2020 •

edited

Loading

codesandbox-ci bot commented Apr 14, 2020 •

edited

Loading

codecov bot commented Apr 14, 2020 •

edited

Loading

afc163 commented Apr 14, 2020

onjuju commented Apr 14, 2020

afc163 Apr 14, 2020

onjuju Apr 14, 2020

onjuju commented Apr 14, 2020 via email

afc163 Apr 14, 2020

onjuju Apr 14, 2020

	export const isImageUrl = (file: UploadFile): boolean => {
	if (file.type) {
	return isImageFileType(file.type);
	}
	const url: string = (file.thumbUrl \|\| file.url) as string;
	const extension = extname(url);
	if (
	/^data:image\//.test(url) \|\|
	/(webp\|svg\|png\|gif\|jpg\|jpeg\|jfif\|bmp\|dpg\|ico)$/i.test(extension)
	) {
	return true;
	}
	if (/^data:/.test(url)) {
	// other file types of base64
	return false;
	}
	if (extension) {
	// other file types which have extension
	return false;
	}
	return true;
	};

feat: add custom isImgurl prop to Upload Component #23248

feat: add custom isImgurl prop to Upload Component #23248

Conversation

onjuju commented Apr 14, 2020 • edited by markdownify bot Loading

🤔 这个变动的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

📝 更新日志怎么写？

☑️ 请求合并前的自查清单

tests-checker bot left a comment

Choose a reason for hiding this comment

ant-design-bot commented Apr 14, 2020 • edited Loading

codesandbox-ci bot commented Apr 14, 2020 • edited Loading

codecov bot commented Apr 14, 2020 • edited Loading

Codecov Report

afc163 commented Apr 14, 2020

onjuju commented Apr 14, 2020

afc163 Apr 14, 2020

Choose a reason for hiding this comment

onjuju Apr 14, 2020

Choose a reason for hiding this comment

onjuju commented Apr 14, 2020 via email

afc163 Apr 14, 2020

Choose a reason for hiding this comment

onjuju Apr 14, 2020

Choose a reason for hiding this comment

onjuju commented Apr 14, 2020 •

edited by markdownify bot

Loading

ant-design-bot commented Apr 14, 2020 •

edited

Loading

codesandbox-ci bot commented Apr 14, 2020 •

edited

Loading

codecov bot commented Apr 14, 2020 •

edited

Loading