Sending formdata for file upload using ajax

Question

I am trying to upload an image by using form data with ajax. Though below line seems to be working fine and saving the image on my local machine.

<form ref='uploadForm' id='uploadForm' action='/tab10/uploadImage' method='post' encType="multipart/form-data">
<input type="file" class="btn btn-default" name="file" />
<input type='submit' class="btn btn-default" value='Broadcast Image' />
</form>

But when instead of specifying action as a form attribute, i try to make the call using ajax, things didn't seem to be working fine.Below is the code that i am using to make the post API call using ajax.

HTML

<form ref='uploadForm' id='uploadForm' encType="multipart/form-data">

Jquery

$("form#uploadForm").submit(function (event) {
          //disable the default form submission
          event.preventDefault();
          var formData = $(this).serialize();
          console.log(formData);
          $.ajax({
              url: '/tab10/uploadImage',
              type: 'POST',
              data: formData,
              async: false,
              cache: false,
              contentType: false,
              processData: false,
              success: function () {
                  alert('Form Submitted!');
              },
              error: function(){
                  alert("error in ajax form submission");
              }
          });
          return false;
      });

Below is the code i am using for saving the image.

exports.uploadImage = function(req, resp) {
var res = {};
let file = req.files.file;
file.mv('./images/image', function(err) {
if (err) {
  res.status = 500;
  res.message = err;
  // return res.status(500).send(err);
  return resp.send(res);
}
res.status = 200;
res.message = 'File uploaded!';
return resp.send(res);
});
};

When i checked the request data in my uploadimage function, it seems that in the request, parameter called "files" is not being send in the later case.

FYI: async: false, synchronous requests in the main thread are deprecated - avoid it — Jaromanda X
– Jaromanda X, Commented Oct 6, 2017 at 10:06
parameter called "files" is not being send in the later case without seeing the form, it's a true mystery — Jaromanda X
– Jaromanda X, Commented Oct 6, 2017 at 10:07
but the request is being sent to the uploadimage function,so how will specifying the full url would be of any use. @HimanshuUpadhyay — Srijan Sharma
– Srijan Sharma, Commented Oct 6, 2017 at 10:07

OLH · Accepted Answer · 2017-10-06 14:17:27Z

3

I think you have to create FormData, after you can append the file to the formData, add an ID to the input <input type="file" class="btn btn-default" name="file" id="uploadFile"/>

 $("form#uploadForm").submit(function (event) {
      //disable the default form submission
      event.preventDefault();
      var formData = new FormData();
      formData.append('file',$('#uploadFile')[0].files[0]);
      $.ajax({
          url: '/tab10/uploadImage',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function () {
              alert('Form Submitted!');
          },
          error: function(){
              alert("error in ajax form submission");
          }
      });

  });

edited Oct 6, 2017 at 14:17

answered Oct 6, 2017 at 11:30

OLH

2044 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Srijan Sharma Over a year ago

this also doesn't seem to be working. in the working case this is the information that i get to use for moving the file:{ file: { name: 'images.png', data: <Buffer >, encoding: '7bit', mimetype: 'image/png',mv: [Function: mv] } } which comes along in the req variable itself. however in this case we are getting only basic info like name of the image.

OLH Over a year ago

sorry i edited my answer it should be formData.append('file',$('#uploadFile')[0].files[0]); to get the one file.But in some cases when you want to upload multiple files you have to make a loop

Muhammed Hafil · Accepted Answer · 2017-10-06 11:57:58Z

1

use

$("#uploadForm").submit(function () {
      var formData = new FormData(this);
      $.ajax({
          url: '/tab10/uploadImage',
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function () {
              alert('Form Submitted!');
          },
          error: function(){
              alert("error in ajax form submission");
          }
      });
      return false;
  });

answered Oct 6, 2017 at 11:57

Muhammed Hafil

1751 gold badge2 silver badges9 bronze badges

2 Comments

Srijan Sharma Over a year ago

thanks man...was struggling with it for a long time....can you in brief try to explain the logic as to why was the one that i wrote not working?

Muhammed Hafil Over a year ago

new FormData(this); // you were not specifying which formData

Zigri2612 · Accepted Answer · 2017-10-06 12:16:32Z

0

Use this format to fire ajax.because file is multipart or jquery serialize() method not serialize multipart content,so we need to put it manual.

//get choosen file
var fileContent = new FormData();
fileContent.append("file",$('input[type=file]')[0].files[0]);
$.ajax({
     type: "POST",
      enctype:"multipart/form-data",
       url: "/tab10/uploadImage",
       data: fileContent,
       processData: false,
       contentType: false,
       success: function(response) {
        }
});

answered Oct 6, 2017 at 12:16

Zigri2612

2,33023 silver badges33 bronze badges

Collectives™ on Stack Overflow

Sending formdata for file upload using ajax

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related