Product Upload Page

The ProductUploadPage is the comprehensive merchant interface for listing items on the Socon-MKT marketplace. It handles complex form state, dynamic tagging, media uploads, and security validations to ensure only authorized sellers can create listings.

Component Architecture

The interface is broken down into modular cards, guiding the merchant through the listing process logically.

1. Security & Route Protection

  • useHasSellerProfile Check: Upon mounting, the component verifies if the authenticated user has an active seller profile. If is_seller returns false, the component instantly redirects the user to the /onboard flow, preventing unauthorized marketplace listings.

2. Dynamic Tagging (ToggleChip)

  • Product Conditions: Provides default presets (e.g., "Brand New", "Refurbished") while allowing sellers to type and append custom tags (e.g., "Missing Box", "Blue").
  • Listing Rules: A boolean toggle system for store policies (e.g., "Payment on delivery", "No refunds").
  • Component: Both utilize a shared ToggleChip component for a uniform, interactive pill-based UI.

3. Media Validation

  • Shares the exact same robust media logic as the social post creator: 10 photos OR 1 video (100MB limit), utilizing URL.createObjectURL() for safe, instantaneous local previews.

State Management & Sequential Upload Logic

Because product listings often contain multiple high-resolution images, the page uses the exact same useCreateProductPost custom hook as the social feed to guarantee upload stability.

  • Form Compilation: Before submission, the component validates required fields (Title, Price, Media). It then compiles the active boolean listingConditions and the string array of productConditions into arrays suitable for the backend payload.
  • Sequential Upload:
  • The complete JSON payload is sent to create the product entry.
  • The resulting Product ID is cached.
  • A loop uploads the media files one by one using FormData. If the internet connection drops during file 3 of 5, the merchant can click "Retry" to resume the media upload without recreating the base product.

API Endpoints & Data Structures

The page interacts with multiple endpoints to authorize the user, fetch form options, and process the upload.

1. Seller Authorization Check

Validates if the user is permitted to view this page.

  • Endpoint: GET /users/has_seller/
  • Response (IsSellerResponseType): 
    {
  "is_seller": true
}

2. Fetch Market Categories

Populates the category dropdown <select> menu.

  • Endpoint: GET /posts/market_category/

3. Create Product Payload

Creates the base product listing in the database.

  • Endpoint: POST /posts/create_post/
  • Payload (PostProductRequestType): 
    {
  "is_product": true,
  "title": "string",
  "price": 2800,
  "unit": "string | null",
  "category": "string",
  "caption": "string | null",
  "quatity": 1,
  "location": "string",
  "listing_conditions_text": ["Payment on delivery", "No refunds"],
  "product_conditions_text": ["Brand New", "Custom Tag"]
}
  • Authorization: Required (Bearer Token)

4. Upload Product Media (Sequential)

Attaches files to the product.

  • Endpoint: POST /posts/create_post_media/
  • Headers: Content-Type: multipart/form-data
  • FormData Payload:
  • post: "product_id_string"
  • file: [Binary File Data]
  • Authorization: Required (Bearer Token)