Create file upload component (#75)

* File uploader

* Created uploader

Author: lille-morille

package.json

@@ -34,6 +34,7 @@
     "@trpc/client": "^11.0.0-rc.446",
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
+    "browser-image-compression": "^2.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "embla-carousel-react": "^8.0.0-rc22",
@@ -65,8 +66,8 @@
     "postcss": "^8.4.39",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "prisma-erd-generator": "^1.11.2",
     "prisma": "^5.19.1",
+    "prisma-erd-generator": "^1.11.2",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.3",

pnpm-lock.yaml

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { env } from "../env";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import compressImage from "browser-image-compression";
+import { useToast } from "../hooks/use-toast";
+import { useSession } from "next-auth/react";
+
+export const blobToFile = (blob: Blob, name: string, type: string): File => {
+  return new File([blob], name, { type });
+};
+
+const uploadFile = async (file: File, tihldeAccessToken: string) => {
+  const compressedImage = await compressImage(file, {
+    maxSizeMB: 0.2,
+    maxWidthOrHeight: 300,
+    fileType: file.type,
+  });
+
+  const newFile = blobToFile(compressedImage, file.name, file.type);
+
+  const data = new FormData();
+
+  data.append("file", newFile);
+
+  const response = await fetch(`${env.NEXT_PUBLIC_LEPTON_API_URL}/upload/`, {
+    method: "POST",
+    body: data,
+    headers: {
+      "X-CSRF-Token": tihldeAccessToken,
+      Accept: "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to upload file: ${response}`);
+  }
+
+  const body = await response.json();
+
+  return body.url as string;
+};
+
+interface FileUploaderProps {
+  onSelect: (url: string) => void;
+}
+
+export default function FileUploader({ onSelect }: FileUploaderProps) {
+  const [imageFile, setImageFile] = useState<File | undefined>(undefined);
+  const { toast } = useToast();
+  const { data } = useSession();
+  const [uploadedImageUrl, setUploadedImageUrl] = useState<undefined | string>(
+    undefined,
+  );
+
+  const onChanged = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      if (e.target.files && e.target.files.length > 0) {
+        const file = e.target.files[0];
+        setImageFile(file);
+        if (file && data?.user.tihldeJWT) {
+          const url = await uploadFile(file, data.user.tihldeJWT);
+          setUploadedImageUrl(url!);
+
+          toast({
+            title: "Filen din ble lastet opp",
+          });
+          onSelect(url);
+        }
+      }
+    } catch (e) {
+      toast({
+        title: "Oops, det skjedde noe galt",
+        description: "Vennligst prøv igjen",
+      });
+    }
+  };
+
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="picture">Last opp bilde</Label>
+      <Input id="picture" type="file" onChange={onChanged} />
+      {uploadedImageUrl && (
+        <img src={uploadedImageUrl} alt="Ditt opplastede bilde" />
+      )}
+    </div>
+  );
+}

src/components/file-upload.tsx

@@ -22,10 +22,6 @@ export const env = createEnv({
       // VERCEL_URL doesn't include `https` so it cant be validated as a URL
       process.env.VERCEL ? z.string() : z.string().url(),
     ),
-    LEPTON_API_URL: z.string({
-      message:
-        "Legg til en URL som peker til Lepton backenden vår. Hvis du kjører denne lokalt, bruk 'http://localhost:8000', eller den offisielle på 'https://api.tihlde.org'",
-    }),
     ALLOWED_GROUP_SLUGS: z
       .string()
       .refine((i) => i.split(",").length > 0, {
@@ -43,6 +39,10 @@ export const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_LEPTON_API_URL: z.string({
+      message:
+        "Legg til en URL som peker til Lepton backenden vår. Hvis du kjører denne lokalt, bruk 'http://localhost:8000', eller den offisielle på 'https://api.tihlde.org'",
+    }),
   },
 
   /**
@@ -54,7 +54,7 @@ export const env = createEnv({
     NODE_ENV: process.env.NODE_ENV,
     NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
-    LEPTON_API_URL: process.env.LEPTON_API_URL,
+    NEXT_PUBLIC_LEPTON_API_URL: process.env.NEXT_PUBLIC_LEPTON_API_URL,
     ALLOWED_GROUP_SLUGS: process.env.ALLOWED_GROUP_SLUGS,
   },
   /**

src/env.js

@@ -21,6 +21,7 @@ declare module "next-auth" {
     id: string;
     nickname: string;
     role: UserRole;
+    tihldeJWT?: string;
   }
 
   // The session object only contains the user info
@@ -38,6 +39,7 @@ declare module "next-auth/jwt" {
       nickname: string;
       role: UserRole;
       id: string;
+      tihldeJWT?: string;
     };
   }
 }
@@ -51,6 +53,7 @@ export const authOptions: NextAuthOptions = {
           id: token.user.id,
           nickname: token.user.nickname,
           role: token.user.role,
+          tihldeJWT: token.user.tihldeJWT,
         },
       };
     },
@@ -62,6 +65,7 @@ export const authOptions: NextAuthOptions = {
             nickname: user.nickname,
             role: user.role,
             id: user.id,
+            tihldeJWT: user.tihldeJWT,
           },
         };
       }
@@ -129,12 +133,12 @@ export const authOptions: NextAuthOptions = {
           });
         }
 
-        const session = {
+        return {
           id: userId,
           nickname,
           role: getRoleForUser(memberships),
+          tihldeJWT: token,
         };
-        return session;
       },
     }),
     // Users can log in anonymously, using only a nickname,

src/server/auth.ts

@@ -8,12 +8,15 @@ import { env } from "../../../env";
 export const getTIHLDEMemberships = async (
   token: string,
 ): Promise<MembershipResponse> => {
-  const response = await fetch(`${env.LEPTON_API_URL}/users/me/memberships/`, {
-    headers: {
-      "Content-Type": "application/json",
-      "x-csrf-token": token,
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_LEPTON_API_URL}/users/me/memberships/`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-csrf-token": token,
+      },
     },
-  });
+  );
 
   if (!response.ok) {
     console.error(response.status, response.statusText, await response.json());

src/server/service/lepton/get-memberships.ts

@@ -10,12 +10,15 @@ export const getTIHLDEUser = async (
   token: string,
   username: string,
 ): Promise<TIHLDEUser> => {
-  const response = await fetch(`${env.LEPTON_API_URL}/users/${username}/`, {
-    headers: {
-      "Content-Type": "application/json",
-      "x-csrf-token": token,
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_LEPTON_API_URL}/users/${username}/`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-csrf-token": token,
+      },
     },
-  });
+  );
 
   if (!response.ok) {
     console.error(response.status, response.statusText, await response.json());

src/server/service/lepton/get-user.ts

@@ -4,13 +4,16 @@ export const loginToTIHLDE = async (
   username: string,
   password: string,
 ): Promise<string | null> => {
-  const response = await fetch(`${env.LEPTON_API_URL}/auth/login/`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
+  const response = await fetch(
+    `${env.NEXT_PUBLIC_LEPTON_API_URL}/auth/login/`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ user_id: username, password }),
     },
-    body: JSON.stringify({ user_id: username, password }),
-  });
+  );
 
   if (response.status !== 200) {
     console.error(response.status, response.statusText, await response.json());