mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 03:36:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(client): add attachment file type registry (#5353)
Some checks are pending
Build Docker Image / build-and-push (push) Waiting to run
Details
Build Pro Image / build-and-push (push) Waiting to run
Details
E2E / Build (push) Waiting to run
Details
E2E / Core and plugins (push) Blocked by required conditions
Details
E2E / plugin-workflow (push) Blocked by required conditions
Details
E2E / plugin-workflow-approval (push) Blocked by required conditions
Details
E2E / plugin-data-source-main (push) Blocked by required conditions
Details
E2E / Comment on PR (push) Blocked by required conditions
Details
NocoBase FrontEnd Test / frontend-test (18) (push) Waiting to run
Details

Browse Source 
* refactor(client): add attachment file type registry

* refactor(client): change api name of attachmentFileTypes

* fix(client): to open file preview in new window if previewer not defined

* fix(client): fix attachmentFileTypes default value

* refactor(client): simplify file previewer code and allow to preview most file by default

* refactor(client): make custom file type has high priority

* refactor(client): add types for upload component api

* fix(client): fix upload component locale
This commit is contained in:
Junyi 2024-10-04 16:49:26 +08:00 committed by GitHub
parent 512df745fa
commit 164847d9a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 185 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/client/src/locale/zh-CN.json
View File

@ -800,6 +800,7 @@
"Try again": "重试一下",
"Download logs": "下载日志",
"Download": "下载",
"File type is not supported for previewing, please download it to preview.": "不支持预览该文件类型，请下载后查看。",
"Click or drag file to this area to upload": "点击或拖拽文件到此区域上传",
"Support for a single or bulk upload.": "支持单个或批量上传",
"File size should not exceed {{size}}.": "文件大小不能超过 {{size}}",

267
packages/core/client/src/schema-component/antd/upload/Upload.tsx
View File

@ -10,7 +10,7 @@
import { DeleteOutlined, DownloadOutlined, InboxOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Field } from '@formily/core';
import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
import { Upload as AntdUpload, Button, Modal, Progress, Space, Tooltip } from 'antd';
import { Alert, Upload as AntdUpload, Button, Modal, Progress, Space, Tooltip } from 'antd';
import useUploadStyle from 'antd/es/upload/style';
import cls from 'classnames';
import { saveAs } from 'file-saver';
@ -18,13 +18,14 @@ import filesize from 'filesize';
import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import LightBox from 'react-image-lightbox';
import match from 'mime-match';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
import { useProps } from '../../hooks/useProps';
import {
FILE_SIZE_LIMIT_DEFAULT,
isImage,
isPdf,
attachmentFileTypes,
getThumbnailPlaceholderURL,
normalizeFile,
toFileList,
toValueItem,
@ -34,6 +35,129 @@ import {
import { useStyles } from './style';
import type { ComposedUpload, DraggerProps, DraggerV2Props, UploadProps } from './type';
attachmentFileTypes.add({
match(file) {
return match(file.mimetype || file.type, 'image/*');
},
getThumbnailURL(file) {
return file.url ? `${file.url}${file.thumbnailRule || ''}` : URL.createObjectURL(file.originFileObj);
},
Previewer({ index, list, onSwitchIndex }) {
const onDownload = useCallback(
(e) => {
e.preventDefault();
const file = list[index];
saveAs(file.url, `${file.title}${file.extname}`);
},
[index, list],
);
return (
<LightBox
// discourageDownloads={true}
mainSrc={list[index]?.url}
nextSrc={list[(index + 1) % list.length]?.url}
prevSrc={list[(index + list.length - 1) % list.length]?.url}
onCloseRequest={() => onSwitchIndex(null)}
onMovePrevRequest={() => onSwitchIndex((index + list.length - 1) % list.length)}
onMoveNextRequest={() => onSwitchIndex((index + 1) % list.length)}
imageTitle={list[index]?.title}
toolbarButtons={[
<button
key={'preview-img'}
style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
type="button"
aria-label="Download"
title="Download"
className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
onClick={onDownload}
>
<DownloadOutlined />
</button>,
]}
/>
);
},
});
const iframePreviewSupportedTypes = ['application/pdf', 'audio/*', 'image/*', 'video/*'];
function IframePreviewer({ index, list, onSwitchIndex }) {
const { t } = useTranslation();
const file = list[index];
const onOpen = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
window.open(file.url);
},
[file],
);
const onDownload = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
saveAs(file.url, `${file.title}${file.extname}`);
},
[file],
);
const onClose = useCallback(() => {
onSwitchIndex(null);
}, [onSwitchIndex]);
return (
<Modal
open={index != null}
title={file.title}
onCancel={onClose}
footer={[
<Button key="open" onClick={onOpen}>
{t('Open in new window')}
</Button>,
<Button key="download" onClick={onDownload}>
{t('Download')}
</Button>,
<Button key="close" onClick={onClose}>
{t('Close')}
</Button>,
]}
width={'85vw'}
centered={true}
>
<div
style={{
maxWidth: '100%',
maxHeight: 'calc(100vh - 256px)',
height: '90vh',
width: '100%',
background: 'white',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
overflowY: 'auto',
}}
>
{iframePreviewSupportedTypes.some((type) => match(file.mimetype || file.extname, type)) ? (
<iframe
src={file.url}
style={{
width: '100%',
maxHeight: '90vh',
flex: '1 1 auto',
border: 'none',
}}
/>
) : (
<Alert
type="warning"
description={t('File type is not supported for previewing, please download it to preview.')}
showIcon
/>
)}
</div>
</Modal>
);
}
function InternalUpload(props: UploadProps) {
const { onChange, ...rest } = props;
const onFileChange = useCallback(
@ -85,6 +209,13 @@ function useSizeHint(size: number) {
return s !== 0 ? t('File size should not exceed {{size}}.', { size: sizeString }) : '';
}
function DefaultThumbnailPreviewer({ file }) {
const { componentCls: prefixCls } = useStyles();
const { getThumbnailURL = getThumbnailPlaceholderURL } = attachmentFileTypes.getTypeByFile(file) ?? {};
const imageUrl = getThumbnailURL(file);
return <img src={imageUrl} alt={file.title} className={`${prefixCls}-list-item-image`} />;
}
function AttachmentListItem(props) {
const { file, disabled, onPreview, onDelete: propsOnDelete, readPretty } = props;
const { componentCls: prefixCls } = useStyles();
@ -104,15 +235,11 @@ function AttachmentListItem(props) {
saveAs(file.url, `${file.title}${file.extname}`);
}, [file]);
const { ThumbnailPreviewer = DefaultThumbnailPreviewer } = attachmentFileTypes.getTypeByFile(file) ?? {};
const item = [
<span key="thumbnail" className={`${prefixCls}-list-item-thumbnail`}>
{file.imageUrl && (
<img
src={`${file.imageUrl}${file.thumbnailRule || ''}`}
alt={file.title}
className={`${prefixCls}-list-item-image`}
/>
)}
<ThumbnailPreviewer file={file} />
</span>,
<span key="title" className={`${prefixCls}-list-item-name`} title={file.title}>
{file.status === 'uploading' ? t('Uploading') : file.title}
@ -166,121 +293,12 @@ function AttachmentListItem(props) {
);
}
const PreviewerTypes = [
{
matcher: isImage,
Component({ index, list, onSwitchIndex }) {
const onDownload = useCallback(
(e) => {
e.preventDefault();
const file = list[index];
saveAs(file.url, `${file.title}${file.extname}`);
},
[index, list],
);
return (
<LightBox
// discourageDownloads={true}
mainSrc={list[index]?.imageUrl}
nextSrc={list[(index + 1) % list.length]?.imageUrl}
prevSrc={list[(index + list.length - 1) % list.length]?.imageUrl}
onCloseRequest={() => onSwitchIndex(null)}
onMovePrevRequest={() => onSwitchIndex((index + list.length - 1) % list.length)}
onMoveNextRequest={() => onSwitchIndex((index + 1) % list.length)}
imageTitle={list[index]?.title}
toolbarButtons={[
<button
key={'preview-img'}
style={{ fontSize: 22, background: 'none', lineHeight: 1 }}
type="button"
aria-label="Download"
title="Download"
className="ril-zoom-in ril__toolbarItemChild ril__builtinButton"
onClick={onDownload}
>
<DownloadOutlined />
</button>,
]}
/>
);
},
},
{
matcher: isPdf,
Component({ index, list, onSwitchIndex }) {
const { t } = useTranslation();
const onDownload = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
const file = list[index];
saveAs(file.url, `${file.title}${file.extname}`);
},
[index, list],
);
const onClose = useCallback(() => {
onSwitchIndex(null);
}, [onSwitchIndex]);
return (
<Modal
open={index != null}
title={'PDF - ' + list[index].title}
onCancel={onClose}
footer={[
<Button
key="download"
style={{
textTransform: 'capitalize',
}}
onClick={onDownload}
>
{t('Download')}
</Button>,
<Button key="close" onClick={onClose} style={{ textTransform: 'capitalize' }}>
{t('Close')}
</Button>,
]}
width={'85vw'}
centered={true}
>
<div
style={{
padding: '8px',
maxWidth: '100%',
maxHeight: 'calc(100vh - 256px)',
height: '90vh',
width: '100%',
background: 'white',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
overflowY: 'auto',
}}
>
<iframe
src={list[index].url}
style={{
width: '100%',
maxHeight: '90vh',
flex: '1 1 auto',
}}
/>
</div>
</Modal>
);
},
},
];
function Previewer({ index, onSwitchIndex, list }) {
if (index == null) {
return null;
}
const file = list[index];
const { Component } = PreviewerTypes.find((type) => type.matcher(file)) ?? {};
if (!Component) {
return null;
}
const { Previewer: Component = IframePreviewer } = attachmentFileTypes.getTypeByFile(file) ?? {};
return <Component index={index} list={list} onSwitchIndex={onSwitchIndex} />;
}
@ -298,14 +316,7 @@ export function AttachmentList(props) {
const onPreview = useCallback(
(file) => {
const index = fileList.findIndex((item) => item.id === file.id);
const previewType = PreviewerTypes.find((type) => type.matcher(file));
if (previewType) {
setPreview(index);
} else {
if (file.id) {
saveAs(file.url, `${file.title}${file.extname}`);
}
}
setPreview(index);
},
[fileList],
);

1
packages/core/client/src/schema-component/antd/upload/index.ts
View File

@ -8,3 +8,4 @@
*/
export * from './Upload';
export { attachmentFileTypes } from './shared';

84
packages/core/client/src/schema-component/antd/upload/shared.ts
View File

@ -11,20 +11,52 @@ import { isArr, isValid, toArr as toArray } from '@formily/shared';
import { UploadFile } from 'antd/es/upload/interface';
import { useTranslation } from 'react-i18next';
import match from 'mime-match';
import { useCallback } from 'react';
import React, { useCallback } from 'react';
import { useAPIClient } from '../../../api-client';
import { UNKNOWN_FILE_ICON, UPLOAD_PLACEHOLDER } from './placeholder';
import type { IUploadProps, UploadProps } from './type';
export const FILE_SIZE_LIMIT_DEFAULT = 1024 * 1024 * 20;
export const isImage = (file) => {
return match(file.mimetype || file.type, 'image/*');
};
export interface FileModel {
id: number;
filename: string;
path: string;
title: string;
url: string;
extname: string;
size: number;
mimetype: string;
}
export const isPdf = (file) => {
return match(file.mimetype || file.type, 'application/pdf');
};
export interface PreviewerProps {
index: number;
list: FileModel[];
onSwitchIndex(index): void;
}
export interface AttachmentFileType {
match(file: any): boolean;
getThumbnailURL?(file: any): string;
ThumbnailPreviewer?: React.ComponentType<{ file: FileModel }>;
Previewer?: React.ComponentType<PreviewerProps>;
}
export class AttachmentFileTypes {
types: AttachmentFileType[] = [];
add(type: AttachmentFileType) {
// NOTE: use unshift to make sure the custom type has higher priority
this.types.unshift(type);
}
getTypeByFile(file): Omit<AttachmentFileType, 'match'> {
return this.types.find((type) => type.match(file));
}
}
/**
* @experimental
*/
export const attachmentFileTypes = new AttachmentFileTypes();
const toArr = (value) => {
if (!isValid(value)) {
@ -36,7 +68,7 @@ const toArr = (value) => {
return toArray(value);
};
export const testOpts = (ext: RegExp, options: { exclude?: string[]; include?: string[] }) => {
const testOpts = (ext: RegExp, options: { exclude?: string[]; include?: string[] }) => {
if (options && isArr(options.include)) {
return options.include.some((url) => ext.test(url));
}
@ -48,26 +80,19 @@ export const testOpts = (ext: RegExp, options: { exclude?: string[]; include?: s
return true;
};
export const getImageByUrl = (url: string, options: any = {}) => {
export function getThumbnailPlaceholderURL(file, options: any = {}) {
for (let i = 0; i < UPLOAD_PLACEHOLDER.length; i++) {
// console.log(UPLOAD_PLACEHOLDER[i].ext, testOpts(UPLOAD_PLACEHOLDER[i].ext, options));
if (UPLOAD_PLACEHOLDER[i].ext.test(url)) {
if (UPLOAD_PLACEHOLDER[i].ext.test(file.extname || file.filename || file.url || file.name)) {
if (testOpts(UPLOAD_PLACEHOLDER[i].ext, options)) {
return UPLOAD_PLACEHOLDER[i].icon || UNKNOWN_FILE_ICON;
} else {
return url;
return file.name;
}
}
}
return UNKNOWN_FILE_ICON;
};
export const getURL = (target: any) => {
return target?.['url'] || target?.['downloadURL'] || target?.['imgURL'] || target?.['name'];
};
export const getThumbURL = (target: any) => {
return target?.['thumbUrl'] || target?.['url'] || target?.['downloadURL'] || target?.['imgURL'] || target?.['name'];
};
}
export function getResponseMessage({ error, response }: UploadFile<any>) {
if (error instanceof Error && 'isAxiosError' in error) {
@ -93,24 +118,14 @@ export function getResponseMessage({ error, response }: UploadFile<any>) {
}
export function normalizeFile(file: UploadFile & Record<string, any>) {
const imageUrl = isImage(file) ? URL.createObjectURL(file.originFileObj) : getImageByUrl(file.name);
const response = getResponseMessage(file);
return {
...file,
title: file.name,
thumbUrl: imageUrl,
imageUrl,
response,
};
}
export const normalizeFileList = (fileList: UploadFile[]) => {
if (fileList && fileList.length) {
return fileList.map(normalizeFile);
}
return [];
};
export function useUploadProps<T extends IUploadProps = UploadProps>(props: T) {
const api = useAPIClient();
@ -166,11 +181,6 @@ export const toItem = (file) => {
...file,
id: file.id || file.uid,
title: file.title || file.name,
imageUrl: isImage(file)
? file.url
: getImageByUrl(file.url, {
exclude: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.bmp', '.ico'],
}),
};
};
@ -178,12 +188,6 @@ export const toFileList = (fileList: any) => {
return toArr(fileList).filter(Boolean).map(toItem);
};
export const toValue = (fileList: any) => {
return toArr(fileList)
.filter((file) => !file.response || file.status === 'done')
.map((file) => file?.response?.data || file);
};
const Rules: Record<string, RuleFunction> = {
size(file, options: number): null | string {
const size = options ?? FILE_SIZE_LIMIT_DEFAULT;