Skip to content

Commit

Permalink
20220916 upload (#1524)
Browse files Browse the repository at this point in the history 
* feat(upload): progress improment

* feat(upload): code save

* feat(upload): progress

* feat(upload): demo

* perf(test): update snapshtos

* fix(upload): ts error

* fix(upload): remove multiple remvoe event

* feat: update common
  • Loading branch information
@chaishi
chaishi authored Sep 26, 2022
1 parent 918eb29 commit d6aa9f2
Show file tree
Hide file tree
Showing 18 changed files with 444 additions and 245 deletions.
15 changes: 10 additions & 5 deletions src/form/__tests__/__snapshots__/form.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2001,14 +2001,19 @@ exports[`disabled.jsx 1`] = `
</span>
</div>
</div>
<div
class="t-upload__card-name"
>
avatar.jpg
</div>
</li>
</ul>
<small
class="t-upload__tips t-size-s"
>
请选择单张图片文件上传
</small>
</div>
<small
class="t-upload__tips t-size-s"
>
请选择单张图片文件上传
</small>
</div>
</div>
</div>
Expand Down
157 changes: 108 additions & 49 deletions src/upload/__tests__/__snapshots__/upload.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -549,7 +549,7 @@ exports[`draggable.jsx 1`] = `
<small
class="t-size-s"
>
上传日期：2022-08-27 8:0:0
上传日期：2022-09-25
</small>
<div
class="t-upload__dragger-btns"
Expand Down Expand Up @@ -906,49 +906,108 @@ exports[`image.jsx 1`] = `
class="t-space-item"
>
<div
class="t-upload"
class="t-space t-space-horizontal"
style="gap: 16px;"
>
<input
accept="image/*"
hidden=""
type="file"
/>
<div>
<ul
class="t-upload__card"
<div
class="t-space-item"
>
<div
class="t-upload"
>
<li
class="t-upload__card-item t-is-background"
>
<div
class="t-upload__card-container t-upload__card-box"
<input
accept="image/*"
hidden=""
type="file"
/>
<div>
<ul
class="t-upload__card"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<p
class="t-size-s"
<li
class="t-upload__card-item t-is-background"
>
请选择图片
</p>
</div>
</li>
</ul>
<small
class="t-upload__tips t-size-s"
<div
class="t-upload__card-container t-upload__card-box"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<p
class="t-size-s"
>
请选择图片
</p>
</div>
</li>
</ul>
</div>
<small
class="t-upload__tips t-size-s"
>
请选择单张图片文件上传（上传成功状态演示）
</small>
</div>
</div>
<div
class="t-space-item"
>
<div
class="t-upload"
>
请选择单张图片文件上传
</small>
<input
accept="image/*"
hidden=""
type="file"
/>
<div>
<ul
class="t-upload__card"
>
<li
class="t-upload__card-item t-is-background"
>
<div
class="t-upload__card-container t-upload__card-box"
>
<svg
class="t-icon t-icon-add"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
<p
class="t-size-s"
>
点击上传图片
</p>
</div>
</li>
</ul>
</div>
<small
class="t-upload__tips t-size-s"
>
单张图片文件上传（上传失败状态演示）
</small>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1029,13 +1088,13 @@ exports[`image.jsx 1`] = `
</span>
</div>
</div>
<div
class="t-upload__card-name"
>
default.jpeg
</div>
</li>
</ul>
<small
class="t-upload__tips t-size-s"
>
默认已上传文件
</small>
</div>
</div>
</div>
Expand Down Expand Up @@ -1082,12 +1141,12 @@ exports[`image.jsx 1`] = `
</div>
</li>
</ul>
<small
class="t-upload__tips t-size-s"
>
允许选择多张图片文件上传，最多只能上传 3 张图片
</small>
</div>
<small
class="t-upload__tips t-size-s"
>
允许选择多张图片文件上传，最多只能上传 3 张图片
</small>
</div>
</div>
</div>
Expand Down
39 changes: 27 additions & 12 deletions src/upload/_example/base.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { Upload, Space, Radio, Checkbox, Button, MessagePlugin } from 'tdesign-r
import { CloseIcon } from 'tdesign-icons-react';

export default function UploadExample() {
const uploadRef1 = useRef();
const uploadRef2 = useRef();
const uploadRef3 = useRef();
const uploadRef1 = useRef(null);
const uploadRef2 = useRef(null);
const uploadRef3 = useRef(null);
const [files1, setFiles1] = useState([]);
const [files2, setFiles2] = useState([
{
Expand Down Expand Up @@ -87,15 +87,15 @@ export default function UploadExample() {
// 仅自定义文件列表所需
// eslint-disable-next-line
const outsideRemove = (index) => {
const tmpFiles = [...files1];
const tmpFiles = [...files3];
tmpFiles.splice(index, 1);
setFiles1(tmpFiles);
setFiles3(tmpFiles);
};

// eslint-disable-next-line
const fileListDisplay = ({ files }) => (
const fileListDisplay = () => (
<div>
{files.map((file, index) => (
{files3.map((file, index) => (
<div key={file.name} className="t-upload__single-display-text t-upload__display-text--margin">
{file.name}（{file.size} B）
<CloseIcon className="t-upload__icon-delete" onClick={() => outsideRemove(index)} />
Expand All @@ -119,7 +119,19 @@ export default function UploadExample() {
};

// 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
const formatResponse = (res) => ({ ...res, error: '上传失败，请重试', url: res.url });
const formatResponse = (res) => ({ ...res, error: '上传失败，请重试', url: res?.url });

/** 单个文件校验方法，示例代码有效，勿删 */
// const beforeUpload = (file) => {
// MessagePlugin.error(`文件 ${file.name} 不满足条件`);
// return false;
// };

/** 全部文件一次性校验方法，示例代码有效，勿删 */
// const beforeAllFilesUpload = () => {
// MessagePlugin.error(`文件不满足条件`);
// return false;
// };

return (
<Space direction="vertical">
Expand Down Expand Up @@ -160,7 +172,10 @@ export default function UploadExample() {
<Upload
ref={uploadRef1}
files={files1}
onChange={setFiles1}
onChange={(val) => {
console.log(val);
setFiles1(val);
}}
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
placeholder={multiple ? '文件数量不超过 5 个' : '要求文件大小在 1M 以内'}
multiple={multiple}
Expand All @@ -171,7 +186,6 @@ export default function UploadExample() {
max={5}
disabled={disabled}
allowUploadDuplicateFile={true}
// fileListDisplay={fileListDisplay}
// formatRequest={(obj) => ({ ...obj, other: 123 })}
onSelectChange={handleSelectChange}
onFail={handleFail}
Expand All @@ -191,10 +205,10 @@ export default function UploadExample() {
uploadAllFilesInOneRequest={uploadInOneRequest}
isBatchUpload={isBatchUpload}
triggerButtonProps={{ theme: 'primary', variant: 'base' }}
onFail={handleFail}
placeholder="这是一段没有文件时的占位文本"
action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
style={{ marginLeft: '40px' }}
onFail={handleFail}
></Upload>

{/* formatResponse 可控制上传成功或者失败 */}
Expand All @@ -207,11 +221,12 @@ export default function UploadExample() {
autoUpload={autoUpload}
uploadAllFilesInOneRequest={uploadInOneRequest}
isBatchUpload={isBatchUpload}
onFail={handleFail}
formatResponse={formatResponse}
placeholder="文件上传失败示例"
action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
style={{ marginLeft: '60px' }}
// fileListDisplay={fileListDisplay}
onFail={handleFail}
/>
</Space>
</Space>
Expand Down
35 changes: 32 additions & 3 deletions src/upload/_example/draggable.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,28 @@
import React, { useState } from 'react';
import { Upload, Radio, Switch, Space, MessagePlugin } from 'tdesign-react';

function getCurrentDate(needTime = false) {
const d = new Date();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = `${d.getFullYear()}-${month}-${d.getDate()}`;
const time = `${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`;
if (needTime) return [date, time].join(' ')
return date;
}

export default function UploadExample() {
const [files, setFiles] = useState([]);
const [files2, setFiles2] = useState([{ name: '默认文件', url: 'https://tdesign.gtimg.com/site/source/figma-pc.png', status: 'success', size: 1024 }]);
const [files2, setFiles2] = useState([{
name: '默认文件',
url: 'https://tdesign.gtimg.com/site/source/figma-pc.png',
status: 'success',
size: 1024,
// 上传日期，如果接口返回的字段包含 uploadTime，则会以接口返回的为准，默认使用本地电脑时间。
// 如果希望使用接口返回的上传日期，但是接口字段名不是 uploadTime，则可以使用函数 formatResponse 格式化接口数据
uploadTime: '2022-09-25',
}]);

const [autoUpload, setAutoUpload] = React.useState(false);
const [theme, setTheme] = React.useState('file');

Expand All @@ -15,28 +34,37 @@ export default function UploadExample() {
MessagePlugin.success('上传成功');
};

// res.url 图片地址；res.uploadTime 文件上传时间；res.error 上传失败的原因
const formatResponse = (res) => {
// 响应结果添加上传时间字段，用于 UI 显示
res.uploadTime = getCurrentDate();
return res;
}

return (
<Space direction="vertical">
<div>
是否自动上传：
<Switch value={autoUpload} onChange={setAutoUpload} />
</div>
<Radio.Group defaultValue="file" onChange={(val) => setTheme(val)} variant="default-filled">
<Radio.Group defaultValue="file" onChange={setTheme} variant="default-filled">
<Radio.Button value="file">文件拖拽上传</Radio.Button>
<Radio.Button value="image">图片拖拽上传</Radio.Button>
</Radio.Group>

<br />

{/* 可以使用 trigger 自定义拖拽区域显示的内容 */}
{/* <!-- abridgeName 表示省略文件名中间文本，保留两侧。左侧保留的文本数量，右侧保留的文本数量] --> */}
<Space>
{/* 可以使用 trigger 自定义拖拽区域显示的内容 */}
<Upload
theme={theme}
autoUpload={autoUpload}
data={{ extraData: 123, fileName: 'certificate' }}
draggable
action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
files={files}
formatResponse={formatResponse}
onChange={setFiles}
onFail={onFail}
onSuccess={onSuccess}
Expand All @@ -49,6 +77,7 @@ export default function UploadExample() {
draggable
action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
files={files2}
formatResponse={formatResponse}
onChange={setFiles2}
onFail={onFail}
onSuccess={onSuccess}
Expand Down
Loading

0 comments on commit d6aa9f2

Please sign in to comment.