fix: file download

2025-08-18 07:05:52 +08:00 · 2024-10-09 14:22:46 +08:00 · 2024-10-09 14:22:46 +08:00 · dba24766e8
commit dba24766e8
parent 12492c0d5d
9 changed files with 121 additions and 56 deletions
--- a/web/app/components/app/text-generate/item/result-tab.tsx
+++ b/web/app/components/app/text-generate/item/result-tab.tsx
@ -62,6 +62,7 @@ const ResultTab = ({
                files={data?.files}
                showDeleteAction={false}
                showDownloadAction
+                canPreview
              />
            )}
          </>
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@ -175,6 +175,7 @@ const Answer: FC<AnswerProps> = ({
                  files={allFiles}
                  showDeleteAction={false}
                  showDownloadAction
+                  canPreview
                />
              )
            }
--- a/web/app/components/base/chat/chat/check-input-forms-hooks.ts
+++ b/web/app/components/base/chat/chat/check-input-forms-hooks.ts
@ -19,6 +19,9 @@ export const useCheckInputsForms = () => {
        if (hasEmptyInput)
          return

+        if (fileIsUploading)
+          return
+
        if (!inputs[variable])
          hasEmptyInput = label as string

@ -27,7 +30,7 @@ export const useCheckInputsForms = () => {
          if (Array.isArray(files))
            fileIsUploading = files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)
          else
-            fileIsUploading = files.transfer_method === TransferMethod.local_file && !files.uploadedId
+            fileIsUploading = files.transferMethod === TransferMethod.local_file && !files.uploadedId
        }
      })
    }
--- a/web/app/components/base/file-uploader/file-image-render.tsx
+++ b/web/app/components/base/file-uploader/file-image-render.tsx
@ -24,7 +24,6 @@ const FileImageRender = ({
        onLoad={onLoad}
        onError={onError}
        src={imageUrl}
-        onClick={() => showDownloadAction && window.open(imageUrl, '_blank')}
      />
    </div>
  )
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-image-item.tsx
@ -1,15 +1,24 @@
-import { RiCloseLine } from '@remixicon/react'
+import { useState } from 'react'
+import {
+  RiCloseLine,
+  RiDownloadLine,
+} from '@remixicon/react'
 import FileImageRender from '../file-image-render'
 import type { FileEntity } from '../types'
-import { fileIsUploaded } from '../utils'
+import {
+  downloadFile,
+  fileIsUploaded,
+} from '../utils'
 import Button from '@/app/components/base/button'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'

 type FileImageItemProps = {
  file: FileEntity
  showDeleteAction?: boolean
  showDownloadAction?: boolean
+  canPreview?: boolean
  onRemove?: (fileId: string) => void
  onReUpload?: (fileId: string) => void
 }
@ -17,52 +26,83 @@ const FileImageItem = ({
  file,
  showDeleteAction,
  showDownloadAction,
+  canPreview,
  onRemove,
  onReUpload,
 }: FileImageItemProps) => {
-  const { id, progress, base64Url, url } = file
+  const { id, progress, base64Url, url, name } = file
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')

  return (
-    <div className='group relative'>
+    <>
+      <div
+        className='group/file-image relative cursor-pointer'
+        onClick={() => canPreview && setImagePreviewUrl(url || '')}
+      >
+        {
+          showDeleteAction && (
+            <Button
+              className='hidden group-hover/file-image:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'
+              onClick={() => onRemove?.(id)}
+            >
+              <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
+            </Button>
+          )
+        }
+        <FileImageRender
+          className='w-[68px] h-[68px] shadow-md'
+          imageUrl={base64Url || url || ''}
+          showDownloadAction={showDownloadAction}
+        />
+        {
+          progress >= 0 && !fileIsUploaded(file) && (
+            <div className='absolute inset-0 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt z-10'>
+              <ProgressCircle
+                percentage={progress}
+                size={12}
+                circleStrokeColor='stroke-components-progress-white-border'
+                circleFillColor='fill-transparent'
+                sectorFillColor='fill-components-progress-white-progress'
+              />
+            </div>
+          )
+        }
+        {
+          progress === -1 && (
+            <div className='absolute inset-0 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive z-10'>
+              <ReplayLine
+                className='w-5 h-5'
+                onClick={() => onReUpload?.(id)}
+              />
+            </div>
+          )
+        }
+        {
+          showDownloadAction && (
+            <div className='hidden group-hover/file-image:block absolute inset-0.5 bg-background-overlay-alt bg-opacity-[0.3] z-10'>
+              <div
+                className='absolute bottom-0.5 right-0.5  flex items-center justify-center w-6 h-6 rounded-lg bg-components-actionbar-bg shadow-md'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  downloadFile(url || '', name)
+                }}
+              >
+                <RiDownloadLine className='w-4 h-4 text-text-tertiary' />
+              </div>
+            </div>
+          )
+        }
+      </div>
      {
-        showDeleteAction && (
-          <Button
-            className='hidden group-hover:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'
-            onClick={() => onRemove?.(id)}
-          >
-            <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
-          </Button>
+        imagePreviewUrl && canPreview && (
+          <ImagePreview
+            title={name}
+            url={imagePreviewUrl}
+            onCancel={() => setImagePreviewUrl('')}
+          />
        )
      }
-      <FileImageRender
-        className='w-[68px] h-[68px] shadow-md'
-        imageUrl={base64Url || url || ''}
-        showDownloadAction={showDownloadAction}
-      />
-      {
-        progress >= 0 && !fileIsUploaded(file) && (
-          <div className='absolute inset-0 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt z-10'>
-            <ProgressCircle
-              percentage={progress}
-              size={12}
-              circleStrokeColor='stroke-components-progress-white-border'
-              circleFillColor='fill-transparent'
-              sectorFillColor='fill-components-progress-white-progress'
-            />
-          </div>
-        )
-      }
-      {
-        progress === -1 && (
-          <div className='absolute inset-0 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive z-10'>
-            <ReplayLine
-              className='w-5 h-5'
-              onClick={() => onReUpload?.(id)}
-            />
-          </div>
-        )
-      }
-    </div>
+    </>
  )
 }

