{
    "slug": "js_form_data_api",
    "term": "FormData API",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "FormData constructs key-value pairs from HTML forms for AJAX submission to PHP backends — supports file uploads without page reload.",
    "long": "FormData mirrors PHP's $_POST and $_FILES. new FormData(formElement) captures all fields automatically. Append extra data with .append(). Submit via fetch() with no Content-Type header — the browser sets multipart/form-data with the correct boundary automatically. PHP reads files via $_FILES and fields via $_POST as normal. Never set Content-Type: application/json when sending FormData — it breaks multipart encoding.",
    "aliases": [
        "FormData",
        "multipart form data",
        "AJAX file upload"
    ],
    "tags": [
        "javascript",
        "forms",
        "php-integration"
    ],
    "misconception": "You must set Content-Type: multipart/form-data manually when using FormData — setting it manually omits the boundary parameter and breaks the upload; let the browser set it automatically.",
    "why_it_matters": "FormData lets you submit PHP forms including file uploads entirely via JavaScript without page reload, keeping PHP's server-side validation and file handling unchanged.",
    "common_mistakes": [
        "Setting Content-Type header manually when using FormData",
        "Not appending CSRF token to FormData before submit",
        "Using JSON.stringify on FormData — it serialises to empty object"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_fetch_api",
        "js_abort_controller",
        "js_csrf_fetch",
        "arbitrary_file_upload"
    ],
    "prerequisites": [
        "js_fetch_api",
        "js_async_await"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/API/FormData"
    ],
    "bad_code": "// Wrong — breaks multipart boundary:\nfetch('/upload.php', {\n    method: 'POST',\n    headers: { 'Content-Type': 'multipart/form-data' }, // DO NOT SET\n    body: new FormData(form)\n});",
    "good_code": "const fd = new FormData(document.querySelector('#upload-form'));\nfd.append('_token', document.querySelector('meta[name=csrf-token]').content);\n\n// No Content-Type header — browser sets it correctly:\nconst res = await fetch('/upload.php', { method: 'POST', body: fd });\nconst data = await res.json();\n// PHP reads normally: $_POST['field'], $_FILES['file']",
    "quick_fix": "new FormData(formEl) + fetch with no Content-Type header — PHP receives $_POST and $_FILES as normal",
    "severity": "medium",
    "effort": "low",
    "created": "2026-03-17",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_form_data_api",
        "html_url": "https://codeclaritylab.com/glossary/js_form_data_api",
        "json_url": "https://codeclaritylab.com/glossary/js_form_data_api.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[FormData API](https://codeclaritylab.com/glossary/js_form_data_api) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_form_data_api"
            }
        }
    }
}