78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { MindMap } from '@nice/ui';
|
|
import React, { useState, useCallback } from 'react';
|
|
import * as tus from 'tus-js-client';
|
|
interface TusUploadProps {
|
|
onSuccess?: (response: any) => void;
|
|
onError?: (error: Error) => void;
|
|
}
|
|
const TusUploader: React.FC<TusUploadProps> = ({
|
|
onSuccess,
|
|
onError
|
|
}) => {
|
|
const [progress, setProgress] = useState<number>(0);
|
|
const [isUploading, setIsUploading] = useState<boolean>(false);
|
|
const [uploadError, setUploadError] = useState<string | null>(null);
|
|
const handleFileUpload = useCallback((file: File) => {
|
|
if (!file) return;
|
|
setIsUploading(true);
|
|
setProgress(0);
|
|
setUploadError(null);
|
|
// Extract file extension
|
|
const extension = file.name.split('.').pop() || '';
|
|
const upload = new tus.Upload(file, {
|
|
endpoint: "http://localhost:3000/upload",
|
|
retryDelays: [0, 1000, 3000, 5000],
|
|
metadata: {
|
|
filename: file.name,
|
|
size: file.size.toString(),
|
|
mimeType: file.type,
|
|
extension: extension,
|
|
modifiedAt: new Date(file.lastModified).toISOString(),
|
|
},
|
|
onProgress: (bytesUploaded, bytesTotal) => {
|
|
const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
|
|
setProgress(Number(percentage));
|
|
},
|
|
onSuccess: () => {
|
|
setIsUploading(false);
|
|
setProgress(100);
|
|
onSuccess && onSuccess(upload);
|
|
},
|
|
onError: (error) => {
|
|
setIsUploading(false);
|
|
setUploadError(error.message);
|
|
onError && onError(error);
|
|
}
|
|
});
|
|
|
|
upload.start();
|
|
}, [onSuccess, onError]);
|
|
|
|
return (
|
|
<div>
|
|
<div className=' h-screen'>
|
|
<MindMap></MindMap>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
onChange={(e) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) handleFileUpload(file);
|
|
}}
|
|
/>
|
|
{isUploading && (
|
|
<div>
|
|
<progress value={progress} max="100" />
|
|
<span>{progress}%</span>
|
|
</div>
|
|
)}
|
|
{uploadError && (
|
|
<div style={{ color: 'red' }}>
|
|
上传错误: {uploadError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TusUploader; |