--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@ -3,6 +3,7 @@ import {
  RiDownloadLine,
 } from '@remixicon/react'
 import {
+  downloadFile,
  fileIsUploaded,
  getFileAppearanceType,
  getFileExtension,
@ -30,14 +31,14 @@ const FileItem = ({
  onRemove,
  onReUpload,
 }: FileItemProps) => {
-  const { id, name, type, progress } = file
+  const { id, name, type, progress, url } = file
  const ext = getFileExtension(name, type)
  const uploadError = progress === -1

  return (
    <div
      className={cn(
-        'group relative p-2 w-[144px] h-[68px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg shadow-xs',
+        'group/file-item relative p-2 w-[144px] h-[68px] rounded-lg border-[0.5px] border-components-panel-border bg-components-card-bg shadow-xs',
        !uploadError && 'hover:bg-components-card-bg-alt',
        uploadError && 'border border-state-destructive-border bg-state-destructive-hover',
        uploadError && 'hover:border-[0.5px] hover:border-state-destructive-border bg-state-destructive-hover-alt',
@ -46,7 +47,7 @@ const FileItem = ({
      {
        showDeleteAction && (
          <Button
-            className='hidden group-hover:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'
+            className='hidden group-hover/file-item:flex absolute -right-1.5 -top-1.5 p-0 w-5 h-5 rounded-full z-10'
            onClick={() => onRemove?.(id)}
          >
            <RiCloseLine className='w-4 h-4 text-components-button-secondary-text' />
@ -56,7 +57,7 @@ const FileItem = ({
      <div className='mb-1 h-8 line-clamp-2 system-xs-medium text-text-tertiary'>
        {name}
      </div>
-      <div className='flex items-center justify-between'>
+      <div className='relative flex items-center justify-between'>
        <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
          <FileTypeIcon
            size='sm'
@ -75,13 +76,16 @@ const FileItem = ({
        </div>
        {
          showDownloadAction && (
-            <a href={file.url} download={true} target='_blank'>
-              <ActionButton
-                size='xs'
-              >
-                <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
-              </ActionButton>
-            </a>
+            <ActionButton
+              size='m'
+              className='hidden group-hover/file-item:flex absolute -right-1 -top-1'
+              onClick={(e) => {
+                e.stopPropagation()
+                downloadFile(url || '', name)
+              }}
+            >
+              <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
+            </ActionButton>
          )
        }
        {
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
@ -14,6 +14,7 @@ type FileListProps = {
  onReUpload?: (fileId: string) => void
  showDeleteAction?: boolean
  showDownloadAction?: boolean
+  canPreview?: boolean
 }
 export const FileList = ({
  className,
@ -22,6 +23,7 @@ export const FileList = ({
  onRemove,
  showDeleteAction = true,
  showDownloadAction = false,
+  canPreview,
 }: FileListProps) => {
  return (
    <div className={cn('flex flex-wrap gap-2', className)}>
@ -36,6 +38,7 @@ export const FileList = ({
                showDownloadAction={showDownloadAction}
                onRemove={onRemove}
                onReUpload={onReUpload}
+                canPreview={canPreview}
              />
            )
          }
--- a/web/app/components/base/file-uploader/utils.ts
+++ b/web/app/components/base/file-uploader/utils.ts
@ -161,8 +161,21 @@ export const getFilesInLogs = (rawData: any) => {
 }

 export const fileIsUploaded = (file: FileEntity) => {
-  const localFileUploaded = file.transferMethod === TransferMethod.local_file && file.uploadedId
-  const fromUrlFileUploaded = file.transferMethod === TransferMethod.remote_url && file.progress === 100
+  if (file.uploadedId)
+    return true

-  return localFileUploaded || fromUrlFileUploaded
+  if (file.transferMethod === TransferMethod.remote_url && file.progress === 100)
+    return true
+}
+
+export const downloadFile = (url: string, filename: string) => {
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  anchor.style.display = 'none'
+  anchor.target = '_blank'
+  anchor.title = filename
+  document.body.appendChild(anchor)
+  anchor.click()
+  document.body.removeChild(anchor)
 }
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@ -57,6 +57,7 @@ const ResultText: FC<ResultTextProps> = ({
              files={allFiles}
              showDeleteAction={false}
              showDownloadAction
+              canPreview
            />
          )}
        </div>