File Uploading with AJAX fails <p>I'm trying to test a file upload method with a simple HTML test page.</p> <p>The page is simply supposed to take a document's id, the document itself, package it up into form data and send it off to the server(with a token for authentication).</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;h4&gt;Id&lt;/h4&gt; &lt;input typ"text" id="Id" /&gt; &lt;h4&gt;token&lt;/h4&gt; &lt;input typ"text" id="token" /&gt; &lt;br /&gt; &lt;br /&gt; &lt;input type="file" id="upload" name="userFile" multiple/&gt; &lt;input type="submit" id="submit" /&gt; &lt;/div&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt; &lt;/script&gt; &lt;script&gt; let token,id,idName, fileSelect,data; function uploadFiles(data) { if (data) { $.ajax({ url: "http://uploaddomain.com/uploadMethod", type: "POST", data: data, processData: false, contentType: false, headers: { "Authorization" : 'Bearer%20' + token, "Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8" }, success: function (res) { console.log('success',res) }, error: function (err) { console.log('err',err) } }); } } } $( "#submit" ).click(function() { var fileSelect = document.getElementById('upload'); let file = fileSelect.files[0]; id = $("#Id").val(); token = $("#token").val(); idName = "Id"; var uploadButton = document.getElementById('upload-button'); data = new FormData(); data.append(idName, id ); data.append("fileUpload", file ); uploadFiles(data); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The error from the API is code 400, {"Message":"File not found in Request"}"</p> <p>Any suggestions on what I'm doing wrong?</p>