formdata.html (3961B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>XMLHttpRequest: Construct and upload FormData</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/html/semantics/forms/form-submission-0/resources/targetted-form.js"></script> 8 <link rel="help" href="https://xhr.spec.whatwg.org/#interface-formdata" data-tested-assertations="following::P[1]" /> 9 <link rel="help" href="https://xhr.spec.whatwg.org/#dom-formdata" data-tested-assertations=".. following::P[1]" /> 10 <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]" /> 11 <link rel="help" href="https://xhr.spec.whatwg.org/#dom-XMLHttpRequest-send-FormData" data-tested-assertations="following::DD[1]" /> 12 <link rel="help" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-the-form-data-set"> 13 14 <div id="log"></div> 15 <form id="form"> 16 <input type="hidden" name="key" value="value"> 17 </form> 18 <script> 19 function do_test (name, fd, expected) { 20 var test = async_test(name); 21 test.step(function() { 22 var client = new XMLHttpRequest(); 23 client.onreadystatechange = test.step_func(function () { 24 if (client.readyState !== 4) return; 25 assert_equals(client.responseText, expected); 26 test.done(); 27 }); 28 client.open("POST", "resources/upload.py"); 29 client.send(fd); 30 }); 31 } 32 33 function create_formdata () { 34 var fd = new FormData(); 35 for (var i = 0; i < arguments.length; i++) { 36 fd.append.apply(fd, arguments[i]); 37 }; 38 return fd; 39 } 40 41 do_test("empty formdata", new FormData(), '\n'); 42 do_test("formdata with string", create_formdata(['key', 'value']), 'key=value,\n'); 43 do_test("formdata with named string", create_formdata(['key', new Blob(['value'], {type: 'text/plain'}), 'kv.txt']), '\nkey=kv.txt:text/plain:5,'); 44 do_test("formdata from form", new FormData(document.getElementById('form')), 'key=value,\n'); 45 46 do_test("formdata with blob", create_formdata(['key', new Blob(['value'], {type: 'text/x-value'})]), '\nkey=blob:text/x-value:5,'); 47 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,'); 48 49 // If 3rd argument is given and 2nd is not a Blob, formdata.append() should throw 50 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 51 append_test.step(function(){ 52 assert_throws_js(TypeError, function(){ 53 create_formdata('a', 'b', 'c'); 54 }); 55 }); 56 append_test.done(); 57 58 test(() => { 59 let form = populateForm('<input name=n1 value=v1>'); 60 let formDataInEvent = null; 61 form.addEventListener('formdata', e => { 62 e.formData.append('h1', 'vh1'); 63 formDataInEvent = e.formData; 64 }); 65 let formData = new FormData(form); 66 assert_equals(formData.get('h1'), 'vh1'); 67 assert_equals(formData.get('n1'), 'v1'); 68 assert_not_equals(formData, formDataInEvent, 69 '"formData" attribute should be different from the ' + 70 'FromData object created by "new"'); 71 72 formDataInEvent.append('later-key', 'later-value'); 73 assert_false(formData.has('later-key')); 74 }, 'Newly created FormData contains entries added to "formData" IDL ' + 75 'attribute of FormDataEvent.'); 76 77 test(() => { 78 let form = populateForm('<input name=n11 value=v11>'); 79 let counter = 0; 80 form.addEventListener('formdata', e => { 81 ++counter; 82 assert_throws_dom('InvalidStateError', () => { new FormData(e.target) }); 83 }); 84 new FormData(form); 85 assert_equals(counter, 1); 86 87 form.submit(); 88 assert_equals(counter, 2); 89 }, '|new FormData()| in formdata event handler should throw'); 90 </script>