{"id":7385,"date":"2014-06-07T07:45:09","date_gmt":"2014-06-07T07:45:09","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/06\/07\/upload-multiple-files-with-xmlhttprequest-to-express-js-3-5-server-collection-of-common-programming-errors\/"},"modified":"2014-06-07T07:45:09","modified_gmt":"2014-06-07T07:45:09","slug":"upload-multiple-files-with-xmlhttprequest-to-express-js-3-5-server-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/06\/07\/upload-multiple-files-with-xmlhttprequest-to-express-js-3-5-server-collection-of-common-programming-errors\/","title":{"rendered":"Upload multiple files with XMLHttpRequest to Express.js 3.5 Server-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m trying to build a file uploader with the native FileAPI in JavaScript and I want to upload the files via XMLHttpRequest (without jQuery) to a Node.js server, which uses Express.js.<\/p>\n<p>The file reading part works fine and when I upload the file without the XMLHttpRequest it works perfectly (the files are in <strong>req.files<\/strong> in Express.js).<\/p>\n<p>The problem is the upload via AJAX: <strong>req.files<\/strong> is always empty.<\/p>\n<p>Heres some code:<\/p>\n<p>The form:<\/p>\n<pre><code>\n  \n  \n\n<\/code><\/pre>\n<p>The upload part in the frontend (in files[0].data is a file &#8211; not an array or something):<\/p>\n<pre><code>function uploadFiles(files) {\n    var xhr = new XMLHttpRequest();\n    xhr.submittedData = files; \/\/ Array of objects with files included. But it neither works with an array of files nor just one file\n    xhr.onload = successfullyUploaded;\n    xhr.open(\"POST\", \"http:\/\/localhost:3000\/upload\", true);\n    xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');\n    xhr.send();\n}\n<\/code><\/pre>\n<p>The backend where the problem occurs:<\/p>\n<pre><code>exports.receiveUpload = function(req, res){\n    console.log(req.files); \/\/ empty\n    var files = req.files.uploads; \/\/ always empty with AJAX upload. with normal upload it's fine\n    console.log(req.xhr); \/\/ true\n    \/\/ ...\n}\n<\/code><\/pre>\n<p>And here&#8217;s some Express.js config (I already had the same error without AJAX &#8211; in the comments in the code you can see the lines and the Stack Overflow post that solved it for the upload without AJAX):<\/p>\n<pre><code>\/\/ all environments\napp.set('port', process.env.PORT || 3000);\napp.set('views', path.join(__dirname, 'views'));\napp.set('view engine', 'ejs');\napp.use(express.favicon());\napp.use(express.logger('dev'));\napp.use(express.json());\napp.use(express.urlencoded());\n\n\/\/ this 3 lines have to be before app.use(app.router)\n\/\/ https:\/\/stackoverflow.com\/questions\/21877098\/upload-file-using-express-failed-cannot-read-property-of-undefined\napp.use(express.multipart());\napp.use(express.bodyParser({ keepExtensions: true, uploadDir: path.join(__dirname, 'public', 'uploads') }));\napp.use(express.methodOverride());\n\n\napp.use(app.router);\napp.use(require('less-middleware')(path.join(__dirname, '\/public')));\napp.use(express.static(path.join(__dirname, 'public')));\n<\/code><\/pre>\n<p>Thanks in advance!<\/p>\n<p>Regards,<\/p>\n<p>C.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m trying to build a file uploader with the native FileAPI in JavaScript and I want to upload the files via XMLHttpRequest (without jQuery) to a Node.js server, which uses Express.js. The file reading part works fine and when I upload the file without the XMLHttpRequest it works perfectly (the files are in req.files in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7385","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7385"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7385\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}