Epic Next JS 15 Tutorial Part 5: File upload using server actions

In the previous tutorial, we completed our authentication system with Sign In and Sign Up functionality. Now we'll focus on building out our Dashboard and Profile Page with file upload capabilities using Next.js server actions.

• Part 1: Learn Next.js by building a website
• Part 2: Building Out The Hero Section of the homepage
• Part 3: Finishup up the homepage Features Section, TopNavigation and Footer
• Part 4: How to handle login and Authentification in Next.js
• Part 5: Building out the Dashboard page and upload file using NextJS server actions
• Part 6: Get Video Transcript with AI SDK
• Part 7: Strapi CRUD permissions
• Part 8: Search & pagination in Nextjs
• Part 9: Backend deployment to Strapi Cloud
• Part 10: Frontend deployment to Vercel

Welcome to Part 5 of our Epic Next.js tutorial series! In the previous tutorial, we implemented authentication using HTTPOnly cookies and protected our routes with Next.js middleware.

In this section, we'll complete our Dashboard and Profile Page by implementing file upload functionality using Next.js server actions. By the end of this tutorial, you'll have a solid understanding of handling file uploads, forms, and server actions in Next.js 15.

Currently, our Dashboard Page looks like the following.

Let's start by creating a proper dashboard layout. Navigate to src/app/(protected)dashboard, create a file called layout.tsx, and add the following code:

1import Link from "next/link";
2import { SVGProps } from "react";
3
4const styles = {
5  layout: "h-screen grid grid-cols-[240px_1fr]",
6  sidebar: "border-r bg-gray-100/40 dark:bg-gray-800/40",
7  sidebarContent: "flex h-full max-h-screen flex-col gap-2",
8  header: "flex h-[60px] items-center border-b px-6",
9  headerLink: "flex items-center gap-2 font-semibold",
10  headerIcon: "h-6 w-6",
11  headerText: "",
12  navigation: "flex-1 overflow-auto py-2",
13  navGrid: "grid items-start px-4 text-sm font-medium",
14  navLink:
15    "flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50",
16  navIcon: "h-4 w-4",
17  main: "flex flex-col overflow-scroll",
18};
19
20export default function DashboardLayout({
21  children,
22}: {
23  readonly children: React.ReactNode;
24}) {
25  return (
26    <div className={styles.layout}>
27      <nav className={styles.sidebar}>
28        <div className={styles.sidebarContent}>
29          <div className={styles.header}>
30            <Link className={styles.headerLink} href="/dashboard">
31              <LayoutDashboardIcon className={styles.headerIcon} />
32              <span className={styles.headerText}>Dashboard</span>
33            </Link>
34          </div>
35          <div className={styles.navigation}>
36            <nav className={styles.navGrid}>
37              <Link className={styles.navLink} href="/dashboard/summaries">
38                <ViewIcon className={styles.navIcon} />
39                Summaries
40              </Link>
41
42              <Link className={styles.navLink} href="/dashboard/account">
43                <UsersIcon className={styles.navIcon} />
44                Account
45              </Link>
46            </nav>
47          </div>
48        </div>
49      </nav>
50      <main className={styles.main}>{children}</main>
51    </div>
52  );
53}
54
55function LayoutDashboardIcon(props: SVGProps<SVGSVGElement>) {
56  return (
57    <svg
58      {...props}
59      xmlns="http://www.w3.org/2000/svg"
60      width="24"
61      height="24"
62      viewBox="0 0 24 24"
63      fill="none"
64      stroke="currentColor"
65      strokeWidth="2"
66      strokeLinecap="round"
67      strokeLinejoin="round"
68    >
69      <rect width="7" height="9" x="3" y="3" rx="1" />
70      <rect width="7" height="5" x="14" y="3" rx="1" />
71      <rect width="7" height="9" x="14" y="12" rx="1" />
72      <rect width="7" height="5" x="3" y="16" rx="1" />
73    </svg>
74  );
75}
76
77function PieChartIcon(props: SVGProps<SVGSVGElement>) {
78  return (
79    <svg
80      {...props}
81      xmlns="http://www.w3.org/2000/svg"
82      width="24"
83      height="24"
84      viewBox="0 0 24 24"
85      fill="none"
86      stroke="currentColor"
87      strokeWidth="2"
88      strokeLinecap="round"
89      strokeLinejoin="round"
90    >
91      <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
92      <path d="M22 12A10 10 0 0 0 12 2v10z" />
93    </svg>
94  );
95}
96
97function UsersIcon(props: SVGProps<SVGSVGElement>) {
98  return (
99    <svg
100      {...props}
101      xmlns="http://www.w3.org/2000/svg"
102      width="24"
103      height="24"
104      viewBox="0 0 24 24"
105      fill="none"
106      stroke="currentColor"
107      strokeWidth="2"
108      strokeLinecap="round"
109      strokeLinejoin="round"
110    >
111      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
112      <circle cx="9" cy="7" r="4" />
113      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
114      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
115    </svg>
116  );
117}
118
119function ViewIcon(props: SVGProps<SVGSVGElement>) {
120  return (
121    <svg
122      {...props}
123      xmlns="http://www.w3.org/2000/svg"
124      width="24"
125      height="24"
126      viewBox="0 0 24 24"
127      fill="none"
128      stroke="currentColor"
129      strokeWidth="2"
130      strokeLinecap="round"
131      strokeLinejoin="round"
132    >
133      <path d="M5 12s2.545-5 7-5c4.454 0 7 5 7 5s-2.546 5-7 5c-4.455 0-7-5-7-5z" />
134      <path d="M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
135      <path d="M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" />
136      <path d="M21 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2" />
137    </svg>
138  );
139}

After adding this layout, your dashboard UI should look like the following:

Updating Top Header To Include Username and Logout Button

Currently, our Top Header doesn't display information about the logged-in user. Let's update it to show the username and provide a logout option.

Navigate to src/components/custom/header.tsx and make the following changes.

First, let's import our authentication service that we created in the previous tutorial to retrieve the logged-in user's data:

1import { services } from "@/data/services";

Next, let's call this service inside our Header component:

1const user = await services.auth.getUserMeService();
2console.log(user);

If you're logged in, you should see your user data in the console:

1{
2  success: true,
3  data: {
4    id: 7,
5    documentId: 'wq9a4sm2kmw6l9n1tn8mav8t',
6    username: 'testuser',
7    email: 'testuser@email.com',
8    provider: 'local',
9    confirmed: true,
10    blocked: false,
11    createdAt: '2025-08-15T19:40:58.276Z',
12    updatedAt: '2025-08-15T19:40:58.276Z',
13    publishedAt: '2025-08-15T19:40:58.284Z'
14  },
15  error: undefined,
16  status: 200
17}

We can use the success key to conditionally render either our Sign Up button or the user's name and logout button.

Let's create a LoggedInUser component to handle the logged-in user display. Create a new file src/components/custom/logged-in-user.tsx:

1import Link from "next/link";
2import { LogoutButton } from "./logout-button";
3
4interface ILoggedInUserProps {
5  username: string;
6  email: string;
7}
8
9export function LoggedInUser({
10  userData,
11}: {
12  readonly userData: ILoggedInUserProps;
13}) {
14  return (
15    <div className="flex gap-2">
16      <Link
17        href="/dashboard/account"
18        className="font-semibold hover:text-primary"
19      >
20        {userData.username}
21      </Link>
22      <LogoutButton />
23    </div>
24  );
25}

Now, let's update our header.tsx file. Find this section:

1<div className={styles.actions}>
2  <Link href={ctaButton.href}>
3    <Button>{ctaButton.label}</Button>
4  </Link>
5</div>

Replace it with the conditional rendering logic:

1<div className={styles.actions}>
2  {user.status ? (
3    <LoggedInUser userData={user.data!} />
4  ) : (
5    <Link href={ctaButton.href}>
6      <Button>{ctaButton.label}</Button>
7    </Link>
8  )}
9</div>

Don't forget to import LoggedInUser.

1import { LoggedInUser } from "@/components/custom/logged-in-user";

The completed code in our header.tsx file should look like the following.

1import Link from "next/link";
2import type { THeader } from "@/types";
3
4import { services } from "@/data/services";
5
6import { Logo } from "@/components/custom/logo";
7import { Button } from "@/components/ui/button";
8import { LoggedInUser } from "@/components/custom/logged-in-user";
9
10const styles = {
11  header:
12    "flex  items-center justify-between px-4 py-3 bg-white shadow-md dark:bg-gray-800",
13  actions: "flex items-center gap-4",
14  summaryContainer: "flex-1 flex justify-center max-w-2xl mx-auto",
15};
16
17interface IHeaderProps {
18  data?: THeader | null;
19}
20
21export async function Header({ data }: IHeaderProps) {
22  if (!data) return null;
23
24  const user = await services.auth.getUserMeService();
25  const { logoText, ctaButton } = data;
26  return (
27    <div className={styles.header}>
28      <Logo text={logoText.label} />
29      <div className={styles.actions}>
30        {user.success && user.data ? (
31          <LoggedInUser userData={user.data} />
32        ) : (
33          <Link href={ctaButton.href}>
34            <Button>{ctaButton.label}</Button>
35          </Link>
36        )}
37      </div>
38    </div>
39  );
40}

Perfect! Now when you're logged in, you should see the username and logout button in the header:

Let's make one more improvement to our hero-section.tsx file in the src/components/custom folder.

One of the great features of React Server Components is that they can handle their own data fetching. Let's update the hero section so that logged-in users see a "Dashboard" button instead of the default call-to-action.

Here's the updated hero section code:

1import Link from "next/link";
2import { services } from "@/data/services";
3import type { TImage, TLink } from "@/types";
4
5import { StrapiImage } from "./strapi-image";
6
7export interface IHeroSectionProps {
8  id: number;
9  documentId: string;
10  __component: string;
11  heading: string;
12  subHeading: string;
13  image: TImage;
14  link: TLink;
15}
16
17const styles = {
18  header: "relative h-[600px] overflow-hidden",
19  backgroundImage: "absolute inset-0 object-cover w-full h-full",
20  overlay:
21    "relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black/50",
22  heading: "text-4xl font-bold md:text-5xl lg:text-6xl",
23  subheading: "mt-4 text-lg md:text-xl lg:text-2xl",
24  button:
25    "mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100 transition-colors",
26};
27
28export async function HeroSection({ data }: { data: IHeroSectionProps }) {
29  if (!data) return null;
30  const user = await services.auth.getUserMeService();
31  const userLoggedIn = user.success;
32
33  const { heading, subHeading, image, link } = data;
34  return (
35    <header className={styles.header}>
36      <StrapiImage
37        alt={image.alternativeText ?? "no alternative text"}
38        className="absolute inset-0 object-cover w-full h-full aspect/16:9"
39        src={image.url}
40        height={1080}
41        width={1920}
42      />
43      <div className={styles.overlay}>
44        <h1 className={styles.heading}>{heading}</h1>
45        <p className={styles.subheading}>{subHeading}</p>
46        <Link
47          className={styles.button}
48          href={userLoggedIn ? "/dashboard" : link.href}
49        >
50          {userLoggedIn ? "Dashboard" : link.label}
51        </Link>
52      </div>
53    </header>
54  );
55}

Now when a user is logged in, the Hero Section will display a "Dashboard" button:

Now let's build our Account page where users can manage their profile information.

Creating Our User Profile Page (Account Page)

Let's create the account page structure. Navigate to the dashboard folder and create an account folder with a page.tsx file inside.

Add the following code to create a basic account page structure:

1import { services } from "@/data/services";
2import { validateApiResponse } from "@/lib/error-handler";
3// import { ProfileForm } from "@/components/forms/profile-form";
4// import { ProfileImageForm } from "@/components/forms/profile-image-form";
5
6export default async function AccountRoute() {
7  const user = await services.auth.getUserMeService();
8  const userData = validateApiResponse(user, "user profile");
9  const userImage = userData?.image;
10
11  return (
12    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 p-4">
13      {/* <ProfileForm user={userData} className="col-span-3" /> */}
14      {/* <ProfileImageForm image={userImage} className="col-span-2" /> */}
15    </div>
16  );
17}

I've commented out the components we haven't created yet so the app can render without errors. Next, we'll build the ProfileForm and ProfileImageForm components.

Create a Form To Update User's Details

Navigate to src/components/forms and create a profile-form.tsx file.

Add the following code to create our profile form component:

1"use client";
2import React from "react";
3import { cn } from "@/lib/utils";
4
5import type { TAuthUser } from "@/types";
6
7import { SubmitButton } from "@/components/custom/submit-button";
8import { Input } from "@/components/ui/input";
9import { Textarea } from "@/components/ui/textarea";
10
11interface IProfileFormProps {
12  user?: TAuthUser | null;
13}
14
15const styles = {
16  form: "space-y-4",
17  container: "space-y-4 grid",
18  topRow: "grid grid-cols-3 gap-4",
19  nameRow: "grid grid-cols-2 gap-4",
20  fieldGroup: "space-y-2",
21  textarea: "resize-none border rounded-md w-full h-[224px] p-2",
22  buttonContainer: "flex justify-end",
23  countBox:
24    "flex items-center justify-center h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none",
25  creditText: "font-bold text-md mx-1",
26};
27
28export function ProfileForm({
29  user,
30  className,
31}: IProfileFormProps & {
32  readonly className?: string;
33}) {
34  if (!user) {
35    return (
36      <div className={cn(styles.form, className)}>
37        <p>Unable to load profile data</p>
38      </div>
39    );
40  }
41
42  return (
43    <form className={cn(styles.form, className)}>
44      <div className={styles.container}>
45        <div className={styles.topRow}>
46          <Input
47            id="username"
48            name="username"
49            placeholder="Username"
50            defaultValue={user.username || ""}
51            disabled
52          />
53          <Input
54            id="email"
55            name="email"
56            placeholder="Email"
57            defaultValue={user.email || ""}
58            disabled
59          />
60          <CountBox text={user.credits || 0} />
61        </div>
62
63        <div className={styles.nameRow}>
64          <div className={styles.fieldGroup}>
65            <Input
66              id="firstName"
67              name="firstName"
68              placeholder="First Name"
69              defaultValue={user.firstName || ""}
70            />
71          </div>
72          <div className={styles.fieldGroup}>
73            <Input
74              id="lastName"
75              name="lastName"
76              placeholder="Last Name"
77              defaultValue={user.lastName || ""}
78            />
79          </div>
80        </div>
81        <div className={styles.fieldGroup}>
82          <Textarea
83            id="bio"
84            name="bio"
85            placeholder="Write your bio here..."
86            className={styles.textarea}
87            defaultValue={user.bio || ""}
88          />
89        </div>
90      </div>
91      <div className={styles.buttonContainer}>
92        <SubmitButton text="Update Profile" loadingText="Saving Profile" />
93      </div>
94    </form>
95  );
96}
97
98function CountBox({ text }: { text: number }) {
99  const color = text > 0 ? "text-primary" : "text-red-500";
100  return (
101    <div className={styles.countBox}>
102      You have<span className={cn(styles.creditText, color)}>{text}</span>
103      credit(s)
104    </div>
105  );
106}

Since we're using a new Shadcn UI component (Textarea), let's install it:

npx shadcn@latest add textarea

Let's uncomment our ProfileForm in our dashboard/account/page.tsx file.

1import { services } from "@/data/services";
2import { validateApiResponse } from "@/lib/error-handler";
3import { ProfileForm } from "@/components/forms/profile-form";
4// import { ProfileImageForm } from "@/components/forms/profile-image-form";
5
6export default async function AccountRoute() {
7  const user = await services.auth.getUserMeService();
8  const userData = validateApiResponse(user, "user profile");
9  const userImage = userData?.image;
10
11  return (
12    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 p-4">
13      <ProfileForm user={userData} className="col-span-3" />
14      {/* <ProfileImageForm image={userImage} className="col-span-2" /> */}
15    </div>
16  );
17}

Restart your Next.js development server, and you should see the following:

You'll notice two issues with the current form:

1. We're not displaying the user's First Name, Last Name, Bio, or Credits because these fields don't exist in our Strapi user schema yet.

2. The form can't be submitted because we haven't implemented the server action logic yet.

Let's address the first issue by updating our user schema in Strapi, then we'll implement the server action functionality.

Updating User Data Schema In Our Backend

In your Strapi Admin area, navigate to the Content-Type Builder and select the User collection type:

Add the following fields to extend the User collection type:

For the credits field, we'll set a default value of 0 that new users will start with. You can configure this by clicking the advanced settings button and filling in the default value field.

Once you've added all the fields, your User collection type should look like this:

Now let's manually update our user's information in Strapi to test if the data appears correctly in our frontend:

After updating the user data, navigate to your Account page in the frontend. You should now see the updated information:

Now let's implement the form update functionality using server actions.

Updating User Data With Server Actions

First, let's create the updateProfileAction that will handle our form submission.

Navigate to src/data/actions, create a new file called profile.ts, and add the following code:

1"use server";
2import { z } from "zod";
3
4import { services } from "@/data/services";
5
6import {
7  ProfileFormSchema,
8  type ProfileFormState,
9} from "@/data/validation/profile";
10
11export async function updateProfileAction(
12  prevState: ProfileFormState,
13  formData: FormData
14): Promise<ProfileFormState> {
15  console.log("Hello From Login User Action");
16
17  const fields = Object.fromEntries(formData);
18
19  console.dir(fields);
20
21  const validatedFields = ProfileFormSchema.safeParse(fields);
22
23  if (!validatedFields.success) {
24    const flattenedErrors = z.flattenError(validatedFields.error);
25    console.log("Validation failed:", flattenedErrors.fieldErrors);
26    return {
27      success: false,
28      message: "Validation failed",
29      strapiErrors: null,
30      zodErrors: flattenedErrors.fieldErrors,
31      data: {
32        ...prevState.data,
33        ...fields,
34      },
35    };
36  }
37
38  console.log("Validation successful:", validatedFields.data);
39
40  const responseData = await services.profile.updateProfileService(
41    validatedFields.data
42  );
43
44  if (!responseData) {
45    return {
46      success: false,
47      message: "Ops! Something went wrong. Please try again.",
48      strapiErrors: null,
49      zodErrors: null,
50      data: {
51        ...prevState.data,
52        ...fields,
53      },
54    };
55  }
56
57  if (responseData.error) {
58    return {
59      success: false,
60      message: "Failed to Login.",
61      strapiErrors: responseData.error,
62      zodErrors: null,
63      data: {
64        ...prevState.data,
65        ...fields,
66      },
67    };
68  }
69
70  console.log("#############");
71  console.log("User Login Successfully", responseData);
72  console.log("#############");
73
74  return {
75    success: false,
76    message: "Successfully updated form",
77    strapiErrors: null,
78    zodErrors: null,
79    data: {
80      ...prevState.data,
81      ...fields,
82    },
83  };
84}

And don't forget to export it from our index.ts file:

1import {
2  registerUserAction,
3  loginUserAction,
4  logoutUserAction,
5  getAuthTokenAction,
6} from "./auth";
7import { updateProfileAction } from "./profile";
8
9export const actions = {
10  auth: {
11    registerUserAction,
12    loginUserAction,
13    logoutUserAction,
14    getAuthTokenAction,
15  },
16  profile: {
17    updateProfileAction,
18  },
19};

We've created similar actions before, so this pattern should be familiar. The action expects three things we need to create:

• updateProfileService - handles the API call to Strapi
• ProfileFormSchema - Zod schema for validation
• ProfileFormState type - TypeScript type for form state

Let's start with the Zod validation schema, which will ensure data integrity before sending it to our backend.

Create a profile.ts file inside the validation folder and add the following validation schemas:

1import { z } from "zod";
2
3export const ProfileFormSchema = z.object({
4  firstName: z
5    .string()
6    .min(1, "First name is required")
7    .max(50, "First name must be less than 50 characters"),
8  lastName: z
9    .string()
10    .min(1, "Last name is required")
11    .max(50, "Last name must be less than 50 characters"),
12  bio: z
13    .string()
14    .min(10, "Bio must be at least 10 characters")
15    .max(500, "Bio must be less than 500 characters"),
16});
17
18export type ProfileFormValues = z.infer<typeof ProfileFormSchema>;
19
20export type ProfileFormState = {
21  success?: boolean;
22  message?: string;
23  data?: {
24    firstName?: string;
25    lastName?: string;
26    bio?: string;
27  };
28  strapiErrors?: {
29    status: number;
30    name: string;
31    message: string;
32    details?: Record<string, string[]>;
33  } | null;
34  zodErrors?: {
35    firstName?: string[];
36    lastName?: string[];
37    bio?: string[];
38  } | null;
39};
40
41export const ProfileImageFormSchema = z.object({
42  image: z
43    .instanceof(File)
44    .refine((file) => file.size > 0, "Image is required")
45    .refine((file) => file.size <= 5000000, "Image must be less than 5MB")
46    .refine(
47      (file) => ["image/jpeg", "image/png", "image/webp"].includes(file.type),
48      "Image must be JPEG, PNG, or WebP format"
49    ),
50});
51
52export type ProfileImageFormValues = z.infer<typeof ProfileImageFormSchema>;
53
54export type ProfileImageFormState = {
55  success?: boolean;
56  message?: string;
57  data?: {
58    image?: File;
59  };
60  strapiErrors?: {
61    status: number;
62    name: string;
63    message: string;
64    details?: Record<string, string[]>;
65  } | null;
66  zodErrors?: {
67    image?: string[];
68  } | null;
69};

Now let's create the updateProfileService method. In the services folder, create a file named profile.ts and add the following code:

1import { getStrapiURL } from "@/lib/utils";
2import type { TStrapiResponse, TAuthUser } from "@/types";
3import { services } from "@/data/services";
4import { actions } from "@/data/actions";
5import { api } from "@/data/data-api";
6
7type TUpdateProfile = {
8  firstName: string;
9  lastName: string;
10  bio: string;
11};
12
13const baseUrl = getStrapiURL();
14
15export async function updateProfileService(
16  profileData: TUpdateProfile
17): Promise<TStrapiResponse<TAuthUser>> {
18  const userId = (await services.auth.getUserMeService()).data?.id;
19  if (!userId) throw new Error("User Id is required");
20
21  const authToken = await actions.auth.getAuthTokenAction();
22  if (!authToken) throw new Error("You are not authorized");
23
24  const url = new URL("/api/users/" + userId, baseUrl);
25  const result = await api.put<TAuthUser, TUpdateProfile>(
26    url.href,
27    profileData,
28    { authToken }
29  );
30
31  console.log("######### actual profile update response");
32  console.dir(result, { depth: null });
33
34  return result;
35}

And finally let's add it to our export in the index.ts file so we can use it:

1import {
2  registerUserService,
3  loginUserService,
4  getUserMeService,
5} from "./auth";
6
7import { updateProfileService } from "./profile";
8
9export const services = {
10  auth: {
11    registerUserService,
12    loginUserService,
13    getUserMeService,
14  },
15  profile: {
16    updateProfileService,
17  },
18};

Perfect! Now we have all the pieces needed to implement the profile update functionality.

Let's update our profile-form.tsx file to connect it with our server action:

First import action, useActionState and our ProfileFormState:

1import { actions } from "@/data/actions";
2import { useActionState } from "react";
3import type { ProfileFormState } from "@/data/validation/profile";

Next, let's import our ZodErrors and StrapiErrors components so we can use them in our form:

1import { ZodErrors } from "@/components/custom/zod-errors";
2import { StrapiErrors } from "@/components/custom/strapi-errors";

Now, let's define our initial form state:

1const INITIAL_STATE: ProfileFormState = {
2  success: false,
3  message: undefined,
4  strapiErrors: null,
5  zodErrors: null,
6};

Once we have that, we can now define our action state:

1const [formState, formAction] = useActionState(
2  actions.profile.updateProfileAction,
3  INITIAL_STATE
4);

Now that we have our action we will update our form tag with the following.

1  <form action={formAction} className={cn(styles.form, className)}>

Then we will add our ZodError for the fields that we are going to update.

1<div className={styles.nameRow}>
2  <div className={styles.fieldGroup}>
3    <Input
4      id="firstName"
5      name="firstName"
6      placeholder="First Name"
7      defaultValue={formState?.data?.firstName || user.firstName || ""}
8    />
9    <ZodErrors error={formState?.zodErrors?.firstName} />
10  </div>
11  <div className={styles.fieldGroup}>
12    <Input
13      id="lastName"
14      name="lastName"
15      placeholder="Last Name"
16      defaultValue={formState?.data?.lastName || user.lastName || ""}
17    />
18    <ZodErrors error={formState?.zodErrors?.lastName} />
19  </div>
20</div>
21  <div className={styles.fieldGroup}>
22    <Textarea
23      id="bio"
24      name="bio"
25      placeholder="Write your bio here..."
26      className={styles.textarea}
27      defaultValue={formState?.data?.bio || user.bio || ""}
28    />
29    <ZodErrors error={formState?.zodErrors?.bio} />
30  </div>

Notice we are also updating our defaultValue to use our formState data.

Finally we will add our Strapi Errors component:

1<div className={styles.buttonContainer}>
2  <SubmitButton text="Update Profile" loadingText="Saving Profile" />
3  <StrapiErrors error={formState?.strapiErrors} />
4</div>

The final code should look like the following inside your profile-form.tsx file.

1"use client";
2import React from "react";
3import { cn } from "@/lib/utils";
4
5import { actions } from "@/data/actions";
6import { useActionState } from "react";
7import type { ProfileFormState } from "@/data/validation/profile";
8
9import type { TAuthUser } from "@/types";
10
11import { SubmitButton } from "@/components/custom/submit-button";
12import { Input } from "@/components/ui/input";
13import { Textarea } from "@/components/ui/textarea";
14
15import { ZodErrors } from "@/components/custom/zod-errors";
16import { StrapiErrors } from "@/components/custom/strapi-errors";
17
18const styles = {
19  form: "space-y-4",
20  container: "space-y-4 grid",
21  topRow: "grid grid-cols-3 gap-4",
22  nameRow: "grid grid-cols-2 gap-4",
23  fieldGroup: "space-y-2",
24  textarea: "resize-none border rounded-md w-full h-[224px] p-2",
25  buttonContainer: "flex justify-end",
26  countBox:
27    "flex items-center justify-center h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none",
28  creditText: "font-bold text-md mx-1",
29};
30
31interface IProfileFormProps {
32  user?: TAuthUser | null;
33}
34
35const INITIAL_STATE: ProfileFormState = {
36  success: false,
37  message: undefined,
38  strapiErrors: null,
39  zodErrors: null,
40};
41
42export function ProfileForm({
43  user,
44  className,
45}: IProfileFormProps & {
46  readonly className?: string;
47}) {
48  const [formState, formAction] = useActionState(
49    actions.profile.updateProfileAction,
50    INITIAL_STATE
51  );
52  if (!user) {
53    return (
54      <div className={cn(styles.form, className)}>
55        <p>Unable to load profile data</p>
56      </div>
57    );
58  }
59
60  return (
61    <form action={formAction} className={cn(styles.form, className)}>
62      <div className={styles.container}>
63        <div className={styles.topRow}>
64          <Input
65            id="username"
66            name="username"
67            placeholder="Username"
68            defaultValue={user.username || ""}
69            disabled
70          />
71          <Input
72            id="email"
73            name="email"
74            placeholder="Email"
75            defaultValue={user.email || ""}
76            disabled
77          />
78          <CountBox text={user.credits || 0} />
79        </div>
80
81        <div className={styles.nameRow}>
82          <div className={styles.fieldGroup}>
83            <Input
84              id="firstName"
85              name="firstName"
86              placeholder="First Name"
87              defaultValue={formState?.data?.firstName || user.firstName || ""}
88            />
89            <ZodErrors error={formState?.zodErrors?.firstName} />
90          </div>
91          <div className={styles.fieldGroup}>
92            <Input
93              id="lastName"
94              name="lastName"
95              placeholder="Last Name"
96              defaultValue={formState?.data?.lastName || user.lastName || ""}
97            />
98            <ZodErrors error={formState?.zodErrors?.lastName} />
99          </div>
100        </div>
101        <div className={styles.fieldGroup}>
102          <Textarea
103            id="bio"
104            name="bio"
105            placeholder="Write your bio here..."
106            className={styles.textarea}
107            defaultValue={formState?.data?.bio || user.bio || ""}
108          />
109          <ZodErrors error={formState?.zodErrors?.bio} />
110        </div>
111      </div>
112      <div className={styles.buttonContainer}>
113        <SubmitButton text="Update Profile" loadingText="Saving Profile" />
114      </div>
115      <StrapiErrors error={formState?.strapiErrors} />
116    </form>
117  );
118}
119
120function CountBox({ text }: { text: number }) {
121  const color = text > 0 ? "text-primary" : "text-red-500";
122  return (
123    <div className={styles.countBox}>
124      You have<span className={cn(styles.creditText, color)}>{text}</span>
125      credit(s)
126    </div>
127  );
128}

You might be wondering: "How does the system know which user to update?"

Looking at our updateProfileService, you'll see how we handle this:

1export async function updateProfileService(
2  profileData: TUpdateProfile
3): Promise<TStrapiResponse<TAuthUser>> {
4  const userId = (await services.auth.getUserMeService()).data?.id;
5  if (!userId) throw new Error("User Id is required");
6
7  const authToken = await actions.auth.getAuthTokenAction();
8  if (!authToken) throw new Error("You are not authorized");
9
10  const url = new URL("/api/users/" + userId, baseUrl);
11  const result = await api.put<TAuthUser, TUpdateProfile>(
12    url.href,
13    profileData,
14    { authToken }
15  );
16
17  console.log("######### actual profile update response");
18  console.dir(result, { depth: null });
19
20  return result;
21}

You will see that we are getting our logged in user from Strapi and checking if they exists.

1const userId = (await services.auth.getUserMeService()).data?.id;
2if (!userId) throw new Error("User Id is required");

Now let's test our Profile Form. Before it works, we need to configure the proper permissions in Strapi.

To allow authenticated users to update their profiles, we need to grant the appropriate permissions in Strapi's admin panel:

Important Security Note: In a production application, you should implement additional policies to ensure users can only update their own profile data. We'll cover advanced security patterns in a future tutorial.

Let's try to update our profile and see if it works.

Excellent! Now that we can update profile information, let's implement file upload functionality.

Implementing File Upload with Next.js Server Actions

File upload is an important part of every applications. Let's build a user-friendly image picker component first.

Navigate to src/components/custom, create a file called image-picker.tsx, and add the following code:

1"use client";
2import React, { useState, useRef } from "react";
3import { StrapiImage } from "./strapi-image";
4
5import { Input } from "@/components/ui/input";
6import { Label } from "@/components/ui/label";
7
8interface ImagePickerProps {
9  id: string;
10  name: string;
11  label: string;
12  showCard?: boolean;
13  defaultValue?: string;
14  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
15}
16
17function generateDataUrl(file: File, callback: (imageUrl: string) => void) {
18  const reader = new FileReader();
19  reader.onload = () => callback(reader.result as string);
20  reader.readAsDataURL(file);
21}
22
23function ImagePreview({ dataUrl }: { readonly dataUrl: string }) {
24  return (
25    <StrapiImage
26      src={dataUrl}
27      alt="preview"
28      height={200}
29      width={200}
30      className="rounded-lg w-full object-cover"
31    />
32  );
33}
34
35function ImageCard({
36  dataUrl,
37  fileInput,
38}: {
39  readonly dataUrl: string;
40  readonly fileInput: React.RefObject<HTMLInputElement | null>;
41}) {
42  const imagePreview = dataUrl ? (
43    <ImagePreview dataUrl={dataUrl} />
44  ) : (
45    <p>No image selected</p>
46  );
47
48  return (
49    <div className="w-full relative">
50      <div className=" flex items-center space-x-4 rounded-md border p-4">
51        {imagePreview}
52      </div>
53      <button
54        onClick={() => fileInput.current?.click()}
55        className="w-full absolute inset-0"
56        type="button"
57      ></button>
58    </div>
59  );
60}
61
62export default function ImagePicker({
63  id,
64  name,
65  label,
66  defaultValue,
67}: Readonly<ImagePickerProps>) {
68  const fileInput = useRef<HTMLInputElement>(null);
69  const [dataUrl, setDataUrl] = useState<string | null>(defaultValue ?? null);
70
71  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
72    const file = e.target.files?.[0];
73    if (file) generateDataUrl(file, setDataUrl);
74  };
75
76  return (
77    <React.Fragment>
78      <div className="hidden">
79        <Label htmlFor={name}>{label}</Label>
80        <Input
81          type="file"
82          id={id}
83          name={name}
84          onChange={handleFileChange}
85          ref={fileInput}
86          accept="image/*"
87        />
88      </div>
89      <ImageCard dataUrl={dataUrl ?? ""} fileInput={fileInput} />
90    </React.Fragment>
91  );
92}