Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nayalsaurav/resume-analyzer/llms.txt

Use this file to discover all available pages before exploring further.

Upload is a self-contained client component that houses the entire resume submission workflow — from the input form through the loading state to the results display. It owns all form state internally, orchestrates the call to the analyzeResume server action, and swaps between three distinct UI states depending on where the user is in the analysis flow.

​
Import & Usage

Upload takes no props and can be dropped directly into any page component. 
import { Upload } from "@/components/Upload";

// In a page component:
<Upload />

​
Internal State

All state is managed locally inside the component with useState. There are no external stores or props required.
StateTypeDescription
isProcessingbooleantrue while the AI analysis request is in flight
statusTextstringCurrent status message displayed during the processing state
fileFile | nullThe currently selected resume file; null when no file has been chosen
errorsFormErrorsPer-field validation error messages keyed by field name
feedbackFeedback | nullThe AI analysis result returned by analyzeResume; null until analysis completes
The FormErrors interface covers all four user-facing fields: 
interface FormErrors {
  companyName?: string;
  jobTitle?: string;
  jobDescription?: string;
  file?: string;
}

​
Form Fields

The form collects four pieces of information before analysis can begin.
​
companyName
string
required
The name of the company the candidate is applying to. Used by Gemini AI to tailor feedback to the employer context. Required — validation fails if empty.
​
jobTitle
string
required
The title of the role being applied for (e.g. “Senior Frontend Engineer”). Required — validation fails if empty.
​
jobDescription
string
required
The full job description text. Must be at least 50 characters to give the AI sufficient context for a meaningful comparison against the resume.
​
file
File
required
The candidate’s resume file. Accepted formats: PDF, DOC, and DOCX (enforced via the accept attribute on the file input). Maximum size: 10 MB.

​
UI States

The component renders one of three mutually exclusive states at a time: 
// Default state — shown when isProcessing is false and feedback is null.
// Renders the four-field form with inline validation errors and a submit button.

​
Form Submission Flow

When the user submits the form, handleSubmit executes the following steps in order:
  1. Validate all fields client-side; populate errors and abort if any field fails.
  2. Set isProcessing to true and statusText to "Analyzing your resume...".
  3. Call await analyzeResume({ companyName, jobTitle, jobDescription, file }).
  4. On success, call setFeedback(result) and setIsProcessing(false) to transition to the feedback state.
analyzeResume is a Next.js Server Action defined in @/app/actions/analyze-resume. The component never makes a raw fetch call — the server action boundary handles serialization, file upload to ImageKit, and the Gemini AI request.

​
resetForm()

The resetForm function is passed to FeedbackDisplay as the onReset callback. When the user clicks “Analyze Another Resume”, it restores all state to its initial values: 
const resetForm = () => {
  setFile(null);
  setFeedback(null);
  setErrors({});
  setIsProcessing(false);
};
This returns the component to the empty form state without a full page reload.

Build docs developers (and LLMs) love

Get started for freeTalk to us