import * as React from 'react'; import Animate from 'rc-animate'; import Icon from '../icon'; import Tooltip from '../tooltip'; import Progress from '../progress'; import classNames from 'classnames'; import { UploadListProps, UploadFile, UploadListType } from './interface'; const imageTypes: string[] = ['image', 'webp', 'png', 'svg', 'gif', 'jpg', 'jpeg', 'bmp']; // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL const previewFile = (file: File, callback: Function) => { if (file.type && !imageTypes.includes(file.type)) { callback(''); } const reader = new FileReader(); reader.onloadend = () => callback(reader.result); reader.readAsDataURL(file); }; const extname = (url: string) => { if (!url) { return ''; } const temp = url.split('/'); const filename = temp[temp.length - 1]; const filenameWithoutSuffix = filename.split(/#|\?/)[0]; return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0]; }; const isImageUrl = (file: UploadFile): boolean => { if (imageTypes.includes(file.type)) { return true; } const url: string = (file.thumbUrl || file.url) as string; const extension = extname(url); if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|bmp)$/i.test(extension)) { return true; } else if (/^data:/.test(url)) { // other file types of base64 return false; } else if (extension) { // other file types which have extension return false; } return true; }; export default class UploadList extends React.Component { static defaultProps = { listType: 'text' as UploadListType, // or picture progressAttr: { strokeWidth: 2, showInfo: false, }, prefixCls: 'ant-upload', showRemoveIcon: true, showPreviewIcon: true, }; handleClose = (file: UploadFile) => { const { onRemove } = this.props; if (onRemove) { onRemove(file); } } handlePreview = (file: UploadFile, e: React.SyntheticEvent) => { const { onPreview } = this.props; if (!onPreview) { return; } e.preventDefault(); return onPreview(file); } componentDidUpdate() { if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') { return; } (this.props.items || []).forEach(file => { if (typeof document === 'undefined' || typeof window === 'undefined' || !(window as any).FileReader || !(window as any).File || !(file.originFileObj instanceof File) || file.thumbUrl !== undefined) { return; } /*eslint-disable */ file.thumbUrl = ''; /*eslint-enable */ previewFile(file.originFileObj, (previewDataUrl: string) => { /*eslint-disable */ file.thumbUrl = previewDataUrl; /*eslint-enable */ this.forceUpdate(); }); }); } render() { const { prefixCls, items = [], listType, showPreviewIcon, showRemoveIcon, locale } = this.props; const list = items.map(file => { let progress; let icon = ; if (listType === 'picture' || listType === 'picture-card') { if (listType === 'picture-card' && file.status === 'uploading') { icon =
{locale.uploading}
; } else if (!file.thumbUrl && !file.url) { icon = ; } else { const thumbnail = isImageUrl(file) ? {file.name} : ; icon = ( this.handlePreview(file, e)} href={file.url || file.thumbUrl} target="_blank" rel="noopener noreferrer" > {thumbnail} ); } } if (file.status === 'uploading') { // show loading icon if upload progress listener is disabled const loadingProgress = ('percent' in file) ? ( ) : null; progress = (
{loadingProgress}
); } const infoUploadingClass = classNames({ [`${prefixCls}-list-item`]: true, [`${prefixCls}-list-item-${file.status}`]: true, }); const linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps; const preview = file.url ? ( this.handlePreview(file, e)} > {file.name} ) : ( this.handlePreview(file, e)} title={file.name} > {file.name} ); const style: React.CSSProperties = { pointerEvents: 'none', opacity: 0.5, }; const previewIcon = showPreviewIcon ? ( this.handlePreview(file, e)} title={locale.previewFile} > ) : null; const removeIcon = showRemoveIcon ? ( this.handleClose(file)} /> ) : null; const removeIconClose = showRemoveIcon ? ( this.handleClose(file)} /> ) : null; const actions = (listType === 'picture-card' && file.status !== 'uploading') ? {previewIcon}{removeIcon} : removeIconClose; let message; if (file.response && typeof file.response === 'string') { message = file.response; } else { message = (file.error && file.error.statusText) || locale.uploadError; } const iconAndPreview = (file.status === 'error') ? {icon}{preview} : {icon}{preview}; return (
{iconAndPreview}
{actions} {progress}
); }); const listClassNames = classNames({ [`${prefixCls}-list`]: true, [`${prefixCls}-list-${listType}`]: true, }); const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate'; return ( {list} ); } }