Skip to content

D
dify
Commit 3f9af702 authored by JzoNg's avatar JzoNg
Browse files
Options

feat: update style of uploader

parent 68eb3126
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 154 deletions
web/app/components/datasets/create/file-preview/index.tsx
View file @ 3f9af702
......@@ -9,7 +9,6 @@ import { fetchFilePreview } from '@/service/common'
type IProps = {
file?: File
notionPage?: any
hidePreview: () => void
}
......@@ -39,8 +38,10 @@ const FilePreview = ({
}
useEffect(() => {
if (file)
if (file) {
setLoading(true)
getPreviewContent(file.id)
}
}, [file])
return (
......
web/app/components/datasets/create/file-uploader/index.module.css
View file @ 3f9af702
.fileUploader {
@apply mb-9;
@apply mb-6;
}
.fileUploader .title {
@apply mb-2;
......@@ -9,14 +9,14 @@
color: #344054;
}
.fileUploader .tip {
@apply mt-2;
font-weight: 400;
font-size: 12px;
line-height: 26px;
line-height: 18px;
color: #667085;
}
.uploader {
@apply relative box-border flex justify-center items-center;
@apply relative box-border flex justify-center items-center mb-2;
flex-direction: column;
max-width: 640px;
height: 80px;
background: #F9FAFB;
......@@ -25,7 +25,7 @@
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #667085;
color: #344054;
}
.uploader.dragging {
background: #F5F8FF;
......@@ -38,8 +38,7 @@
width: 100%;
height: 100%;
}
.uploader::before {
content: '';
.uploader .uploadIcon {
display: block;
margin-right: 8px;
width: 24px;
......@@ -53,14 +52,16 @@
}
.file {
@apply box-border relative flex items-center;
padding: 21px 24px 21px 64px;
@apply box-border relative flex items-center justify-between;
padding: 8px 12px 8px 8px;
max-width: 640px;
height: 80px;
background: #F9FAFB;
border: 1px solid #F2F4F7;
border-radius: 12px;
height: 40px;
background: #ffffff;
border: 0.5px solid #EAECF0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
.progressbar {
position: absolute;
......@@ -69,36 +70,25 @@
height: 100%;
background-color: #F2F4F7;
}
.file:hover {
background: #F5F8FF;
border: 1px solid #D1E0FF;
}
.file:hover .actionWrapper .buttonWrapper {
display: flex;
align-items: center;
}
.file:hover .actionWrapper .divider {
display: block;
}
.file.uploading,
.file.uploading:hover {
background: #FCFCFD;
border: 1px solid #EAECF0;
border: 0.5px solid #EAECF0;
}
.file.uploading:hover .actionWrapper .percent {
padding: 8px;
.file.active {
background: #F5F8FF;
border: 1px solid #D1E0FF;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}
.file.uploading:hover .actionWrapper .buttonWrapper {
display: flex;
align-items: center;
.file:hover {
background: #F5F8FF;
border: 1px solid #D1E0FF;
box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}
.fileIcon {
@apply w-8 h-8 bg-center bg-no-repeat;
position: absolute;
top: 24px;
left: 24px;
@apply shrink-0 w-6 h-6 mr-2 bg-center bg-no-repeat;
background-image: url(../assets/unknow.svg);
background-size: 32px;
background-size: 24px;
}
.fileIcon.csv {
background-image: url(../assets/csv.svg);
......@@ -126,7 +116,7 @@
background-image: url(../assets/json.svg);
}
.fileInfo {
@apply grow;
@apply grow flex items-center;
z-index: 1;
overflow: hidden;
text-overflow: ellipsis;
......@@ -134,46 +124,35 @@
}
.filename {
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
.name {
font-size: 13px;
line-height: 18px;
color: #1D2939;
line-height: 20px;
}
.extension {
color: #667085;
line-height: 20px;
}
.fileExtraInfo {
color: #667085;
.size {
@apply ml-3;
font-weight: 400;
font-size: 12px;
line-height: 18px;
color: #667085;
}
.actionWrapper {
@apply flex items-center shrink-0;
z-index: 1;
}
.actionWrapper .percent {
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-size: 13px;
line-height: 18px;
color: #344054;
}
.actionWrapper .divider {
display: none;
margin: 0 8px;
width: 1px;
height: 16px;
background: #FEE4E2;
}
.actionWrapper .remove {
width: 32px;
height: 32px;
display: none;
width: 24px;
height: 24px;
background: center no-repeat url(../assets/trash.svg);
background-size: 16px;
cursor: pointer;
}
.actionWrapper .buttonWrapper {
@apply flex items-center;
display: none;
.file:hover .actionWrapper .remove {
display: block;
}
web/app/components/datasets/create/file-uploader/index.tsx
View file @ 3f9af702
......@@ -6,13 +6,13 @@ import cn from 'classnames'
import s from './index.module.css'
import type { File as FileEntity } from '@/models/datasets'
import { ToastContext } from '@/app/components/base/toast'
import Button from '@/app/components/base/button'
import { upload } from '@/service/base'
type IFileUploaderProps = {
file?: FileEntity
files: FileEntity[]
onFileUpdate: (file?: FileEntity) => void
onPreview: (file: FileEntity) => void
}
const ACCEPTS = [
......@@ -27,9 +27,9 @@ const ACCEPTS = [
'.csv',
]
const MAX_SIZE = 15 * 1024 * 1024
const MAX_SIZE = 10 * 1024 * 1024
const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
const FileUploader = ({ files, onFileUpdate, onPreview }: IFileUploaderProps) => {
const { t } = useTranslation()
const { notify } = useContext(ToastContext)
const [dragging, setDragging] = useState(false)
......@@ -49,10 +49,6 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
const arr = currentFile.name.split('.')
return arr[arr.length - 1]
}
const getFileName = (name: string) => {
const arr = name.split('.')
return arr.slice(0, -1).join()
}
const getFileSize = (size: number) => {
if (size / 1024 < 10)
return `${(size / 1024).toFixed(2)}KB`
......@@ -83,6 +79,7 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
const currentXHR = uploadPromise.current
currentXHR.abort()
}
// TODO
const fileUpload = async (file?: File) => {
if (!file)
return
......@@ -133,6 +130,7 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
e.stopPropagation()
e.target === dragRef.current && setDragging(false)
}
// TODO
const handleDrop = (e: DragEvent) => {
e.preventDefault()
e.stopPropagation()
......@@ -153,6 +151,7 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
if (fileUploader.current)
fileUploader.current.click()
}
// TODO
const removeFile = () => {
if (fileUploader.current)
fileUploader.current.value = ''
......@@ -160,6 +159,7 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
setCurrentFile(undefined)
onFileUpdate()
}
// TODO
const fileChangeHandle = (e: React.ChangeEvent<HTMLInputElement>) => {
const currentFile = e.target.files?.[0]
onFileUpdate()
......@@ -183,83 +183,80 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
<div className={s.fileUploader}>
<input
ref={fileUploader}
id="fileUploader"
style={{ display: 'none' }}
type="file"
id="fileUploader"
multiple
accept={ACCEPTS.join(',')}
onChange={fileChangeHandle}
/>
<div className={s.title}>{t('datasetCreation.stepOne.uploader.title')}</div>
<div ref={dropRef}>
{!currentFile && !file && (
<div className={cn(s.uploader, dragging && s.dragging)}>
<span>{t('datasetCreation.stepOne.uploader.button')}</span>
<label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
{dragging && <div ref={dragRef} className={s.draggingCover}/>}
<div ref={dropRef} className={cn(s.uploader, dragging && s.dragging)}>
<div className='flex justify-center items-center h-6 mb-2'>
<span className={s.uploadIcon}/>
<span>{t('datasetCreation.stepOne.uploader.button')}</span>
<label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
</div>
<div className={s.tip}>{t('datasetCreation.stepOne.uploader.tip')}</div>
{dragging && <div ref={dragRef} className={s.draggingCover}/>}
</div>
<div className={s.fileList}>
{currentFile && (
<div
// onClick={() => onPreview(currentFile)}
className={cn(
s.file,
uploading && s.uploading,
// s.active,
)}
>
{uploading && (
<div className={s.progressbar} style={{ width: `${percent}%` }}/>
)}
<div className={s.fileInfo}>
<div className={cn(s.fileIcon, s[getFileType(currentFile)])}/>
<div className={s.filename}>{currentFile.name}</div>
<div className={s.size}>{getFileSize(currentFile.size)}</div>
</div>
<div className={s.actionWrapper}>
{uploading && (
<div className={s.percent}>{`${percent}%`}</div>
)}
{!uploading && (
<div className={s.remove} onClick={removeFile}/>
)}
</div>
</div>
)}
</div>
{currentFile && (
<div className={cn(s.file, uploading && s.uploading)}>
{/* TODO */}
{!currentFile && files[0] && (
<div
// onClick={() => onPreview(currentFile)}
className={cn(
s.file,
uploading && s.uploading,
s.active,
)}
>
{uploading && (
<div className={s.progressbar} style={{ width: `${percent}%` }}/>
)}
<div className={cn(s.fileIcon, s[getFileType(currentFile)])}/>
<div className={s.fileInfo}>
<div className={s.filename}>
<span className={s.name}>{getFileName(currentFile.name)}</span>
<span className={s.extension}>{`.${getFileType(currentFile)}`}</span>
</div>
<div className={s.fileExtraInfo}>
<span className={s.size}>{getFileSize(currentFile.size)}</span>
<span className={s.error}></span>
</div>
<div className={cn(s.fileIcon, s[getFileType(files[0])])}/>
<div className={s.filename}>{files[0].name}</div>
<div className={s.size}>{getFileSize(files[0].size)}</div>
</div>
<div className={s.actionWrapper}>
{uploading && (
<>
<div className={s.percent}>{`${percent}%`}</div>
<div className={s.divider}/>
<div className={s.buttonWrapper}>
<Button className={cn(s.button, 'ml-2 !h-8 bg-white')} onClick={abort}>{t('datasetCreation.stepOne.uploader.cancel')}</Button>
</div>
</>
<div className={s.percent}>{`${percent}%`}</div>
)}
{!uploading && (
<>
<div className={s.buttonWrapper}>
<Button className={cn(s.button, 'ml-2 !h-8 bg-white')} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className={s.divider}/>
<div className={s.remove} onClick={removeFile}/>
</div>
</>
)}
</div>
</div>
)}
{!currentFile && file && (
<div className={cn(s.file)}>
<div className={cn(s.fileIcon, s[file.extension])}/>
<div className={s.fileInfo}>
<div className={s.filename}>
<span className={s.name}>{getFileName(file.name)}</span>
<span className={s.extension}>{`.${file.extension}`}</span>
</div>
<div className={s.fileExtraInfo}>
<span className={s.size}>{getFileSize(file.size)}</span>
<span className={s.error}></span>
</div>
</div>
<div className={s.actionWrapper}>
<div className={s.buttonWrapper}>
<Button className={cn(s.button, 'ml-2 !h-8 bg-white')} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
<div className={s.divider}/>
<div className={s.remove} onClick={removeFile}/>
</div>
)}
</div>
</div>
)}
<div className={s.tip}>{t('datasetCreation.stepOne.uploader.tip')}</div>
</div>
)
}
......
web/app/components/datasets/create/index.tsx
View file @ 3f9af702
......@@ -30,7 +30,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
const [dataSourceType, setDataSourceType] = useState<DataSourceType>(DataSourceType.FILE)
const [step, setStep] = useState(1)
const [indexingTypeCache, setIndexTypeCache] = useState('')
const [file, setFile] = useState<File | undefined>()
const [fileList, setFiles] = useState<File[]>([])
const [result, setResult] = useState<createDocumentResponse | undefined>()
const [hasError, setHasError] = useState(false)
......@@ -39,8 +39,14 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
setNotionPages(value)
}
// TODO
const updateFile = (file?: File) => {
setFile(file)
if (file) {
setFiles([
...fileList,
file,
])
}
}
const updateIndexingTypeCache = (type: string) => {
setIndexTypeCache(type)
......@@ -104,7 +110,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
dataSourceType={dataSourceType}
dataSourceTypeDisable={!!detail?.data_source_type}
changeType={setDataSourceType}
file={file}
files={fileList}
updateFile={updateFile}
notionPages={notionPages}
updateNotionPages={updateNotionPages}
......@@ -116,7 +122,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
indexingType={detail?.indexing_technique || ''}
datasetId={datasetId}
dataSourceType={dataSourceType}
file={file}
files={fileList}
notionPages={notionPages}
onStepChange={changeStep}
updateIndexingTypeCache={updateIndexingTypeCache}
......
web/app/components/datasets/create/step-one/index.tsx
View file @ 3f9af702
......@@ -19,7 +19,7 @@ type IStepOneProps = {
dataSourceTypeDisable: Boolean
hasConnection: boolean
onSetting: () => void
file?: File
files: File[]
updateFile: (file?: File) => void
notionPages?: any[]
updateNotionPages: (value: any[]) => void
......@@ -53,26 +53,29 @@ const StepOne = ({
hasConnection,
onSetting,
onStepChange,
file,
files,
updateFile,
notionPages = [],
updateNotionPages,
}: IStepOneProps) => {
const [showModal, setShowModal] = useState(false)
const [showFilePreview, setShowFilePreview] = useState(true)
const [currentFile, setCurrentFile] = useState<File | undefined>()
const [currentNotionPage, setCurrentNotionPage] = useState<Page | undefined>()
const { t } = useTranslation()
const hidePreview = () => setShowFilePreview(false)
const modalShowHandle = () => setShowModal(true)
const modalCloseHandle = () => setShowModal(false)
const updateCurrentFile = (file: File) => {
setCurrentFile(file)
}
const hideFilePreview = () => {
setCurrentNotionPage(undefined)
}
const updateCurrentPage = (page: Page) => {
setCurrentNotionPage(page)
}
const hideNotionPagePreview = () => {
setCurrentNotionPage(undefined)
}
......@@ -93,7 +96,8 @@ const StepOne = ({
if (dataSourceTypeDisable)
return
changeType(DataSourceType.FILE)
hidePreview()
hideFilePreview()
hideNotionPagePreview()
}}
>
<span className={cn(s.datasetIcon)} />
......@@ -109,7 +113,8 @@ const StepOne = ({
if (dataSourceTypeDisable)
return
changeType(DataSourceType.NOTION)
hidePreview()
hideFilePreview()
hideNotionPagePreview()
}}
>
<span className={cn(s.datasetIcon, s.notion)} />
......@@ -126,8 +131,9 @@ const StepOne = ({
</div>
{dataSourceType === DataSourceType.FILE && (
<>
<FileUploader onFileUpdate={updateFile} file={file} />
<Button disabled={!file} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
<FileUploader onFileUpdate={updateFile} onPreview={updateCurrentFile} files={files} />
{/* TODO */}
<Button disabled={!files.length} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
</>
)}
{dataSourceType === DataSourceType.NOTION && (
......@@ -152,7 +158,7 @@ const StepOne = ({
</div>
<EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
</div>
{file && showFilePreview && <FilePreview file={file} hidePreview={hidePreview} />}
{currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
{currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
</div>
)
......
web/app/components/datasets/create/step-two/index.tsx
View file @ 3f9af702
......@@ -35,7 +35,7 @@ type StepTwoProps = {
datasetId?: string
indexingType?: string
dataSourceType: DataSourceType
file?: File
files: File[]
notionPages?: Page[]
onStepChange?: (delta: number) => void
updateIndexingTypeCache?: (type: string) => void
......@@ -61,7 +61,7 @@ const StepTwo = ({
datasetId,
indexingType,
dataSourceType,
file,
files,
notionPages = [],
onStepChange,
updateIndexingTypeCache,
......@@ -210,8 +210,7 @@ const StepTwo = ({
info_list: {
data_source_type: dataSourceType,
file_info_list: {
// TODO multi files
file_ids: [file?.id || ''],
file_ids: files.map(file => file.id),
},
},
indexing_technique: getIndexing_technique(),
......@@ -252,8 +251,7 @@ const StepTwo = ({
} as CreateDocumentReq
if (dataSourceType === DataSourceType.FILE) {
params.data_source.info_list.file_info_list = {
// TODO multi files
file_ids: [file?.id || ''],
file_ids: files.map(file => file.id),
}
}
if (dataSourceType === DataSourceType.NOTION)
......@@ -525,15 +523,21 @@ const StepTwo = ({
<Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
</div>
)}
{/* TODO multi files */}
<div className={s.source}>
<div className={s.sourceContent}>
{dataSourceType === DataSourceType.FILE && (
<>
<div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.fileSource')}</div>
<div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
<span className={cn(s.fileIcon, file && s[file.extension])} />
{getFileName(file?.name || '')}
<span className={cn(s.fileIcon, files.length && s[files[0].extension])} />
{getFileName(files[0].name || '')}
{files.length > 1 && (
<span className={s.sourceCount}>
<span>{t('datasetCreation.stepTwo.other')}</span>
<span>{files.length - 1}</span>
<span>{t('datasetCreation.stepTwo.fileUnit')}</span>
</span>
)}
</div>
</>
)}
......
web/app/components/datasets/documents/detail/settings/index.tsx
View file @ 3f9af702
......@@ -85,7 +85,7 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
indexingType={indexingTechnique || ''}
isSetting
documentDetail={documentDetail}
file={documentDetail.data_source_info.upload_file}
files={[documentDetail.data_source_info.upload_file]}
onSave={saveHandler}
onCancel={cancelHandler}
/>
......
web/i18n/lang/dataset-creation.en.ts
View file @ 3f9af702
......@@ -23,7 +23,7 @@ const translation = {
title: 'Upload text file',
button: 'Drag and drop file, or',
browse: 'Browse',
tip: 'Supports txt, html, markdown, xlsx, and pdf.',
tip: 'Supports txt, html, markdown, xlsx, and pdf. Max 10MB each.',
validation: {
typeError: 'File type not supported',
size: 'File too large. Maximum is 15MB',
......
web/i18n/lang/dataset-creation.zh.ts
View file @ 3f9af702
......@@ -23,7 +23,7 @@ const translation = {
title: '上传文本文件',
button: '拖拽文件至此，或者',
browse: '选择文件',
tip: '已支持 TXT, HTML, Markdown, PDF, XLSX',
tip: '已支持 TXT、 HTML、 Markdown、 PDF、 XLSX，每个文件不超过 10 MB。',
validation: {
typeError: '文件类型不支持',
size: '文件太大了，不能超过 15MB',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment