Add drag-and-drop document upload
Replace the old prompt()-based file upload flow with an inline drop zone.
Before: Click 'Upload Doc' → native file picker → prompt() for type →
prompt() for notes → upload. Three modal interruptions.
After: Drop a file (or click to browse) → inline form shows with type
dropdown and notes field → click Upload. Zero browser dialogs.
New component: DocumentDropZone
- Drag-and-drop with visual feedback (border color change on dragover)
- Click-to-browse fallback
- Inline type selector (advisory, email, screenshot, patch, other)
- Inline notes field
- Cancel button to dismiss without uploading
- Shows filename and size before upload
- Uses toast notifications for success/error
Removed from CVECard:
- handleFileUpload function (createElement('input') + prompt() pattern)
- uploadingFile state variable
- Upload (lucide) icon import
This commit is contained in:
Jordan Ramos
@@ -1,7 +1,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ChevronDown, FileText, Eye, Edit2, Trash2, Upload, Plus, AlertCircle } from 'lucide-react';
|
||||
import { ChevronDown, FileText, Eye, Edit2, Trash2, Plus, AlertCircle } from 'lucide-react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
import DocumentDropZone from './DocumentDropZone';
|
||||
|
||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||
|
||||
@@ -50,7 +51,6 @@ export default function CVECard({
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [docExpanded, setDocExpanded] = useState(null);
|
||||
const [documents, setDocuments] = useState({});
|
||||
const [uploadingFile, setUploadingFile] = useState(false);
|
||||
const [selectedDocuments, setSelectedDocuments] = useState([]);
|
||||
|
||||
const severityOrder = { Critical: 0, High: 1, Medium: 2, Low: 3 };
|
||||
@@ -87,45 +87,6 @@ export default function CVECard({
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileUpload = async (cveId, vendor) => {
|
||||
const fileInput = document.createElement('input');
|
||||
fileInput.type = 'file';
|
||||
fileInput.accept = '.pdf,.png,.jpg,.jpeg,.gif,.bmp,.tiff,.tif,.txt,.csv,.log,.msg,.eml,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.odt,.ods,.odp,.rtf,.html,.htm,.xml,.json,.yaml,.yml,.zip,.gz,.tar,.7z';
|
||||
|
||||
fileInput.onchange = async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const docType = prompt('Document type (advisory, email, screenshot, patch, other):', 'advisory');
|
||||
if (!docType) return;
|
||||
const notes = prompt('Notes (optional):');
|
||||
|
||||
setUploadingFile(true);
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('cveId', cveId);
|
||||
formData.append('vendor', vendor);
|
||||
formData.append('type', docType);
|
||||
if (notes) formData.append('notes', notes);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/cves/${cveId}/documents`, {
|
||||
method: 'POST', credentials: 'include', body: formData,
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to upload document');
|
||||
toast.success('Document uploaded successfully');
|
||||
const key = `${cveId}-${vendor}`;
|
||||
setDocuments(prev => { const next = { ...prev }; delete next[key]; return next; });
|
||||
await fetchDocuments(cveId, vendor);
|
||||
} catch (err) {
|
||||
toast.error(err.message);
|
||||
} finally {
|
||||
setUploadingFile(false);
|
||||
}
|
||||
};
|
||||
fileInput.click();
|
||||
};
|
||||
|
||||
const handleDeleteDocument = (docId, cveId, vendor) => {
|
||||
onRequestConfirm({
|
||||
title: 'Delete Document',
|
||||
@@ -328,14 +289,15 @@ export default function CVECard({
|
||||
<p className="text-sm text-gray-400 italic font-mono">No documents attached</p>
|
||||
)}
|
||||
{canWrite() && (
|
||||
<button
|
||||
onClick={() => handleFileUpload(cve.cve_id, cve.vendor)}
|
||||
disabled={uploadingFile}
|
||||
className="mt-3 px-4 py-2 text-sm text-gray-400 hover:text-intel-accent hover:bg-intel-medium rounded transition-all flex items-center gap-2 disabled:opacity-50 border border-gray-600 font-mono uppercase tracking-wider"
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
{uploadingFile ? 'Uploading...' : 'Upload Doc'}
|
||||
</button>
|
||||
<DocumentDropZone
|
||||
cveId={cve.cve_id}
|
||||
vendor={cve.vendor}
|
||||
onUploadComplete={async () => {
|
||||
const key = `${cve.cve_id}-${cve.vendor}`;
|
||||
setDocuments(prev => { const next = { ...prev }; delete next[key]; return next; });
|
||||
await fetchDocuments(cve.cve_id, cve.vendor);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
169
frontend/src/components/DocumentDropZone.js
Normal file
169
frontend/src/components/DocumentDropZone.js
Normal file
@@ -0,0 +1,169 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Upload, X } from 'lucide-react';
|
||||
import { useToast } from '../contexts/ToastContext';
|
||||
|
||||
// ⚠️ CONVENTION: Use relative API path from REACT_APP_API_BASE only — avoid hardcoded absolute URL fallback
|
||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||
|
||||
const ACCEPTED_EXTENSIONS = '.pdf,.png,.jpg,.jpeg,.gif,.bmp,.tiff,.tif,.txt,.csv,.log,.msg,.eml,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.odt,.ods,.odp,.rtf,.html,.htm,.xml,.json,.yaml,.yml,.zip,.gz,.tar,.7z';
|
||||
|
||||
const DOC_TYPES = ['advisory', 'email', 'screenshot', 'patch', 'other'];
|
||||
|
||||
export default function DocumentDropZone({ cveId, vendor, onUploadComplete }) {
|
||||
const toast = useToast();
|
||||
const fileInputRef = useRef(null);
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const [file, setFile] = useState(null);
|
||||
const [docType, setDocType] = useState('advisory');
|
||||
const [notes, setNotes] = useState('');
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleDragOver = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragOver(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragOver(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragOver(false);
|
||||
const droppedFile = e.dataTransfer.files[0];
|
||||
if (droppedFile) setFile(droppedFile);
|
||||
};
|
||||
|
||||
const handleFileSelect = (e) => {
|
||||
const selected = e.target.files[0];
|
||||
if (selected) setFile(selected);
|
||||
};
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('cveId', cveId);
|
||||
formData.append('vendor', vendor);
|
||||
formData.append('type', docType);
|
||||
if (notes.trim()) formData.append('notes', notes.trim());
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/cves/${cveId}/documents`, {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: formData,
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to upload document');
|
||||
toast.success(`Uploaded ${file.name}`);
|
||||
setFile(null);
|
||||
setNotes('');
|
||||
setDocType('advisory');
|
||||
onUploadComplete();
|
||||
} catch (err) {
|
||||
toast.error(err.message);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setFile(null);
|
||||
setNotes('');
|
||||
setDocType('advisory');
|
||||
};
|
||||
|
||||
// No file selected — show drop zone
|
||||
if (!file) {
|
||||
return (
|
||||
<div
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="mt-3 cursor-pointer transition-all"
|
||||
style={{
|
||||
border: `2px dashed ${dragOver ? '#0EA5E9' : 'rgba(100, 116, 139, 0.4)'}`,
|
||||
borderRadius: '0.5rem',
|
||||
padding: '1rem',
|
||||
textAlign: 'center',
|
||||
background: dragOver ? 'rgba(14, 165, 233, 0.05)' : 'transparent',
|
||||
}}
|
||||
role="button"
|
||||
aria-label="Drop a file here or click to browse"
|
||||
>
|
||||
<Upload className="w-5 h-5 mx-auto mb-1" style={{ color: dragOver ? '#0EA5E9' : '#64748B' }} />
|
||||
<p className="text-xs font-mono" style={{ color: dragOver ? '#0EA5E9' : '#64748B' }}>
|
||||
Drop file here or click to browse
|
||||
</p>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={ACCEPTED_EXTENSIONS}
|
||||
onChange={handleFileSelect}
|
||||
className="hidden"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// File selected — show upload form
|
||||
return (
|
||||
<div className="mt-3 p-3 rounded" style={{ border: '1px solid rgba(14, 165, 233, 0.3)', background: 'rgba(14, 165, 233, 0.03)' }}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Upload className="w-4 h-4 text-intel-accent flex-shrink-0" />
|
||||
<span className="text-xs text-white font-mono truncate">{file.name}</span>
|
||||
<span className="text-xs text-gray-500 font-mono flex-shrink-0">
|
||||
({(file.size / 1024).toFixed(0)} KB)
|
||||
</span>
|
||||
</div>
|
||||
<button onClick={handleCancel} className="text-gray-400 hover:text-intel-danger transition-colors flex-shrink-0" aria-label="Cancel upload">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 mb-3">
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1 font-mono">Type</label>
|
||||
<select
|
||||
value={docType}
|
||||
onChange={(e) => setDocType(e.target.value)}
|
||||
className="intel-input w-full text-xs"
|
||||
style={{ padding: '0.375rem 0.5rem' }}
|
||||
>
|
||||
{DOC_TYPES.map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs text-gray-400 mb-1 font-mono">Notes</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Optional"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="intel-input w-full text-xs"
|
||||
style={{ padding: '0.375rem 0.5rem' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleUpload}
|
||||
disabled={uploading}
|
||||
className="intel-button intel-button-primary w-full text-xs py-1.5"
|
||||
>
|
||||
{uploading ? 'Uploading...' : 'Upload'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user