feat: Implement file upload and management features in ProjectViewPage
This commit is contained in:
181
src/components/FileItem.js
Normal file
181
src/components/FileItem.js
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
export default function FileItem({ file, onDelete, onUpdate }) {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editFilename, setEditFilename] = useState(file.original_filename);
|
||||
const [editDescription, setEditDescription] = useState(file.description || "");
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/files/${file.file_id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
original_filename: editFilename,
|
||||
description: editDescription,
|
||||
}),
|
||||
});
|
||||
if (res.ok) {
|
||||
const updatedFile = await res.json();
|
||||
onUpdate(updatedFile);
|
||||
setIsEditing(false);
|
||||
} else {
|
||||
alert('Błąd podczas aktualizacji pliku');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating file:', error);
|
||||
alert('Błąd podczas aktualizacji pliku');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditFilename(file.original_filename);
|
||||
setEditDescription(file.description || "");
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (!bytes) return '';
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const getFileIcon = (filename) => {
|
||||
const ext = filename.split('.').pop().toLowerCase();
|
||||
if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
|
||||
return (
|
||||
<svg className="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
);
|
||||
} else if (ext === 'pdf') {
|
||||
return (
|
||||
<svg className="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
);
|
||||
} else if (['doc', 'docx'].includes(ext)) {
|
||||
return (
|
||||
<svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
);
|
||||
} else if (['xls', 'xlsx'].includes(ext)) {
|
||||
return (
|
||||
<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<svg className="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="p-3 bg-gray-50 rounded-lg border">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Nazwa pliku
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editFilename}
|
||||
onChange={(e) => setEditFilename(e.target.value)}
|
||||
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Opis (opcjonalny)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editDescription}
|
||||
onChange={(e) => setEditDescription(e.target.value)}
|
||||
className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
|
||||
placeholder="Dodaj opis pliku..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
Zapisz
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleCancel}>
|
||||
Anuluj
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group">
|
||||
<div className="flex items-center flex-1 min-w-0">
|
||||
<div className="flex-shrink-0 mr-3">
|
||||
{getFileIcon(file.original_filename)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium text-gray-900 truncate">
|
||||
{file.original_filename}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 flex items-center gap-2">
|
||||
<span>{formatFileSize(file.file_size)}</span>
|
||||
<span>•</span>
|
||||
<span>{new Date(file.upload_date).toLocaleDateString('pl-PL')}</span>
|
||||
</div>
|
||||
{file.description && (
|
||||
<div className="text-xs text-gray-600 mt-1 truncate">
|
||||
{file.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 ml-3">
|
||||
<a
|
||||
href={`/api/files/${file.file_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:text-blue-800 p-1 rounded"
|
||||
title="Pobierz"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</a>
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="text-gray-600 hover:text-gray-800 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
title="Edytuj"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDelete(file.file_id)}
|
||||
className="text-red-600 hover:text-red-800 p-1 rounded opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
title="Usuń"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
137
src/components/FileUploadBox.js
Normal file
137
src/components/FileUploadBox.js
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user