0

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 : File Description

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.

||||||
  • 5 seconds of googling gave me this: abandon.ie/notebook/simple-file-uploads-using-jquery-ajax. Note the FormData() function which I believe is part of the DOM API and not specifically related to jquery. – slebetman Jan 22 '16 at 15:10
  • @slebetman I did found that and followed it a bit before posting the question. I did also found out that The 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:22
  • Can you show what your files variable looks like that you're submitting as the data value in the ajax call? – Chase Jan 22 '16 at 17:01
  • @user1640736: You don't need to use FormData() 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:13
  • @Chase files is simply event.srcelement.data.file or something like that. – taigi100 Jan 23 '16 at 23:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.