FormData vs JSON.stringify — the file-eating trap

<div class="pg">
    <h1 class="pg-title">🎮 Where does the file actually go?</h1>
    <p class="pg-sub">
      Fill in the form below, pick a file, then build the request body two ways.
      One runs the file through <code>JSON.stringify</code> like the naive code in the post.
      The other hands the raw <code>FormData</code> to <code>fetch</code>, the way it should be sent.
      No network call happens here — this just shows you exactly what each approach
      would put in the request body, using the real browser APIs.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Build a form submission</div>
      <div class="fields">
        <div class="field">
          <label for="name">Display name</label>
          <input type="text" id="name" value="Alex Chen" />
        </div>
        <div class="field">
          <label>Topics (repeats the same <code>name</code> attribute — try checking two)</label>
          <div class="checks">
            <label><input type="checkbox" name="topics" value="css" checked /> css</label>
            <label><input type="checkbox" name="topics" value="js" checked /> js</label>
            <label><input type="checkbox" name="topics" value="html" /> html</label>
          </div>
        </div>
        <div class="field">
          <label for="avatar">Avatar (pick any file — it never leaves your browser)</label>
          <div class="file-row">
            <input type="file" id="avatar" />
            <span class="hint" id="fileHint" style="margin:0">No file chosen yet.</span>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn bad" id="runJson">Build with JSON.stringify (the bug)</button>
        <button class="btn good" id="runFormData">Build with FormData (the fix)</button>
        <button class="btn ghost sm" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What actually goes in the request body</div>
      <div class="out-grid">
        <div class="out-col">
          <div class="out-title">Request body preview</div>
          <pre class="code" id="out">Click a button above.</pre>
        </div>
        <div class="out-col">
          <div class="out-title">Content-Type header</div>
          <pre class="code" id="contentType">—</pre>
        </div>
      </div>
      <div class="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — build a payload either way.</span>
      </div>
      <p class="hint" id="hint">The file input holds real bytes the whole time. Which button loses them is the whole point of the post.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.