I have the following form :
<form action = "/upload-file" method="post" enctype="multipart/form-data">
<div class="form-group" style="display: inline; float:left;">
<input type="file" (change)="submit($event)" name = "pic" style="margin-top: 10%;">
</div>
</form>
On the server side I'm using multer to catch the file and store it. While using upload.single('pic'); works prefectly fine if I try to submit this form (event.srcElement.form.submit() in the submit function ), I can't seem to get the exact same result with an ajax call.
I have tried :
jQuery.ajax({
url: '/upload-file',
type: 'POST',
cache: false,
dataType: 'file',
contentType: false,
processData: false,
data: files,
success: function (datat) {
console.log('success');
return false;
}
But mutler doesn't seem to accept it. How do I set the fieldname of the file and such? Or how do I make jQuery submit the same exact thing as the form would've but without refreshing/redirecting the page?
This is how the file looks from a successful form submit :

Edit:
The upload needs to have the 'pic' fieldname , otherwise upload.single('pic') won't accept it. That's what I think I need to figure out how to set.
FormData()function which I believe is part of the DOM API and not specifically related to jquery. – slebetman Jan 22 '16 at 15:10The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".Still not really sure why would I use it to send only 1 file. Also the server in the tutorial isn't using multer which only seems to accept files sent from a tag with a specific name. – taigi100 Jan 22 '16 at 15:22filesvariable looks like that you're submitting as thedatavalue in the ajax call? – Chase Jan 22 '16 at 17:01FormData()if you want to just send values of regular inputs. But you need to use it if you want to send a file via ajax. There is no direct access to the content of the file selection input because that would be a security risk. Imagine any website being able to download your /etc/passwd file when you visit or being able to download your keychain database. It's the reason the file selection box is so restrictive and browsers do not allow you to have arbitrary file I/O on the user's machine. The user himself must deliberately upload only the file he intend – slebetman Jan 22 '16 at 18:13filesis simplyevent.srcelement.data.fileor something like that. – taigi100 Jan 23 '16 at 23:32