[WIP] files upload front

examples/common_nestjs_remix/apps/web/app/components/FileDropZone/DropZoneContent.tsx

@@ -0,0 +1,27 @@
+import { first, isEmpty } from "lodash-es";
+import pluralize from "pluralize";
+
+interface DropZoneContentProps {
+  files: File[];
+  multiple?: boolean;
+}
+
+export default function DropzoneContent({
+  files,
+  multiple,
+}: DropZoneContentProps) {
+  if (!multiple && !isEmpty(files) && first(files)?.type.startsWith("image/")) {
+    return (
+      <img
+        src={URL.createObjectURL(files[0])}
+        alt="Preview"
+        className="w-full h-full rounded-lg object-cover"
+      />
+    );
+  }
+  return (
+    <span className="text-center">
+      Drag and drop or click to upload {pluralize("file", multiple ? 2 : 1)}
+    </span>
+  );
+}

examples/common_nestjs_remix/apps/web/app/components/FileDropZone/FileDropZone.tsx

@@ -0,0 +1,113 @@
+import React, { useCallback, useRef, useState } from "react";
+import { cn } from "~/lib/utils";
+import { Label } from "../ui/label";
+
+function Dropzone() {
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [fileName, setFileName] = useState<string>();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = async (file?: File) => {
+    if (!file) {
+      return;
+    }
+
+    if (!file.type.startsWith("image/")) {
+      alert("Please upload an image file");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      setAvatar(e.target?.result as string);
+    };
+    reader.readAsDataURL(file);
+    setFileName(file.name);
+
+    // TODO: Implement server-side file upload
+  };
+
+  const openFileDialog = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  const onDragOver = useCallback((evt: React.DragEvent<HTMLDivElement>) => {
+    evt.preventDefault();
+    setIsHighlighted(true);
+  }, []);
+
+  const onDragLeave = useCallback(() => {
+    setIsHighlighted(false);
+  }, []);
+
+  const onDrop = useCallback(async (evt: React.DragEvent<HTMLDivElement>) => {
+    evt.preventDefault();
+    const file = Array.from(evt.dataTransfer.files)[0];
+    await handleFileUpload(file);
+    setIsHighlighted(false);
+  }, []);
+
+  const onFileChange = useCallback(
+    async (evt: React.ChangeEvent<HTMLInputElement>) => {
+      const file = Array.from(evt.target.files || [])[0];
+      await handleFileUpload(file);
+    },
+    []
+  );
+
+  const dropZoneClasses = cn(
+    "border-neutral-500 transition-colors h-40 flex items-center justify-center text-neutral-400 text-sm cursor-pointer",
+    {
+      "!border-neutral-300": isHighlighted,
+      "border p-2 w-full": !avatar,
+      "rounded-lg w-40": avatar,
+    }
+  );
+
+  return (
+    <div className="flex gap-6">
+      <div
+        role="button"
+        tabIndex={0}
+        onKeyDown={openFileDialog}
+        onClick={openFileDialog}
+        className={dropZoneClasses}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        {avatar ? (
+          <img
+            src={avatar}
+            alt="Avatar"
+            className="w-full h-full rounded-lg object-cover"
+          />
+        ) : (
+          <span className="text-center">
+            Drag and drop or click to upload avatar
+          </span>
+        )}
+        <input
+          type="file"
+          onChange={onFileChange}
+          ref={fileInputRef}
+          className="hidden"
+          accept="image/*"
+        />
+      </div>
+      {fileName && (
+        <div className="space-y-2">
+          <Label htmlFor="email">File name</Label>
+          <p className="cursor-default border h-fit p-2 rounded-md text-sm text-neutral-300">
+            {fileName}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Dropzone;

examples/common_nestjs_remix/apps/web/app/components/FileDropZone/FileList.tsx

@@ -0,0 +1,31 @@
+import { isEmpty } from "lodash-es";
+import { Label } from "../ui/label";
+import FileListItemIcon from "./FileListIcon";
+import FileListItem from "./FileListItem";
+import pluralize from "pluralize";
+
+interface FileListProps {
+  files: File[];
+  onRemoveFile: (index: number) => void;
+}
+
+export default function FileList({ files, onRemoveFile }: FileListProps) {
+  if (isEmpty(files)) return null;
+
+  return (
+    <div className="space-y-2">
+      <Label>Selected {pluralize("file", files.length)}</Label>
+      <ul className="space-y-2">
+        {files.map((file, index) => (
+          <FileListItem
+            key={`${file.name}-${index}`}
+            index={index}
+            file={file}
+            onRemove={onRemoveFile}
+            icon={<FileListItemIcon fileName={file.name} className="h-6 w-6" />}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

examples/common_nestjs_remix/apps/web/app/components/FileDropZone/FileListIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {
+  LucideProps,
+  FileText,
+  FileAudio,
+  FileVideo,
+  FileSpreadsheet,
+  FileQuestion,
+} from "lucide-react";
+import { last } from "lodash-es";
+
+interface FileListItemIconProps extends LucideProps {
+  fileName: string;
+}
+
+const FILE_TYPES = [
+  { extensions: ["txt", "doc", "docx", "pdf"], Icon: FileText },
+  { extensions: ["mp3", "wav", "ogg"], Icon: FileAudio },
+  { extensions: ["mp4", "avi", "mov"], Icon: FileVideo },
+  { extensions: ["xls", "xlsx", "csv"], Icon: FileSpreadsheet },
+];
+
+function getFileIcon(fileName: string): React.ComponentType<LucideProps> {
+  const extension = last(fileName.split("."))?.toLowerCase();
+  if (!extension) return FileQuestion;
+
+  const fileType = FILE_TYPES.find((type) =>
+    type.extensions.includes(extension)
+  );
+  return fileType ? fileType.Icon : FileQuestion;
+}
+
+export default function FileListItemIcon({
+  fileName,
+  ...props
+}: FileListItemIconProps) {
+  const Icon = getFileIcon(fileName);
+  return <Icon {...props} />;
+}

examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Settings/Settings.layout.tsx

@@ -7,6 +7,10 @@ export default function SettingsLayout() {
   const currentTab = replace(hash, "#", "") || "user-info";
 
   const navigationItems = [
+    {
+      id: "user-avatar",
+      title: "Avatar",
+    },
     {
       id: "user-info",
       title: "User Info",

examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Settings/Settings.page.tsx

@@ -1,9 +1,11 @@
 import ChangePasswordForm from "./forms/ChangePasswordForm";
+import UserAvatar from "./forms/UserAvatar";
 import UserForm from "./forms/UserForm";
 
 export default function SettingsPage() {
   return (
     <div className="grid gap-6">
+      <UserAvatar />
       <UserForm />
       <ChangePasswordForm />
     </div>

examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Settings/forms/UserAvatar.tsx

@@ -0,0 +1,46 @@
+import FileDropZone from "~/components/FileDropZone/FileDropZone";
+import { Button } from "~/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+
+export default function UserAvatar() {
+  return (
+    <Card id="user-avatar">
+      <CardHeader>
+        <CardTitle>Avatar</CardTitle>
+        <CardDescription>
+          Update your avatar by dragging and dropping a file here.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <FileDropZone
+          acceptedFileTypes={[
+            ".jpg",
+            ".jpeg",
+            ".png",
+            ".pdf",
+            ".docx",
+            ".pptx",
+            ".xlsx",
+            ".csv",
+            ".txt",
+          ]}
+          multiple
+          onFilesSelected={function (files: File[]): void {
+            console.log(files);
+            // TODO: Implement file upload
+          }}
+        />
+      </CardContent>
+      <CardFooter className="border-t px-6 py-4">
+        <Button>Save</Button>
+      </CardFooter>
+    </Card>
+  );
+}

examples/common_nestjs_remix/apps/web/app/modules/Dashboard/Settings/forms/UserForm.tsx

@@ -7,11 +7,11 @@ import { useCurrentUserSuspense } from "~/api/queries/useCurrentUser";
 import { Button } from "~/components/ui/button";
 import {
   Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
   CardContent,
+  CardDescription,
   CardFooter,
+  CardHeader,
+  CardTitle,
 } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";

examples/common_nestjs_remix/apps/web/package.json

@@ -33,6 +33,7 @@
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.408.0",
     "morgan": "^1.10.0",
+    "pluralize": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
@@ -49,6 +50,7 @@
     "@types/express": "^4.17.20",
     "@types/lodash-es": "^4.17.12",
     "@types/morgan": "^1.9.9",
+    "@types/pluralize": "^0.0.33",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",