import { api } from "@convex/_generated/api" import { useMutation } from "@tanstack/react-query" import { useMutation as useConvexMutation } from "convex/react" import { useSetAtom } from "jotai" import { ChevronDownIcon, Loader2Icon, PlusIcon, UploadCloudIcon, } from "lucide-react" import { type ChangeEvent, useRef } 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, BreadcrumbSeparator, } from "../components/ui/breadcrumb" import { Button } from "../components/ui/button" import { FileTable } from "./file-table" import { newItemKindAtom } from "./state" export function FilesPage() { return ( <>
All Files
) } // tags: upload, uploadfile, uploadfilebutton, fileupload, fileuploadbutton function UploadFileButton() { const generateUploadUrl = useConvexMutation(api.files.generateUploadUrl) const saveFile = useConvexMutation(api.files.saveFile) const { mutate: uploadFile, isPending: isUploading } = useMutation({ mutationFn: async (file: File) => { 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, }) }, onSuccess: () => { toast.success("File uploaded successfully.") }, }) const fileInputRef = useRef(null) const handleClick = () => { fileInputRef.current?.click() } const onFileUpload = async (e: ChangeEvent) => { const file = e.target.files?.[0] if (file) { uploadFile(file) } } return ( <> ) } function NewDirectoryItemDropdown() { const setNewItemKind = useSetAtom(newItemKindAtom) const addNewDirectory = () => { setNewItemKind("directory") } return ( Text file Directory ) }