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

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,

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 })

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>

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"
 

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