Skip to content
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.

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

feat: add custom isImgurl prop to Upload Component #23248

Merged
merged 4 commits into from Apr 14, 2020

Conversation

onjuju
Copy link
Contributor

@onjuju onjuju commented Apr 14, 2020

feat: add custom isImgurl prop to Upload

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 组件样式改进
  • TypeScript 定义更新
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(New component prop)

🔗 相关 Issue

#22958

💡 需求背景和解决方案

某些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

Copy link

@tests-checker tests-checker bot left a comment

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

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Apr 14, 2020

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Apr 14, 2020

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
Copy link

@codecov codecov bot commented Apr 14, 2020

Codecov Report

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

Impacted file tree graph

@@           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
Copy link
Member

@afc163 afc163 commented Apr 14, 2020

feature branch

@onjuju onjuju changed the base branch from feat/compact-small-font to feature Apr 14, 2020
@onjuju
Copy link
Contributor Author

@onjuju onjuju commented Apr 14, 2020

feature branch

changed...

@@ -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 | 无 | |
Copy link
Member

@afc163 afc163 Apr 14, 2020

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

@onjuju onjuju Apr 14, 2020

Choose a reason for hiding this comment

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

done

@onjuju
Copy link
Contributor Author

@onjuju onjuju commented Apr 14, 2020

@@ -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) | |
Copy link
Member

@afc163 afc163 Apr 14, 2020

Choose a reason for hiding this comment

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

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;
};

Copy link
Contributor Author

@onjuju onjuju Apr 14, 2020

Choose a reason for hiding this comment

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

sorry... i got. done

afc163
afc163 approved these changes Apr 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants