feat: integrate image upload API for application

[MayankBansal12]

Date: 01-02-26

Developer Name: @MayankBansal12

---

Issue Ticket Number:-

• feat: integrate APIs in onboarding form for create application #1140

Description:

• Modify func to call POST API to handle image upload
• Add tests for image upload in applications

Is Under Feature Flag

• Yes
• No

Database changes

• Yes
• No

Breaking changes (If your feature is breaking/missing something please mention pending tickets)

• Yes
• No

Is Development Tested?

• Yes
• No

Tested in staging?

• Yes
• No

Add relevant Screenshot below ( e.g test coverage etc. )

screencast

Screencast.from.2026-02-21.19-06-10.mp4

tests

[coderabbitai]

Walkthrough

This PR adds API-based image upload functionality to the new-join-steps component. Changes include a new profile image upload endpoint constant, an async image upload handler with FormData integration, 2MB file size validation, robust error handling, and comprehensive integration tests.

Changes

Cohort / File(s)	Summary
Image Preview Template app/components/new-join-steps/new-step-one.hbs	Added data-test-image-preview attribute to the image preview element for improved test accessibility.
Image Upload Component Logic app/components/new-join-steps/new-step-one.js	Converted handleImageSelect to async method using API-based FormData upload. Integrated APPLICATION_PROFILE_IMAGE_URL, TOAST_OPTIONS, and apiRequest utility. Added 2MB file size validation alongside existing type validation. Includes try/catch/finally with proper state management for upload status.
API Constants app/constants/apis.js	Added APPLICATION_PROFILE_IMAGE_URL constant defining the profile image upload endpoint.
Integration Tests tests/integration/components/new-join-steps/new-step-one-test.js	Added four comprehensive test cases covering file type rejection, 2MB size limit enforcement, successful upload flow with preview update, and API error handling with appropriate toast notifications.

Sequence Diagram

sequenceDiagram
    actor User
    participant Component as NewStepOne<br/>Component
    participant API as API Server
    participant Toast as Toast Service

    User->>Component: Select image file
    Component->>Component: Validate file type
    alt Invalid type
        Component->>Toast: Show error (invalid type)
    else Invalid size (>2MB)
        Component->>Toast: Show error (size limit)
    else Valid file
        Component->>Component: Set isImageUploading=true
        Component->>API: POST FormData with image
        alt API Success
            API-->>Component: Return image URL
            Component->>Component: Convert to data URL<br/>Update imageUrl
            Component->>Component: Set data-test attr
            Component->>Toast: Show success toast
        else API Error
            API-->>Component: Error response
            Component->>Toast: Show error (API message)
        end
        Component->>Component: Set isImageUploading=false
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: integrate create application API in onboarding form #1139: Modifies the same component file with API-based image upload refactoring and introduces related constants and utilities.

Suggested reviewers

• AnujChhikara
• Suvidh-kaushik
• iamitprakash

Poem

🐰 A hop, skip and upload we go,
FormData flows to servers below,
Validations catch what shouldn't sail,
Two meg limit won't fail,
Success toasts bloom, errors we know! 📸

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: integrating an image upload API for applications, which matches the core modifications across all files in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing the modification of a function to call a POST API for image uploads and the addition of tests for this functionality.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/image-upload

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying www-rds with    Cloudflare Pages

Latest commit:	1709989
Status:	✅  Deploy successful!
Preview URL:	https://a4d316cf.www-rds.pages.dev
Branch Preview URL:	https://feat-image-upload.www-rds.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 6

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/components/new-join-steps/new-step-one.js`:
- Around line 116-130: The success toast uses TOAST_OPTIONS but the error toasts
do not, causing inconsistent toast behavior; update all toast calls in this
component (this.toast.success and both this.toast.error usages inside the upload
flow) to pass the same TOAST_OPTIONS argument so success and error messages
share the same display configuration.
- Line 129: Remove the debug console.error call and replace it with the
application's proper logging/observability mechanism: locate the
console.error('Image upload error:', error) statement in the image upload
handler inside new-step-one.js and either remove it or call the centralized
logger/observability utility (e.g., logger.error or Sentry.captureException)
with the error and contextual metadata (e.g., "image upload" or relevant
identifiers); ensure to import the logging utility if not already imported and
preserve existing error-handling flow (rethrow or surface user-facing error)
after logging.
- Around line 95-133: The code uses FileReader/readAsDataURL causing a race and
risks never saving the server-returned URL; remove the FileReader usage in the
upload flow inside the try block (delete reader, reader.onload and
reader.readAsDataURL), and after parsing response.json() in the apiRequest call
(APPLICATION_PROFILE_IMAGE_URL) immediately validate that data.url ||
data.picture is present (assign to imageUrl); if missing, treat as error
(toast.error and skip success path); otherwise set this.imagePreview = imageUrl
and call this.updateFieldValue?.('imageUrl', imageUrl) immediately, then show
the success toast; keep the existing catch/finally to reset
this.isImageUploading but ensure the success path happens before finally exits.

In `@tests/integration/components/new-join-steps/new-step-one-test.js`:
- Around line 40-44: The test uses this.toast.error.calledWith(...) which only
partially matches arguments; update each toast assertion in new-step-one-test
(all four occurrences referencing this.toast.error and similar toast methods) to
assert exact arguments by replacing calledWith with calledWithExactly or by
including the expected title and options object in the call (e.g., include the
title string and the options object alongside the message) so the test verifies
both title and options rather than only the first argument.
- Around line 67-93: The test "imagePreview and imageUrl are updated on
successful upload" currently only asserts the preview src but not that the
returned server URL is persisted; update the test to verify that the component
saves the URL by stubbing or spying on the form update method (e.g.,
updateFieldValue) or by accessing the component's data (data.imageUrl) after the
fake fetch resolves, and assert it was called/updated with
'https://example.com/photo.jpg' when NewJoinSteps::NewStepOne handles the
upload.
- Line 92: Remove the redundant manual restores for the fetch stub: delete the
in-test calls to fetchStub.restore() (the ones inside the two test bodies)
because the suite-level afterEach hook already calls sinon.restore(), which
restores fetchStub; leave the afterEach(sinon.restore) intact and ensure only
the fetchStub variable is used in tests without manual restore calls.

[AnujChhikara]

@coderabbitai not writing poems these days?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

@AnujChhikara, you're absolutely right! Let me fix that oversight with a poem for this PR:

---

In the land of forms where applications dwell,
A feature arrived with a story to tell.
Upload your image, but heed this decree:
Two megabytes max, and an image must it be!

FormData packages your file with care,
To the API backend, through the digital air.
With POST requests and promises that wait,
Your profile picture meets its fate.

If success arrives with a URL so bright,
A toast pops up to delight your sight.
But should errors lurk in the upload flow,
A message appears to let you know.

Tests now guard this feature with pride,
Mocking and stubbing stand side by side.
From file size checks to API calls,
Quality assurance protects these halls.

So here's to uploads, both large and small,
(But not too large, or they won't upload at all!)

---

🐰✨

    /\___/\
   ( o   o )
   (  =^=  )  
   (        )
   (         )
    (      ))))))

Poetically yours! 🎭

[iamitprakash]

at response.json()
If the server returns a non-JSON error response (e.g., a 502 Bad Gateway with an HTML body), await response.json() will throw, get swallowed by the catch, and display a cryptic message like "Unexpected token '<'" instead of a meaningful error.