No avisa quan un fitxer és massa gran (#82)

data-students · Apr 4, 2024 · 6e68051 · 6e68051
1 parent 36e77a6
commit 6e68051
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ["uploadthing.com", "lh3.googleusercontent.com"],
+    remotePatterns: [
+      {
+        hostname: "*.googleusercontent.com",
+      },
+      {
+        hostname: "uploadthing.com",
+      },
+    ],
   },
   experimental: {
     appDir: true,

diff --git a/src/app/api/uploadthing/core.ts b/src/app/api/uploadthing/core.ts
@@ -1,6 +1,7 @@
 import { createUploadthing, type FileRouter } from "uploadthing/next"
 import { UploadThingError } from "uploadthing/server"
 import { getToken } from "next-auth/jwt"
+import { MAX_FILE_COUNT, MAX_FILE_SIZE_MB } from "@/config"
 
 const f = createUploadthing()
 
@@ -14,8 +15,11 @@ export const ourFileRouter = {
     .onUploadComplete(async ({}) => {}),
 
   fileUploader: f({
-    pdf: { maxFileCount: 10, maxFileSize: "32MB" },
-    text: { maxFileCount: 10, maxFileSize: "32MB" },
+    pdf: { maxFileCount: MAX_FILE_COUNT, maxFileSize: `${MAX_FILE_SIZE_MB}MB` },
+    text: {
+      maxFileCount: MAX_FILE_COUNT,
+      maxFileSize: `${MAX_FILE_SIZE_MB}MB`,
+    },
   })
     .middleware(async ({ req }) => {
       const user = await getToken({ req })

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
@@ -25,6 +25,7 @@ import { uploadFiles } from "@/lib/uploadthing"
 import Fireworks from "react-canvas-confetti/dist/presets/fireworks"
 import { MultiFileDropzone } from "@/components/MultiFileDropzone"
 import { Textarea } from "./ui/Textarea"
+import { MAX_FILE_COUNT, MAX_FILE_SIZE_MB } from "@/config"
 
 const formSchema = z.object({
   pdf: z.array(z.any()),
@@ -223,11 +224,26 @@ export function ProfileForm({
                 <FormItem>
                   <FormLabel>Fitxers PDF</FormLabel>
                   <FormControl>
-                    <div className="grid w-full max-w-sm items-center gap-1.5">
+                    <div className="w-full max-w-sm items-center gap-1.5">
                       <MultiFileDropzone
                         value={field.value}
                         onChange={(acceptedFiles) => {
-                          field.onChange(acceptedFiles)
+                          if (
+                            acceptedFiles.length > MAX_FILE_COUNT ||
+                            acceptedFiles.some(
+                              (file) => file.size >= MAX_FILE_SIZE_MB * 10 ** 6,
+                            )
+                          ) {
+                            toast({
+                              variant: "destructive",
+                              title: "Fitxers no vàlids",
+                              description:
+                                "Només pots pujar fins a 10 fitxers de menys de 32MB cada un.",
+                            })
+                            field.onChange([])
+                          } else {
+                            field.onChange(acceptedFiles)
+                          }
                         }}
                       />
                     </div>
@@ -250,7 +266,7 @@ export function ProfileForm({
                       <Input
                         placeholder="WhoIsGraf?"
                         {...field}
-                        className="mb-0"
+                        className="my-2"
                       />
                     </FormControl>
                     <FormMessage />
@@ -265,7 +281,7 @@ export function ProfileForm({
                     <FormControl>
                       <Textarea
                         placeholder="Descripció (opcional)"
-                        className="resize-none"
+                        className="resize-none my-2"
                         {...field}
                       />
                     </FormControl>
@@ -372,10 +388,14 @@ export function ProfileForm({
                 <FormItem>
                   <FormLabel>Email</FormLabel>
                   <FormControl>
-                    <Input placeholder="Gràcies per ajudar" {...field} />
+                    <Input placeholder="Uploader" {...field} />
                   </FormControl>
                   <FormDescription>
-                    Email de l&apos;autor/a dels apunts
+                    Aquest camp t&apos;apareix ja que ets admin i tens permís
+                    per a compartir apunts en nom d&apos;algú altre. Escriu
+                    &quot;Uploader&quot; si els comparteixes en nom teu.
+                    <br />
+                    Gràcies per ajudar!
                   </FormDescription>
                   <FormMessage />
                 </FormItem>

diff --git a/src/components/ui/Textarea.tsx b/src/components/ui/Textarea.tsx
@@ -11,13 +11,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
     )
-  }
+  },
 )
 Textarea.displayName = "Textarea"
 

diff --git a/src/config.ts b/src/config.ts
@@ -1,2 +1,5 @@
 export const INFINITE_SCROLL_PAGINATION_RESULTS = 4
 export const GCED_START = 2017
+
+export const MAX_FILE_COUNT = 10
+export const MAX_FILE_SIZE_MB = 32