<!doctype html> <html lang=en> <meta charset=utf-8> <title>XMLHttpRequest: Construct and upload FormData</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/html/semantics/forms/form-submission-0/resources/targetted-form.js"></script> <link rel="help" href="https://xhr.spec.whatwg.org/#interface-formdata" data-tested-assertations="following::P[1]" /> <link rel="help" href="https://xhr.spec.whatwg.org/#dom-formdata" data-tested-assertations=".. following::P[1]" /> <link rel="help" href="https://xhr.spec.whatwg.org/#dom-formdata-append" data-tested-assertations=".. following::UL[1]/LI[1] following::UL[1]/LI[2] following::UL[1]/LI[3]" /> <link rel="help" href="https://xhr.spec.whatwg.org/#dom-XMLHttpRequest-send-FormData" data-tested-assertations="following::DD[1]" /> <link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set"> <div id="log"></div> <form id="form"> <input type="hidden" name="key" value="value"> </form> <script> function do_test (name, fd, expected) { var test = async_test(name); test.step(function() { var client = new XMLHttpRequest(); client.onreadystatechange = test.step_func(function () { if (client.readyState !== 4) return; assert_equals(client.responseText, expected); test.done(); }); client.open("POST", "resources/upload.py"); client.send(fd); }); } function create_formdata () { var fd = new FormData(); for (var i = 0; i < arguments.length; i++) { fd.append.apply(fd, arguments[i]); }; return fd; } do_test("empty formdata", new FormData(), '\n'); do_test("formdata with string", create_formdata(['key', 'value']), 'key=value,\n'); do_test("formdata with named string", create_formdata(['key', new Blob(['value'], {type: 'text/plain'}), 'kv.txt']), '\nkey=kv.txt:text/plain:5,'); do_test("formdata from form", new FormData(document.getElementById('form')), 'key=value,\n'); do_test("formdata with blob", create_formdata(['key', new Blob(['value'], {type: 'text/x-value'})]), '\nkey=blob:text/x-value:5,'); do_test("formdata with named blob", create_formdata(['key', new Blob(['value'], {type: 'text/x-value'}), 'blob.txt']), '\nkey=blob.txt:text/x-value:5,'); // If 3rd argument is given and 2nd is not a Blob, formdata.append() should throw const append_test = async_test('formdata.append() should throw if value is string and file name is given'); // needs to be async just because the others above are append_test.step(function(){ assert_throws_js(TypeError, function(){ create_formdata('a', 'b', 'c'); }); }); append_test.done(); test(() => { let form = populateForm('<input name=n1 value=v1>'); let formDataInEvent = null; form.addEventListener('formdata', e => { e.formData.append('h1', 'vh1'); formDataInEvent = e.formData; }); let formData = new FormData(form); assert_equals(formData.get('h1'), 'vh1'); assert_equals(formData.get('n1'), 'v1'); assert_not_equals(formData, formDataInEvent, '"formData" attribute should be different from the ' + 'FromData object created by "new"'); formDataInEvent.append('later-key', 'later-value'); assert_false(formData.has('later-key')); }, 'Newly created FormData contains entries added to "formData" IDL ' + 'attribute of FormDataEvent.'); test(() => { let form = populateForm('<input name=n11 value=v11>'); let counter = 0; form.addEventListener('formdata', e => { ++counter; assert_throws_dom('InvalidStateError', () => { new FormData(e.target) }); }); new FormData(form); assert_equals(counter, 1); form.submit(); assert_equals(counter, 2); }, '|new FormData()| in formdata event handler should throw'); </script>