feat: Implement file upload and management features in ProjectViewPage

src/components/FileUploadBox.js

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useRef, useCallback } from "react";
+import Button from "@/components/ui/Button";
+
+export default function FileUploadBox({ projectId, onFileUploaded }) {
+	const [uploading, setUploading] = useState(false);
+	const [dragOver, setDragOver] = useState(false);
+	const fileInputRef = useRef(null);
+
+	const acceptedTypes = ".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.txt,.dwg,.zip";
+
+	const uploadFiles = async (files) => {
+		const validFiles = Array.from(files).filter(file => {
+			const isValidType = acceptedTypes.split(',').some(type => 
+				file.name.toLowerCase().endsWith(type.replace('*', ''))
+			);
+			const isValidSize = file.size <= 10 * 1024 * 1024; // 10MB limit
+			return isValidType && isValidSize;
+		});
+
+		if (validFiles.length === 0) {
+			alert('No valid files selected (invalid type or size > 10MB)');
+			return;
+		}
+
+		if (validFiles.length !== files.length) {
+			alert('Some files were skipped due to invalid type or size (max 10MB)');
+		}
+
+		setUploading(true);
+		const uploadPromises = validFiles.map(async (file) => {
+			const formData = new FormData();
+			formData.append("file", file);
+			formData.append("entityType", "project");
+			formData.append("entityId", projectId.toString());
+
+			try {
+				const response = await fetch("/api/files", {
+					method: "POST",
+					body: formData,
+				});
+
+				if (response.ok) {
+					const uploadedFile = await response.json();
+					onFileUploaded?.(uploadedFile);
+					return { success: true };
+				} else {
+					const error = await response.json();
+					return { success: false, error: error.error || "Upload failed" };
+				}
+			} catch (error) {
+				return { success: false, error: "Network error" };
+			}
+		});
+
+		const results = await Promise.all(uploadPromises);
+		const failed = results.filter(r => !r.success);
+
+		if (failed.length > 0) {
+			alert(`Failed to upload ${failed.length} file(s)`);
+		}
+
+		setUploading(false);
+	};
+
+	const handleInputChange = (e) => {
+		if (e.target.files.length > 0) {
+			uploadFiles(e.target.files);
+		}
+		e.target.value = ''; // Reset input
+	};
+
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		setDragOver(false);
+		if (e.dataTransfer.files.length > 0) {
+			uploadFiles(e.dataTransfer.files);
+		}
+	}, []);
+
+	const handleDragOver = useCallback((e) => {
+		e.preventDefault();
+		setDragOver(true);
+	}, []);
+
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		setDragOver(false);
+	}, []);
+
+	const handleClick = () => {
+		fileInputRef.current?.click();
+	};
+
+	return (
+		<div className="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-gray-400 transition-colors cursor-pointer">
+			<input
+				ref={fileInputRef}
+				type="file"
+				multiple
+				className="hidden"
+				onChange={handleInputChange}
+				accept={acceptedTypes}
+				disabled={uploading}
+			/>
+
+			{uploading ? (
+				<div className="flex flex-col items-center">
+					<svg className="animate-spin h-6 w-6 text-blue-600 mb-2" fill="none" viewBox="0 0 24 24">
+						<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+						<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+					</svg>
+					<span className="text-xs text-gray-600">Przesyłanie plików...</span>
+				</div>
+			) : (
+				<div 
+					className={`flex flex-col items-center ${dragOver ? 'scale-105' : ''} transition-transform`}
+					onDrop={handleDrop}
+					onDragOver={handleDragOver}
+					onDragLeave={handleDragLeave}
+					onClick={handleClick}
+				>
+					<svg className="w-8 h-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+					</svg>
+					<span className="text-sm font-medium text-gray-900 mb-1">
+						{dragOver ? 'Upuść pliki tutaj' : 'Przeciągnij pliki lub kliknij'}
+					</span>
+					<span className="text-xs text-gray-500">
+						PDF, DOC, XLS, obrazki, DWG, ZIP
+					</span>
+				</div>
+			)}
+		</div>
+	);
+}