Skip to content

Commit f300fd9

Browse files
admineraladmineral
committed
added new Upload
1 parent 22f28d2 commit f300fd9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+4555
-180
lines changed

‎app/api/deleteFile/route.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// my-app/pages/api/deleteFile.ts
2+
import { NextRequest, NextResponse } from 'next/server';
3+
import OpenAI from "openai";
4+
5+
// Initialize the OpenAI client with the API key
6+
const openai = new OpenAI({
7+
apiKey: process.env.OPENAI_API_KEY,
8+
});
9+
10+
export async function DELETE(req: NextRequest) {
11+
const { fileId } = await req.json();
12+
13+
// Check if a file ID was provided in the request
14+
if (!fileId) {
15+
console.log('No file ID found in the request');
16+
return NextResponse.json({ success: false }, { status: 400 });
17+
}
18+
19+
try {
20+
// Deleting the file from OpenAI
21+
console.log(`Starting file deletion from OpenAI, File ID: ${fileId}`);
22+
const deletionStatus = await openai.files.del(fileId);
23+
console.log(`File deleted, ID: ${deletionStatus.id}, Status: ${deletionStatus.deleted}`);
24+
25+
// Respond with the deletion status
26+
return NextResponse.json({ success: deletionStatus.deleted, fileId: deletionStatus.id });
27+
} catch (error) {
28+
// Log and respond to any errors during the deletion process
29+
console.error('Error deleting file:', error);
30+
return NextResponse.json({ success: false, message: 'Error deleting file' }, { status: 500 });
31+
}
32+
}

‎app/components/UploadFiles_Configure.tsx

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
// my-app/app/GPT_Builder_components/Left_Side/Configure/Upload_Left/UploadFiles_2.tsx
2+
import { prepareUploadFile, deleteUploadedFile } from '../modules/assistantModules';
3+
import React, { useState, useCallback } from 'react';
4+
import { Button } from "@/components/ui/button";
5+
import {Tooltip,TooltipContent,TooltipProvider,TooltipTrigger,} from "@/components/ui/tooltip";
6+
import { MoreHorizontal } from "lucide-react";
7+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
8+
9+
10+
// Define the structure of the file data
11+
interface FileData {
12+
name: string;
13+
fileId?: string;
14+
status?: 'uploading' | 'uploaded' | 'failed';
15+
}
16+
17+
interface UploadFilesProps {
18+
files: FileData[];
19+
setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
20+
onFileIdUpdate: (fileId: string) => void;
21+
setActiveFileIds: React.Dispatch<React.SetStateAction<string[]>>;
22+
}
23+
24+
const UploadFiles_Configure: React.FC<UploadFilesProps> = ({ files, setFiles, onFileIdUpdate, setActiveFileIds }) => { const [statusMessage, setStatusMessage] = useState<string>('');
25+
26+
const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
27+
const selectedFiles = event.target.files;
28+
if (!selectedFiles) return;
29+
30+
const originalFiles: File[] = Array.from(selectedFiles);
31+
originalFiles.forEach(file => {
32+
const fileData: FileData = { name: file.name, status: 'uploading' };
33+
setFiles(currentFiles => [...currentFiles, fileData]);
34+
35+
prepareUploadFile(file, setStatusMessage)
36+
.then(fileId => {
37+
setFiles(currentFiles =>
38+
currentFiles.map(f =>
39+
f.name === fileData.name ? { ...f, fileId, status: 'uploaded' } : f
40+
)
41+
);
42+
onFileIdUpdate(fileId);
43+
})
44+
.catch(error => {
45+
console.error('Error uploading file:', error);
46+
setFiles(currentFiles =>
47+
currentFiles.map(f =>
48+
f.name === fileData.name ? { ...f, status: 'failed' } : f
49+
)
50+
);
51+
});
52+
});
53+
54+
event.target.value = '';
55+
}, []);
56+
57+
const handleDelete = useCallback((fileId: string) => {
58+
const fileIndex = files.findIndex(f => f.fileId === fileId);
59+
if (fileIndex === -1) return;
60+
61+
deleteUploadedFile(fileId, setStatusMessage)
62+
.then(() => {
63+
setFiles(currentFiles => currentFiles.filter(f => f.fileId !== fileId));
64+
setActiveFileIds((prevFileIds) => prevFileIds.filter(id => id !== fileId)); // Add this line
65+
66+
setStatusMessage(`File deleted successfully.`);
67+
})
68+
.catch(error => {
69+
console.error('Error deleting file:', error);
70+
setStatusMessage(`Failed to delete file.`);
71+
});
72+
}, [files]);
73+
74+
75+
return (
76+
<TooltipProvider>
77+
<div className="max-w-4xl mx-auto p-6 bg-whitetext-white">
78+
<div className="flex justify-between items-center mb-4">
79+
<h1 className="text-lg font-semibold">Knowledge</h1>
80+
<div></div>
81+
</div>
82+
<div className="grid grid-cols-2 gap-4 mb-4">
83+
{files.map((file, index) => (
84+
<div key={index} className="bg-gray-400 rounded-lg p-4 relative">
85+
<div className="flex justify-between items-center">
86+
<div className="flex items-center space-x-2 flex-grow">
87+
<span className={`h-3 w-3 rounded-full ${file.status === 'uploading' ? 'bg-orange-500' : file.fileId ? 'bg-green-500' : 'bg-red-500'}`}></span>
88+
<div className="truncate w-0 flex-grow">
89+
<Tooltip>
90+
<TooltipTrigger>
91+
<p className="font-medium truncate">{file.name.length > 20 ? `${file.name.substring(0, 20)}...` : file.name}</p>
92+
</TooltipTrigger>
93+
<TooltipContent>
94+
{`Filename: ${file.name}`}
95+
</TooltipContent>
96+
</Tooltip>
97+
</div>
98+
</div>
99+
{file.fileId && file.status === 'uploaded' && (
100+
<div className="flex-shrink-0">
101+
<DropdownMenu>
102+
<DropdownMenuTrigger asChild>
103+
<Button variant="ghost" className="h-8 w-8 p-0">
104+
<MoreHorizontal className="h-4 w-4" />
105+
</Button>
106+
</DropdownMenuTrigger>
107+
<DropdownMenuContent align="end">
108+
<DropdownMenuItem
109+
onClick={() => file.fileId && navigator.clipboard.writeText(file.fileId)}
110+
>
111+
Copy file ID
112+
</DropdownMenuItem>
113+
<DropdownMenuItem
114+
onClick={() => file.fileId && handleDelete(file.fileId)}
115+
>
116+
Delete file
117+
</DropdownMenuItem>
118+
</DropdownMenuContent>
119+
</DropdownMenu>
120+
</div>
121+
)}
122+
</div>
123+
</div>
124+
))}
125+
</div>
126+
<div className="text-center">
127+
<button
128+
className="bg-gray-200 text-gray-800 uppercase font-bold text-sm px-6 py-2 rounded shadow hover:bg-gray-300"
129+
onClick={() => document.getElementById('fileUpload')?.click()}
130+
>
131+
Upload files
132+
</button>
133+
<input
134+
id="fileUpload"
135+
type="file"
136+
onChange={handleFileChange}
137+
className="hidden"
138+
multiple
139+
/>
140+
</div>
141+
</div>
142+
</TooltipProvider>
143+
);
144+
};
145+
146+
export default UploadFiles_Configure;

‎app/components/WelcomeForm.js

-167
This file was deleted.

0 commit comments

Comments
 (0)