mirror of
https://github.com/get-drexa/drive.git
synced 2025-12-01 05:51:39 +00:00
refactor: migrate to vite and restructure repo
Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
599
apps/drive-web/src/files/upload-file-dialog.tsx
Normal file
599
apps/drive-web/src/files/upload-file-dialog.tsx
Normal file
@@ -0,0 +1,599 @@
|
||||
import type { Doc } from "@fileone/convex/_generated/dataModel"
|
||||
import { mutationOptions } from "@tanstack/react-query"
|
||||
import { atom, useAtom, useAtomValue, useSetAtom, useStore } from "jotai"
|
||||
import { atomEffect } from "jotai-effect"
|
||||
import { atomWithMutation } from "jotai-tanstack-query"
|
||||
import {
|
||||
CircleAlertIcon,
|
||||
CircleCheckIcon,
|
||||
FilePlus2Icon,
|
||||
UploadCloudIcon,
|
||||
XIcon,
|
||||
} from "lucide-react"
|
||||
import { nanoid } from "nanoid"
|
||||
import type React from "react"
|
||||
import { useId, useMemo, useRef, useState } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { formatError } from "@/lib/error"
|
||||
import {
|
||||
clearAllFileUploadStatusesAtom,
|
||||
clearFileUploadStatusesAtom,
|
||||
FileUploadStatusKind,
|
||||
fileUploadCountAtom,
|
||||
fileUploadStatusAtomFamily,
|
||||
fileUploadStatusesAtom,
|
||||
hasFileUploadsErrorAtom,
|
||||
successfulFileUploadCountAtom,
|
||||
} from "./store"
|
||||
import useUploadFile from "./use-upload-file"
|
||||
|
||||
type UploadFileDialogProps = {
|
||||
targetDirectory: Doc<"directories">
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
// Upload file atoms
|
||||
export type PickedFile = {
|
||||
id: string
|
||||
file: File
|
||||
}
|
||||
|
||||
export const pickedFilesAtom = atom<PickedFile[]>([])
|
||||
|
||||
function useUploadFilesAtom({
|
||||
targetDirectory,
|
||||
}: {
|
||||
targetDirectory: Doc<"directories">
|
||||
}) {
|
||||
const uploadFile = useUploadFile({ targetDirectory })
|
||||
const store = useStore()
|
||||
const options = useMemo(
|
||||
() =>
|
||||
mutationOptions({
|
||||
mutationFn: async (files: PickedFile[]) => {
|
||||
const promises = files.map((pickedFile) =>
|
||||
uploadFile({
|
||||
file: pickedFile.file,
|
||||
onStart: () => {
|
||||
store.set(
|
||||
fileUploadStatusAtomFamily(pickedFile.id),
|
||||
{
|
||||
kind: FileUploadStatusKind.InProgress,
|
||||
progress: 0,
|
||||
},
|
||||
)
|
||||
},
|
||||
onProgress: (progress) => {
|
||||
store.set(
|
||||
fileUploadStatusAtomFamily(pickedFile.id),
|
||||
{
|
||||
kind: FileUploadStatusKind.InProgress,
|
||||
progress,
|
||||
},
|
||||
)
|
||||
},
|
||||
}).catch((error) => {
|
||||
console.log("error", error)
|
||||
store.set(
|
||||
fileUploadStatusAtomFamily(pickedFile.id),
|
||||
{
|
||||
kind: FileUploadStatusKind.Error,
|
||||
error,
|
||||
},
|
||||
)
|
||||
throw error
|
||||
}),
|
||||
)
|
||||
return await Promise.allSettled(promises)
|
||||
},
|
||||
onSuccess: (results, files) => {
|
||||
const remainingPickedFiles: PickedFile[] = []
|
||||
results.forEach((result, i) => {
|
||||
// biome-ignore lint/style/noNonNullAssertion: results lenght must match input files array length
|
||||
const pickedFile = files[i]!
|
||||
const statusAtom = fileUploadStatusAtomFamily(
|
||||
pickedFile.id,
|
||||
)
|
||||
switch (result.status) {
|
||||
case "fulfilled":
|
||||
store.set(statusAtom, {
|
||||
kind: FileUploadStatusKind.Success,
|
||||
})
|
||||
break
|
||||
case "rejected":
|
||||
store.set(statusAtom, {
|
||||
kind: FileUploadStatusKind.Error,
|
||||
error: result.reason,
|
||||
})
|
||||
remainingPickedFiles.push(pickedFile)
|
||||
break
|
||||
}
|
||||
})
|
||||
// setPickedFiles(remainingPickedFiles)
|
||||
|
||||
if (remainingPickedFiles.length === 0) {
|
||||
toast.success("All files uploaded successfully")
|
||||
}
|
||||
},
|
||||
}),
|
||||
[uploadFile, store.set],
|
||||
)
|
||||
return useMemo(() => atomWithMutation(() => options), [options])
|
||||
}
|
||||
type UploadFilesAtom = ReturnType<typeof useUploadFilesAtom>
|
||||
|
||||
export function UploadFileDialog({
|
||||
targetDirectory,
|
||||
onClose,
|
||||
}: UploadFileDialogProps) {
|
||||
const formId = useId()
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const setPickedFiles = useSetAtom(pickedFilesAtom)
|
||||
const clearFileUploadStatuses = useSetAtom(clearFileUploadStatusesAtom)
|
||||
const store = useStore()
|
||||
|
||||
const updateFileInputEffect = useMemo(
|
||||
() =>
|
||||
atomEffect((get) => {
|
||||
const dataTransfer = new DataTransfer()
|
||||
const pickedFiles = get(pickedFilesAtom)
|
||||
for (const { file } of pickedFiles) {
|
||||
dataTransfer.items.add(file)
|
||||
}
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.files = dataTransfer.files
|
||||
}
|
||||
}),
|
||||
[],
|
||||
)
|
||||
useAtom(updateFileInputEffect)
|
||||
|
||||
const uploadFilesAtom = useUploadFilesAtom({
|
||||
targetDirectory,
|
||||
})
|
||||
|
||||
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
function openFilePicker() {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
|
||||
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const files = event.target.files
|
||||
if (files) {
|
||||
setPickedFiles((prev) => [
|
||||
...prev,
|
||||
...Array.from(files).map((file) => ({ id: nanoid(), file })),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
function onUploadButtonClick() {
|
||||
const uploadStatuses = store.get(fileUploadStatusesAtom)
|
||||
const fileUploadCount = store.get(fileUploadCountAtom)
|
||||
const pickedFiles = store.get(pickedFilesAtom)
|
||||
const { mutate: uploadFiles, reset: restUploadFilesMutation } =
|
||||
store.get(uploadFilesAtom)
|
||||
|
||||
if (pickedFiles.length === 0) {
|
||||
// no files are picked, nothing to upload
|
||||
return
|
||||
}
|
||||
|
||||
if (fileUploadCount === 0) {
|
||||
// no files are being uploaded, upload all picked files
|
||||
uploadFiles(pickedFiles)
|
||||
return
|
||||
}
|
||||
|
||||
const successfulUploads: PickedFile["id"][] = []
|
||||
const nextPickedFiles: PickedFile[] = []
|
||||
for (const file of pickedFiles) {
|
||||
const uploadStatus = uploadStatuses[file.id]
|
||||
if (uploadStatus) {
|
||||
switch (uploadStatus.kind) {
|
||||
case FileUploadStatusKind.Success:
|
||||
successfulUploads.push(file.id)
|
||||
continue
|
||||
case FileUploadStatusKind.InProgress:
|
||||
continue
|
||||
case FileUploadStatusKind.Error:
|
||||
nextPickedFiles.push(file)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
clearFileUploadStatuses(successfulUploads)
|
||||
|
||||
if (successfulUploads.length === pickedFiles.length) {
|
||||
// all files were successfully uploaded, close the dialog
|
||||
onClose()
|
||||
} else {
|
||||
// some files were not successfully uploaded, set the next picked files
|
||||
setPickedFiles(nextPickedFiles)
|
||||
restUploadFilesMutation()
|
||||
uploadFiles(nextPickedFiles)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open
|
||||
onOpenChange={(open) => {
|
||||
if (!open) onClose()
|
||||
}}
|
||||
>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<UploadDialogHeader
|
||||
uploadFilesAtom={uploadFilesAtom}
|
||||
targetDirectory={targetDirectory}
|
||||
/>
|
||||
|
||||
<form id={formId} onSubmit={handleSubmit}>
|
||||
<input
|
||||
hidden
|
||||
multiple
|
||||
type="file"
|
||||
name="files"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
|
||||
<UploadFileDropContainer>
|
||||
<UploadFileArea onClick={openFilePicker} />
|
||||
</UploadFileDropContainer>
|
||||
</form>
|
||||
|
||||
<DialogFooter>
|
||||
<ContinueUploadAfterSuccessfulUploadButton
|
||||
uploadFilesAtom={uploadFilesAtom}
|
||||
/>
|
||||
<SelectMoreFilesButton
|
||||
onClick={openFilePicker}
|
||||
uploadFilesAtom={uploadFilesAtom}
|
||||
/>
|
||||
<UploadButton
|
||||
uploadFilesAtom={uploadFilesAtom}
|
||||
onClick={onUploadButtonClick}
|
||||
/>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
function UploadDialogHeader({
|
||||
uploadFilesAtom,
|
||||
targetDirectory,
|
||||
}: {
|
||||
uploadFilesAtom: UploadFilesAtom
|
||||
targetDirectory: Doc<"directories">
|
||||
}) {
|
||||
const { data: uploadResults, isPending: isUploading } =
|
||||
useAtomValue(uploadFilesAtom)
|
||||
const successfulUploadCount = useAtomValue(successfulFileUploadCountAtom)
|
||||
|
||||
let dialogTitle: string
|
||||
let dialogDescription: string
|
||||
if (isUploading) {
|
||||
dialogTitle = "Uploading files"
|
||||
dialogDescription =
|
||||
"You can close the dialog while they are being uploaded in the background."
|
||||
} else if (
|
||||
uploadResults &&
|
||||
uploadResults.length > 0 &&
|
||||
successfulUploadCount === uploadResults.length
|
||||
) {
|
||||
dialogTitle = "Files uploaded"
|
||||
dialogDescription =
|
||||
"Click 'Done' to close the dialog, or select more files to upload."
|
||||
} else if (targetDirectory.name) {
|
||||
dialogTitle = `Upload file to "${targetDirectory.name}"`
|
||||
dialogDescription = "Drag and drop files here or click to select files"
|
||||
} else {
|
||||
dialogTitle = "Upload file"
|
||||
dialogDescription = "Drag and drop files here or click to select files"
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogHeader>
|
||||
<DialogTitle>{dialogTitle}</DialogTitle>
|
||||
<DialogDescription>{dialogDescription}</DialogDescription>
|
||||
</DialogHeader>
|
||||
)
|
||||
}
|
||||
|
||||
function ContinueUploadAfterSuccessfulUploadButton({
|
||||
uploadFilesAtom,
|
||||
}: {
|
||||
uploadFilesAtom: UploadFilesAtom
|
||||
}) {
|
||||
const setPickedFiles = useSetAtom(pickedFilesAtom)
|
||||
const clearAllFileUploadStatuses = useSetAtom(
|
||||
clearAllFileUploadStatusesAtom,
|
||||
)
|
||||
const {
|
||||
data: uploadResults,
|
||||
isPending: isUploading,
|
||||
reset: resetUploadFilesMutation,
|
||||
} = useAtomValue(uploadFilesAtom)
|
||||
const successfulUploadCount = useAtomValue(successfulFileUploadCountAtom)
|
||||
|
||||
if (
|
||||
!uploadResults ||
|
||||
uploadResults.length === 0 ||
|
||||
successfulUploadCount !== uploadResults.length
|
||||
) {
|
||||
return null
|
||||
}
|
||||
|
||||
function resetUploadState() {
|
||||
setPickedFiles([])
|
||||
clearAllFileUploadStatuses()
|
||||
resetUploadFilesMutation()
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={resetUploadState}
|
||||
disabled={isUploading}
|
||||
>
|
||||
Upload more files
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* allows the user to select more files after they have selected some files for upload. only visible before any upload has been started.
|
||||
*/
|
||||
function SelectMoreFilesButton({
|
||||
onClick,
|
||||
uploadFilesAtom,
|
||||
}: {
|
||||
onClick: () => void
|
||||
uploadFilesAtom: UploadFilesAtom
|
||||
}) {
|
||||
const pickedFiles = useAtomValue(pickedFilesAtom)
|
||||
const { data: uploadResults, isPending: isUploading } =
|
||||
useAtomValue(uploadFilesAtom)
|
||||
|
||||
if (pickedFiles.length === 0 || uploadResults) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="outline" onClick={onClick} disabled={isUploading}>
|
||||
Select more files
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function UploadButton({
|
||||
uploadFilesAtom,
|
||||
onClick,
|
||||
}: {
|
||||
uploadFilesAtom: UploadFilesAtom
|
||||
onClick: () => void
|
||||
}) {
|
||||
const pickedFiles = useAtomValue(pickedFilesAtom)
|
||||
const hasUploadErrors = useAtomValue(hasFileUploadsErrorAtom)
|
||||
const fileUploadCount = useAtomValue(fileUploadCountAtom)
|
||||
const { isPending: isUploading } = useAtomValue(uploadFilesAtom)
|
||||
|
||||
let label: string
|
||||
if (hasUploadErrors) {
|
||||
label = "Retry failed uploads"
|
||||
} else if (pickedFiles.length > 0) {
|
||||
if (fileUploadCount > 0) {
|
||||
label = "Done"
|
||||
} else {
|
||||
label = `Upload ${pickedFiles.length} files`
|
||||
}
|
||||
} else {
|
||||
label = "Upload"
|
||||
}
|
||||
|
||||
return (
|
||||
<Button onClick={onClick} disabled={isUploading} loading={isUploading}>
|
||||
{label}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function UploadFileDropContainer({ children }: React.PropsWithChildren) {
|
||||
const [draggedFiles, setDraggedFiles] = useState<DataTransferItem[]>([])
|
||||
const setPickedFiles = useSetAtom(pickedFilesAtom)
|
||||
|
||||
function handleDragOver(e: React.DragEvent) {
|
||||
e.preventDefault()
|
||||
const items = Array.from(e.dataTransfer.items)
|
||||
const draggedFiles = []
|
||||
for (const item of items) {
|
||||
if (item.kind === "file") {
|
||||
draggedFiles.push(item)
|
||||
}
|
||||
}
|
||||
setDraggedFiles(draggedFiles)
|
||||
}
|
||||
|
||||
function handleDragLeave() {
|
||||
setDraggedFiles([])
|
||||
}
|
||||
|
||||
function handleDrop(e: React.DragEvent) {
|
||||
e.preventDefault()
|
||||
const items = Array.from(e.dataTransfer.items)
|
||||
const droppedFiles: PickedFile[] = []
|
||||
for (const item of items) {
|
||||
const file = item.getAsFile()
|
||||
if (file) {
|
||||
droppedFiles.push({
|
||||
id: nanoid(),
|
||||
file,
|
||||
})
|
||||
}
|
||||
}
|
||||
setPickedFiles((prev) => [...prev, ...droppedFiles])
|
||||
setDraggedFiles([])
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
aria-label="File drop area"
|
||||
className="relative"
|
||||
>
|
||||
{children}
|
||||
{draggedFiles.length > 0 ? (
|
||||
<div className="border border-accent bg-primary text-primary-foreground absolute inset-0 rounded flex flex-col items-center justify-center text-sm space-y-1">
|
||||
<FilePlus2Icon className="animate-bounce" />
|
||||
<p>Drop {draggedFiles.length} files here</p>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// tag: uploadfilearea area fileuploadarea
|
||||
function UploadFileArea({ onClick }: { onClick: () => void }) {
|
||||
const [pickedFiles, setPickedFiles] = useAtom(pickedFilesAtom)
|
||||
|
||||
function removeSelectedFile(file: PickedFile) {
|
||||
setPickedFiles((prev) => prev.filter((f) => f.id !== file.id))
|
||||
}
|
||||
|
||||
if (pickedFiles.length > 0) {
|
||||
return (
|
||||
<PickedFilesList
|
||||
pickedFiles={pickedFiles}
|
||||
onRemoveFile={removeSelectedFile}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="w-full h-48 border-2 rounded border-dashed border-border flex flex-col items-center justify-center text-muted-foreground text-sm space-y-1 hover:bg-muted transition-all hover:border-solid"
|
||||
onClick={onClick}
|
||||
>
|
||||
<UploadCloudIcon />
|
||||
<span>Click to select files or drag and drop them here</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function PickedFilesList({
|
||||
pickedFiles,
|
||||
onRemoveFile,
|
||||
}: {
|
||||
pickedFiles: PickedFile[]
|
||||
onRemoveFile: (file: PickedFile) => void
|
||||
}) {
|
||||
return (
|
||||
<ul className="min-h-48 border border-border rounded bg-card text-sm">
|
||||
{pickedFiles.map((file: PickedFile) => (
|
||||
<PickedFileItem
|
||||
key={file.id}
|
||||
file={file}
|
||||
onRemove={onRemoveFile}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
function PickedFileItem({
|
||||
file: pickedFile,
|
||||
onRemove,
|
||||
}: {
|
||||
file: PickedFile
|
||||
onRemove: (file: PickedFile) => void
|
||||
}) {
|
||||
const fileUploadAtom = fileUploadStatusAtomFamily(pickedFile.id)
|
||||
const fileUpload = useAtomValue(fileUploadAtom)
|
||||
console.log("fileUpload", fileUpload)
|
||||
const { file, id } = pickedFile
|
||||
|
||||
let statusIndicator: React.ReactNode
|
||||
if (!fileUpload) {
|
||||
statusIndicator = (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => onRemove(pickedFile)}
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
</Button>
|
||||
)
|
||||
} else {
|
||||
switch (fileUpload.kind) {
|
||||
case FileUploadStatusKind.InProgress:
|
||||
statusIndicator = (
|
||||
<Progress
|
||||
className="max-w-20"
|
||||
value={fileUpload.progress * 100}
|
||||
/>
|
||||
)
|
||||
break
|
||||
case FileUploadStatusKind.Error:
|
||||
statusIndicator = (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<CircleAlertIcon className="pr-2 text-destructive" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
Failed to upload file:{" "}
|
||||
{formatError(fileUpload.error)}
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
break
|
||||
case FileUploadStatusKind.Success:
|
||||
statusIndicator = (
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<CircleCheckIcon className="pr-2 text-green-500" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>File uploaded</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<li
|
||||
className="pl-3 pr-1 py-0.5 h-8 hover:bg-muted flex justify-between items-center border-b border-border"
|
||||
key={id}
|
||||
>
|
||||
<p>{file.name} </p>
|
||||
{statusIndicator}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user