How Customer Uploads Work in the Konfiwear Customizer

---

Two Upload Contexts

Customers can upload graphics in two distinct contexts within the customizer:

Both contexts respect the upload settings and constraints you've configured in the admin dashboard.

---

What Customers Experience

Freeform Upload Flow

1. Customer opens the Graphics panel in the customizer

2. They click the Upload button and select a file from their device

3. The file is validated (format, size) — invalid files are silently rejected

4. SVG files are automatically rasterized for reliable canvas rendering

5. The customizer enters placement mode — the customer clicks on the 3D model to place the graphic

6. The graphic appears on the garment at the click location

7. The customer can then drag, rotate, and scale the graphic using:

   • 3D model drag — click and drag directly on the 3D view to reposition

   • Canvas controls — rotate handle (top-center), scale handle (bottom-right)

   • Action bar sliders — precise rotation (0–360°) and scale controls

Caption: A customer placing an uploaded logo on the 3D garment model. The graphic appears where they click.

Zone Upload Flow

1. The Graphics panel shows zone cards grouped by garment side (front, back, left, right)

2. Each card shows the zone name, print method, and dimensions

3. The customer clicks Upload on a zone card and selects a file

4. The file is validated against the zone's specific constraints (formats, file size, DPI)

5. The artwork is placed within the zone:

   • DTG zones: artwork auto-scales to fit the zone boundaries, is clipped to the rectangle, and movement is constrained within the zone

   • Sublimation zones: artwork is placed at the zone origin with free positioning

6. The customer sees a thumbnail preview on the zone card

💡 Tip: Zone uploads enforce stricter rules than freeform uploads — per-zone DPI minimums, format restrictions, and file size limits. These are configured in Graphics → Zones in the admin dashboard.

---

File Validation

Every upload goes through validation before it reaches the canvas:

Invalid files are rejected silently — the upload simply doesn't proceed. This avoids disruptive error dialogs in the customer experience.

---

SVG Handling

SVG files receive special treatment:

1. The SVG is loaded and validated

2. It's rasterized to a PNG via an offscreen canvas (max 1024px on the longest side)

3. The rasterized version is used for placement on the Fabric.js canvas

Why rasterize? Many SVGs define only a viewBox without explicit width/height, causing browsers to report 0×0 dimensions. Rasterization ensures reliable sizing and canvas rendering.

💡 Tip: Customers get the best results by uploading SVG files — they produce crisp output at any scale. The rasterization is for canvas rendering only; the original SVG is preserved for production output.

---

The Action Bar

Once a graphic is placed, selecting it reveals the action bar — a floating panel with controls:

Caption: The graphic action bar with controls for rotation, scale, DPI, layering, and AI tools.

---

What You Control as an Admin

Your admin settings determine the boundaries of what customers can do:

See the Upload Settings Guide and Graphic Zones Guide for detailed configuration instructions.

---

Canvas Layer Order for Uploads

Customer uploads render at specific positions in the canvas layer stack:

Layering controls (forward/backward) let customers reorder within their layer group, but graphics can never move below zone boundaries or above text layers.

---

What Happens After Upload

When the customer submits a quote:

1. All uploaded graphics (freeform and zone) are captured in the quote configuration

2. Screenshot previews (front/back) are generated automatically

3. The full canvas state is serialized for production output

4. If configured, a techpack PDF is generated with all graphic placements

The production team receives the complete graphic placement data — positions, scales, rotations, and DPI information — alongside the print-ready files.

⚠️ Important: Zone graphics are not currently persisted to server storage during the session — they use browser blob URLs. If the customer refreshes the page, zone uploads need to be re-uploaded. Freeform graphic positions are persisted to session storage and survive page refreshes.

---

Tips & Best Practices

• Configure upload settings before enabling the customizer — set appropriate file size limits and format restrictions for your production workflow

• Enable SVG uploads — they produce the highest quality output at any scale

• Set per-zone DPI minimums to catch low-resolution uploads before they reach production

• Use the DPI badge as a customer education tool — the color coding (green/amber/red) makes resolution quality immediately visible

• Test the upload experience yourself — go through the full flow as a customer to verify file validation, placement, and constraints work correctly

• Consider disabling rotation via Upload Settings if your production requires all graphics at 0° orientation

• Set a freeform limit (e.g., 5 graphics) to prevent customers from overloading the garment

---

Related Articles

• Upload Settings Guide

• Graphic Zones Guide

• Understanding the Graphics Module

• Understanding the Quotes Module