Import source: cshare-app/src/pages/UploadPage
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,453 @@
|
|||||||
|
import { useState, useCallback, useRef } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { UploadIcon, CopyIcon, CheckIcon, XIcon, TrashIcon } from '../components/Icons';
|
||||||
|
import { formatFileSize, getFileIcon, getFileIconColor } from '../data/mockData';
|
||||||
|
import { useToast } from '../components/ToastContext';
|
||||||
|
import { uploadFile } from '../lib/api';
|
||||||
|
|
||||||
|
export default function UploadPage() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [files, setFiles] = useState([]);
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
const [sharedLinks, setSharedLinks] = useState({});
|
||||||
|
const [copiedId, setCopiedId] = useState(null);
|
||||||
|
const dropRef = useRef(null);
|
||||||
|
const addToast = useToast();
|
||||||
|
|
||||||
|
const addFiles = useCallback((fileList) => {
|
||||||
|
const newFiles = fileList.map((f) => ({
|
||||||
|
id: 'f' + Date.now() + Math.random().toString(36).slice(2, 6),
|
||||||
|
rawFile: f,
|
||||||
|
name: f.name,
|
||||||
|
size: f.size,
|
||||||
|
type: f.type || 'application/octet-stream',
|
||||||
|
progress: 0,
|
||||||
|
status: 'uploading',
|
||||||
|
}));
|
||||||
|
setFiles((prev) => [...prev, ...newFiles]);
|
||||||
|
|
||||||
|
newFiles.forEach((file) => {
|
||||||
|
uploadFile(file.rawFile, {
|
||||||
|
onProgress: (progress) => {
|
||||||
|
setFiles((prev) =>
|
||||||
|
prev.map((f) =>
|
||||||
|
f.id === file.id ? { ...f, progress: Math.min(progress, 99) } : f
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((payload) => {
|
||||||
|
setFiles((prev) =>
|
||||||
|
prev.map((f) =>
|
||||||
|
f.id === file.id ? { ...f, progress: 100, status: 'done', apiFile: payload.data } : f
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setSharedLinks((prev) => ({ ...prev, [file.id]: payload.data.link }));
|
||||||
|
addToast(`${file.name} uploaded`, 'success');
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
setFiles((prev) =>
|
||||||
|
prev.map((f) =>
|
||||||
|
f.id === file.id ? { ...f, progress: 0, status: 'error', error: error.message } : f
|
||||||
|
)
|
||||||
|
);
|
||||||
|
addToast(error.message, 'error');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, [addToast]);
|
||||||
|
|
||||||
|
const handleDrop = useCallback((e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(false);
|
||||||
|
const droppedFiles = Array.from(e.dataTransfer.files);
|
||||||
|
addFiles(droppedFiles);
|
||||||
|
}, [addFiles]);
|
||||||
|
|
||||||
|
const generateShareLink = (fileId) => {
|
||||||
|
const file = files.find((item) => item.id === fileId);
|
||||||
|
if (file?.apiFile?.link) {
|
||||||
|
setSharedLinks((prev) => ({ ...prev, [fileId]: file.apiFile.link }));
|
||||||
|
addToast('Link ready', 'success');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyLink = (fileId) => {
|
||||||
|
const link = sharedLinks[fileId];
|
||||||
|
if (!link) return;
|
||||||
|
navigator.clipboard?.writeText(link);
|
||||||
|
setCopiedId(fileId);
|
||||||
|
addToast('Link copied to clipboard', 'success');
|
||||||
|
setTimeout(() => setCopiedId(null), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeFile = (fileId) => {
|
||||||
|
setFiles((prev) => prev.filter((f) => f.id !== fileId));
|
||||||
|
setSharedLinks((prev) => {
|
||||||
|
const next = { ...prev };
|
||||||
|
delete next[fileId];
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFileInput = (e) => {
|
||||||
|
const fileList = Array.from(e.target.files || []);
|
||||||
|
if (fileList.length) addFiles(fileList);
|
||||||
|
e.target.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="page-enter" style={{ maxWidth: '760px', margin: '0 auto', padding: '48px 24px' }}>
|
||||||
|
<div style={{ marginBottom: '40px' }}>
|
||||||
|
<h1 className="heading-lg" style={{ marginBottom: '12px' }}>Upload files</h1>
|
||||||
|
<p className="text-secondary">Drop your files below and share them with expiring links.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Drop Zone — animated dashed border */}
|
||||||
|
<div
|
||||||
|
ref={dropRef}
|
||||||
|
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
|
||||||
|
onDragLeave={() => setIsDragging(false)}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onClick={() => document.getElementById('file-input')?.click()}
|
||||||
|
className={`drop-zone-animated ${isDragging ? 'dragging' : ''}`}
|
||||||
|
style={{
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: 'var(--radius-xl)',
|
||||||
|
background: isDragging ? 'var(--accent-muted)' : 'var(--bg-elevated)',
|
||||||
|
padding: 'clamp(48px, 6vh, 80px) 24px',
|
||||||
|
textAlign: 'center',
|
||||||
|
cursor: 'pointer',
|
||||||
|
position: 'relative',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="file-input"
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={handleFileInput}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Ambient glow behind upload icon when dragging */}
|
||||||
|
{isDragging && (
|
||||||
|
<div style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
width: '200px',
|
||||||
|
height: '200px',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: 'radial-gradient(circle, rgba(232,168,56,0.15) 0%, transparent 70%)',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
animation: 'pulseGlow 1.5s ease infinite',
|
||||||
|
}} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div style={{
|
||||||
|
width: '64px',
|
||||||
|
height: '64px',
|
||||||
|
margin: '0 auto 20px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
background: 'var(--accent-muted)',
|
||||||
|
border: '1px solid var(--accent-border)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
color: 'var(--accent)',
|
||||||
|
transition: 'all var(--transition-base)',
|
||||||
|
transform: isDragging ? 'scale(1.15)' : 'scale(1)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
}}>
|
||||||
|
<UploadIcon size={28} style={{
|
||||||
|
transition: 'transform var(--transition-base)',
|
||||||
|
transform: isDragging ? 'translateY(-4px)' : 'translateY(0)',
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p style={{
|
||||||
|
fontFamily: 'var(--font-heading)',
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '1.125rem',
|
||||||
|
marginBottom: '8px',
|
||||||
|
color: isDragging ? 'var(--accent)' : 'var(--text-primary)',
|
||||||
|
transition: 'color var(--transition-fast)',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
}}>
|
||||||
|
{isDragging ? 'Drop your files here' : 'Drag files here to upload'}
|
||||||
|
</p>
|
||||||
|
<p className="text-muted" style={{ fontSize: '0.875rem', position: 'relative', zIndex: 1 }}>
|
||||||
|
or click to browse — up to 500MB per file
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* File List */}
|
||||||
|
{files.length > 0 && (
|
||||||
|
<div style={{ marginTop: '32px' }}>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: '16px',
|
||||||
|
}}>
|
||||||
|
<h3 className="heading-sm">
|
||||||
|
{files.filter((f) => f.status === 'done').length} of {files.length} uploaded
|
||||||
|
</h3>
|
||||||
|
{files.every((f) => f.status === 'done') && (
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-sm"
|
||||||
|
onClick={() => {
|
||||||
|
files.forEach((f) => {
|
||||||
|
if (!sharedLinks[f.id]) generateShareLink(f.id);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
style={{ animation: 'scaleIn 0.3s ease' }}
|
||||||
|
>
|
||||||
|
Share All
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||||
|
{files.map((file, index) => (
|
||||||
|
<div
|
||||||
|
key={file.id}
|
||||||
|
style={{
|
||||||
|
background: 'var(--bg-elevated)',
|
||||||
|
border: `1px solid ${file.status === 'done' && sharedLinks[file.id] ? 'var(--accent-border)' : 'var(--border-subtle)'}`,
|
||||||
|
borderLeft: `3px solid ${getFileIconColor(file.type)}`,
|
||||||
|
borderRadius: 'var(--radius-lg)',
|
||||||
|
padding: '16px 20px',
|
||||||
|
animation: `fadeInUp 0.4s ${index * 0.05}s ease both`,
|
||||||
|
transition: 'border-color var(--transition-fast), box-shadow var(--transition-fast)',
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.boxShadow = 'var(--shadow-md)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.boxShadow = 'none';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||||
|
{/* File icon */}
|
||||||
|
<div style={{
|
||||||
|
width: '40px',
|
||||||
|
height: '40px',
|
||||||
|
borderRadius: 'var(--radius-sm)',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
fontFamily: 'var(--font-heading)',
|
||||||
|
fontWeight: 700,
|
||||||
|
fontSize: '0.625rem',
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
color: getFileIconColor(file.type),
|
||||||
|
flexShrink: 0,
|
||||||
|
border: '1px solid var(--border-subtle)',
|
||||||
|
}}>
|
||||||
|
{getFileIcon(file.type)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* File info */}
|
||||||
|
<div style={{ flex: 1, minWidth: 0 }}>
|
||||||
|
<div style={{
|
||||||
|
fontFamily: 'var(--font-heading)',
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '0.9375rem',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
overflow: 'hidden',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
}}>
|
||||||
|
{file.name}
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '0.8125rem', color: 'var(--text-muted)', marginTop: '2px', display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
|
{formatFileSize(file.size)}
|
||||||
|
{file.status === 'done' && (
|
||||||
|
<span style={{
|
||||||
|
color: 'var(--success)',
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '4px',
|
||||||
|
animation: 'scaleIn 0.3s ease',
|
||||||
|
}}>
|
||||||
|
<CheckIcon size={12} />
|
||||||
|
Complete
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{file.status === 'error' && (
|
||||||
|
<span style={{ color: 'var(--danger)' }}>
|
||||||
|
{file.error || 'Upload failed'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
|
||||||
|
{file.status === 'done' && sharedLinks[file.id] && (
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary btn-sm"
|
||||||
|
onClick={() => copyLink(file.id)}
|
||||||
|
style={{ fontFamily: 'var(--font-body)', fontSize: '0.75rem' }}
|
||||||
|
>
|
||||||
|
{copiedId === file.id ? <CheckIcon size={14} style={{ color: 'var(--success)' }} /> : <CopyIcon size={14} />}
|
||||||
|
{copiedId === file.id ? ' Copied' : ' Copy Link'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{file.status === 'done' && !sharedLinks[file.id] && (
|
||||||
|
<button
|
||||||
|
className="btn btn-primary btn-sm"
|
||||||
|
onClick={() => generateShareLink(file.id)}
|
||||||
|
style={{ animation: 'scaleIn 0.3s ease' }}
|
||||||
|
>
|
||||||
|
Share
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="btn btn-ghost btn-icon btn-sm"
|
||||||
|
onClick={() => removeFile(file.id)}
|
||||||
|
style={{
|
||||||
|
color: 'var(--danger)',
|
||||||
|
background: 'rgba(232, 72, 72, 0.08)',
|
||||||
|
border: '1px solid rgba(232, 72, 72, 0.15)',
|
||||||
|
borderRadius: 'var(--radius-sm)',
|
||||||
|
transition: 'all 0.2s ease',
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.background = 'rgba(232, 72, 72, 0.15)';
|
||||||
|
e.currentTarget.style.borderColor = 'rgba(232, 72, 72, 0.35)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.background = 'rgba(232, 72, 72, 0.08)';
|
||||||
|
e.currentTarget.style.borderColor = 'rgba(232, 72, 72, 0.15)';
|
||||||
|
}}
|
||||||
|
title="Remove from queue"
|
||||||
|
>
|
||||||
|
<TrashIcon size={14} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar — with shimmer */}
|
||||||
|
{file.status === 'uploading' && (
|
||||||
|
<div style={{ marginTop: '12px' }}>
|
||||||
|
<div style={{
|
||||||
|
height: '4px',
|
||||||
|
borderRadius: '2px',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
<div
|
||||||
|
className="shimmer-progress"
|
||||||
|
style={{
|
||||||
|
height: '100%',
|
||||||
|
width: `${file.progress}%`,
|
||||||
|
borderRadius: '2px',
|
||||||
|
background: 'linear-gradient(90deg, var(--accent), var(--accent-hover))',
|
||||||
|
transition: 'width 0.3s ease',
|
||||||
|
boxShadow: '0 0 8px rgba(74, 144, 255, 0.3)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
|
fontSize: '0.75rem',
|
||||||
|
color: 'var(--text-muted)',
|
||||||
|
marginTop: '4px',
|
||||||
|
textAlign: 'right',
|
||||||
|
}}>
|
||||||
|
{Math.round(file.progress)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Share link display */}
|
||||||
|
{sharedLinks[file.id] && (
|
||||||
|
<div style={{ animation: 'fadeIn 0.35s ease' }}>
|
||||||
|
<div style={{
|
||||||
|
marginTop: '12px',
|
||||||
|
padding: '10px 14px',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
borderRadius: 'var(--radius-sm)',
|
||||||
|
border: '1px solid var(--border-subtle)',
|
||||||
|
fontFamily: 'var(--font-mono, monospace)',
|
||||||
|
fontSize: '0.8125rem',
|
||||||
|
color: 'var(--accent)',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
}}>
|
||||||
|
{sharedLinks[file.id]}
|
||||||
|
</div>
|
||||||
|
{/* One-Click Quick Share Buttons */}
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
gap: '6px',
|
||||||
|
marginTop: '8px',
|
||||||
|
alignItems: 'center',
|
||||||
|
flexWrap: 'wrap',
|
||||||
|
}}>
|
||||||
|
<span style={{ fontSize: '0.625rem', color: 'var(--text-muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginRight: '4px' }}>
|
||||||
|
Quick Share:
|
||||||
|
</span>
|
||||||
|
{/* Slack */}
|
||||||
|
<a
|
||||||
|
href={`slack://open?message=${encodeURIComponent('Check out this shared file on CShare: ' + sharedLinks[file.id])}`}
|
||||||
|
className="btn btn-ghost btn-sm"
|
||||||
|
style={{ padding: '3px 8px', fontSize: '0.6875rem', height: '24px', borderRadius: '100px', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)' }}
|
||||||
|
>
|
||||||
|
Slack
|
||||||
|
</a>
|
||||||
|
{/* WhatsApp */}
|
||||||
|
<a
|
||||||
|
href={`https://api.whatsapp.com/send?text=${encodeURIComponent('Check out this shared file on CShare: ' + sharedLinks[file.id])}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="btn btn-ghost btn-sm"
|
||||||
|
style={{ padding: '3px 8px', fontSize: '0.6875rem', height: '24px', borderRadius: '100px', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)' }}
|
||||||
|
>
|
||||||
|
WhatsApp
|
||||||
|
</a>
|
||||||
|
{/* Telegram */}
|
||||||
|
<a
|
||||||
|
href={`https://t.me/share/url?url=${encodeURIComponent(sharedLinks[file.id])}&text=${encodeURIComponent('Check out this shared file on CShare!')}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="btn btn-ghost btn-sm"
|
||||||
|
style={{ padding: '3px 8px', fontSize: '0.6875rem', height: '24px', borderRadius: '100px', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)' }}
|
||||||
|
>
|
||||||
|
Telegram
|
||||||
|
</a>
|
||||||
|
{/* Email */}
|
||||||
|
<a
|
||||||
|
href={`mailto:?subject=${encodeURIComponent('File shared via CShare')}&body=${encodeURIComponent('Here is the link to the shared file on CShare: ' + sharedLinks[file.id])}`}
|
||||||
|
className="btn btn-ghost btn-sm"
|
||||||
|
style={{ padding: '3px 8px', fontSize: '0.6875rem', height: '24px', borderRadius: '100px', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)' }}
|
||||||
|
>
|
||||||
|
Email
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Preview link — go to file view */}
|
||||||
|
<div style={{ marginTop: '48px', textAlign: 'center' }}>
|
||||||
|
<p className="text-muted" style={{ fontSize: '0.875rem', marginBottom: '12px' }}>
|
||||||
|
Want to see what recipients see?
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
className="btn btn-ghost"
|
||||||
|
onClick={() => navigate('/preview')}
|
||||||
|
>
|
||||||
|
View sample shared file
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user