import { api } from "@convex/_generated/api" import { useMutation as useConvexMutation, useQuery as useConvexQuery, } from "convex/react" import { useSetAtom } from "jotai" import { ChevronDownIcon, Loader2Icon, PlusIcon, UploadCloudIcon, } from "lucide-react" import { type ChangeEvent, useRef, useState } from "react" import { toast } from "sonner" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { DirectoryIcon } from "../components/icons/directory-icon" import { TextFileIcon } from "../components/icons/text-file-icon" import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, } from "../components/ui/breadcrumb" import { Button } from "../components/ui/button" import { SidebarTrigger } from "../components/ui/sidebar" import { FileTable } from "./file-table" import { newItemKindAtom } from "./state" export function FilesPage() { return ( <>
Files
) } // tags: upload, uploadfile, uploadfilebutton, fileupload, fileuploadbutton function UploadFileButton() { const [isUploading, setIsUploading] = useState(false) const currentUser = useConvexQuery(api.users.getCurrentUser) const generateUploadUrl = useConvexMutation(api.files.generateUploadUrl) const saveFile = useConvexMutation(api.files.saveFile) const fileInputRef = useRef(null) const handleClick = () => { fileInputRef.current?.click() } const onFileUpload = async (e: ChangeEvent) => { if (!currentUser?._id) { return } const file = e.target.files?.[0] if (file) { try { setIsUploading(true) const uploadUrl = await generateUploadUrl() const uploadResult = await fetch(uploadUrl, { method: "POST", body: file, headers: { "Content-Type": file.type, }, }) const { storageId } = await uploadResult.json() await saveFile({ storageId, name: file.name, size: file.size, mimeType: file.type, userId: currentUser._id, }) toast.success("File uploaded successfully.", { position: "top-center", }) } catch (error) { console.error(error) } finally { setIsUploading(false) } } } return ( <> ) } function NewDirectoryItemDropdown() { const setNewItemKind = useSetAtom(newItemKindAtom) const addNewDirectory = () => { setNewItemKind("directory") } return ( Text file Directory ) }