Oleg Isonen
9a8ae2dc8f
Closes #6605 New Forms show editable feedback while Resource actions run. The `formProgress` variable starts with `status: "idle"`, `loaded: 0`, `total: 0`, and `files: []`. It becomes pending during submission, then returns to idle. The existing `formState` still reports only initial, success, or error. The Progress container says “Submitting…” and adds measured whole-request bytes when the total is known. Files include ID, field name, name, size, and type. The browser cannot measure reliable per-file transfer bytes in the single multipart request. The binding editor suggests one example file to reveal those fields; the example never enters the actual Form value. Saved Forms retain their existing bindings and submission message. ## Checklist - [x] Keep the existing Form outcome variable and add upload activity, byte counts, and file details. - [x] Show zero byte defaults on insertion, new submissions, cancellation, and Preview reset without fake runtime files. - [x] Suggest file fields in Form and Resource bindings while evaluation, reset, rendering, and stored values use real data. - [x] Preserve Builder Preview headers, authentication, response checks, and cancellation. - [x] Keep existing success/error feedback and saved-Form fallback. - [x] Reset external progress when an active published Form unmounts. - [x] Update Form, Variables, and MCP/CLI guides; clarify the older screenshot and final-only simulation. Generated MCP docs check passes. - [x] Audit Form and Variables docs against final progress behavior; clarify the older Variables screenshot. - [x] Cover lifecycle, transport, repeated submission, cancellation, unmount, Preview, template, MCP binding/style, and editor completion with focused tests. - [x] Run relevant typechecks, lint, formatting, fixture generation, and independent review. - [x] Required CI checks pass on the latest commit. ## Verification Local focused Form browser tests (25), Form template tests (12), Builder Preview and Form context tests (14), and mounted editor example/reset tests (6) pass. Builder, SDK React, SDK registry, and project-build typechecks pass, as do lint, formatting, and fixture generation. The fixture sync regenerated two unrelated linked-project site paths; those outputs were restored before commit. Independent review found no remaining issues. All latest-commit checks passed; E2E shard 9 passed on a targeted rerun after its two Form tests also passed locally with 11 related tests. This follow-up adds 162 net non-test lines, more than the initial estimate. The extra code identifies the actual callback-bound variable by ID, even when renamed, and gives autocomplete a separate example scope so it cannot affect actual values. One provider covers Form fields and Resource editors. No schema or package was added. The existing Variables screenshot predates `formProgress`; its explanatory text is current. The React Router fixture's built browser client grew by 4 KiB on Linux CI (376 → 380 KiB), and its checked limit matches that measured output. Multipart transfer remains one whole request. Browser submission supplies live progress. MCP can discover `formProgress`, bind the Progress container, and style it; server simulation reports final outcomes and does not measure browser uploads.
description
| description |
|---|
| New to Webstudio? |
👋 Welcome
Our getting started guide will help you navigate through building your first Webstudio website. It covers the essentials of creating web designs and integrating third-party tools. You'll learn how to utilize Webstudio's unique features like Design tokens and Components, and how to contribute to the project.
{% content-ref url="basics/building-your-first-site.md" %} building-your-first-site.md {% endcontent-ref %}
{% content-ref url="university/foundations/" %} foundations {% endcontent-ref %}
{% content-ref url="university/core-components/" %} core-components {% endcontent-ref %}
{% content-ref url="university/cli.md" %} cli.md {% endcontent-ref %}
{% content-ref url="university/inception.md" %} inception.md {% endcontent-ref %}
{% content-ref url="university/radix/" %} radix {% endcontent-ref %}
{% content-ref url="university/marketplace.md" %} marketplace.md {% endcontent-ref %}
{% content-ref url="university/self-hosting/" %} self-hosting {% endcontent-ref %}
{% content-ref url="university/how-tos/" %} how-tos {% endcontent-ref %}
{% content-ref url="university/integrations/" %} integrations {% endcontent-ref %}
{% content-ref url="university/craft.md" %} craft.md {% endcontent-ref %}
{% content-ref url="basics/FAQ.md" %} FAQ.md {% endcontent-ref %}
Looking to contribute to Webstudio?
{% content-ref url="contributing/contributions.md" %} contributions.md {% endcontent-ref %}
{% content-ref url="contributing/marketplace.md" %} marketplace.md {% endcontent-ref %}