Add smart large file handling for unknown file types
Enhanced FileViewer to handle unknown file types intelligently: ⚠️ **Large File Warning System**: - Files > 1MB show warning dialog before opening as text - Files > 10MB are blocked for security (cannot open as text) - User can choose: "Open as Text", "Download Instead", or "Cancel" - Prevents browser crashes from massive files 📝 **Universal Text Fallback**: - Unknown file types now default to text viewer for files ≤ 1MB - Users can force-open larger files as text after warning - Smart detection prevents opening binary files accidentally 🛡️ **Safety Features**: - Hard 10MB limit prevents system crashes - Clear file size display in warnings - Performance impact warnings for 1MB+ files - Graceful fallback to download option 🎯 **User Experience**: - Unknown files automatically try text mode first - Clear messaging about potential issues - Multiple resolution options (text/download/cancel) - Maintains safety while maximizing accessibility This allows users to examine any file type as text when safe, while protecting against performance issues and crashes.
This commit is contained in:
@@ -78,14 +78,37 @@ export function FileViewer({
|
||||
}: FileViewerProps) {
|
||||
const [editedContent, setEditedContent] = useState(content);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
const [showLargeFileWarning, setShowLargeFileWarning] = useState(false);
|
||||
const [forceShowAsText, setForceShowAsText] = useState(false);
|
||||
|
||||
const fileTypeInfo = getFileType(file.name);
|
||||
|
||||
// 文件大小限制 (1MB for warning, 10MB for hard limit)
|
||||
const WARNING_SIZE = 1024 * 1024; // 1MB
|
||||
const MAX_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
|
||||
// 检查是否应该显示为文本
|
||||
const shouldShowAsText =
|
||||
fileTypeInfo.type === 'text' ||
|
||||
fileTypeInfo.type === 'code' ||
|
||||
(fileTypeInfo.type === 'unknown' && (forceShowAsText || !file.size || file.size <= WARNING_SIZE));
|
||||
|
||||
// 检查文件是否过大
|
||||
const isLargeFile = file.size && file.size > WARNING_SIZE;
|
||||
const isTooLarge = file.size && file.size > MAX_SIZE;
|
||||
|
||||
// 同步外部内容更改
|
||||
useEffect(() => {
|
||||
setEditedContent(content);
|
||||
setHasChanges(false);
|
||||
}, [content]);
|
||||
|
||||
// 如果是未知文件类型且文件较大,显示警告
|
||||
if (fileTypeInfo.type === 'unknown' && isLargeFile && !forceShowAsText) {
|
||||
setShowLargeFileWarning(true);
|
||||
} else {
|
||||
setShowLargeFileWarning(false);
|
||||
}
|
||||
}, [content, fileTypeInfo.type, isLargeFile, forceShowAsText]);
|
||||
|
||||
// 处理内容更改
|
||||
const handleContentChange = (newContent: string) => {
|
||||
@@ -100,6 +123,17 @@ export function FileViewer({
|
||||
setHasChanges(false);
|
||||
};
|
||||
|
||||
// 处理用户确认打开大文件
|
||||
const handleConfirmOpenAsText = () => {
|
||||
setForceShowAsText(true);
|
||||
setShowLargeFileWarning(false);
|
||||
};
|
||||
|
||||
// 处理用户拒绝打开大文件
|
||||
const handleCancelOpenAsText = () => {
|
||||
setShowLargeFileWarning(false);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
@@ -161,7 +195,66 @@ export function FileViewer({
|
||||
|
||||
{/* 文件内容 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{fileTypeInfo.type === 'image' && (
|
||||
{/* 大文件警告对话框 */}
|
||||
{showLargeFileWarning && (
|
||||
<div className="h-full flex items-center justify-center bg-gray-50">
|
||||
<div className="bg-white border border-orange-200 rounded-lg p-6 max-w-md mx-4 shadow-lg">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<AlertCircle className="w-6 h-6 text-orange-500 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 mb-2">Large File Warning</h3>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
This file is {formatFileSize(file.size)} in size, which may cause performance issues when opened as text.
|
||||
</p>
|
||||
{isTooLarge ? (
|
||||
<div className="bg-red-50 border border-red-200 rounded p-3 mb-4">
|
||||
<p className="text-sm text-red-700 font-medium">
|
||||
File is too large (> 10MB) and cannot be opened as text for security reasons.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Do you want to continue opening this file as text? This may slow down your browser.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
{!isTooLarge && (
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
onClick={handleConfirmOpenAsText}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
Open as Text
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onDownload}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
Download Instead
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleCancelOpenAsText}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 图片预览 */}
|
||||
{fileTypeInfo.type === 'image' && !showLargeFileWarning && (
|
||||
<div className="p-6 flex items-center justify-center h-full">
|
||||
<img
|
||||
src={`data:image/*;base64,${content}`}
|
||||
@@ -175,7 +268,8 @@ export function FileViewer({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fileTypeInfo.type === 'text' || fileTypeInfo.type === 'code') && (
|
||||
{/* 文本和代码文件预览 */}
|
||||
{shouldShowAsText && !showLargeFileWarning && (
|
||||
<div className="h-full">
|
||||
{isEditable ? (
|
||||
<textarea
|
||||
@@ -200,7 +294,8 @@ export function FileViewer({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fileTypeInfo.type === 'video' && (
|
||||
{/* 视频文件预览 */}
|
||||
{fileTypeInfo.type === 'video' && !showLargeFileWarning && (
|
||||
<div className="p-6 flex items-center justify-center h-full">
|
||||
<video
|
||||
controls
|
||||
@@ -212,7 +307,8 @@ export function FileViewer({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fileTypeInfo.type === 'audio' && (
|
||||
{/* 音频文件预览 */}
|
||||
{fileTypeInfo.type === 'audio' && !showLargeFileWarning && (
|
||||
<div className="p-6 flex items-center justify-center h-full">
|
||||
<div className="text-center">
|
||||
<div className={cn("w-24 h-24 mx-auto mb-4 rounded-full bg-pink-100 flex items-center justify-center", fileTypeInfo.color)}>
|
||||
@@ -229,7 +325,8 @@ export function FileViewer({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{fileTypeInfo.type === 'unknown' && (
|
||||
{/* 未知文件类型 - 只在不能显示为文本且没有警告时显示 */}
|
||||
{fileTypeInfo.type === 'unknown' && !shouldShowAsText && !showLargeFileWarning && (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center text-gray-500">
|
||||
<AlertCircle className="w-16 h-16 mx-auto mb-4 text-gray-300" />
|
||||
|
||||
Reference in New Issue
Block a user