Why does jQuery's ajax success method doesn't work?

Question

I am trying to add some animation while a type-file input is processing the file, I decided to use jQUery's ajax method to send the form data.

I noticed that the beforeSend method works, but not with the success method, but instead, the error method contains all the response sent by my node server. I tried looking for similiar question but none of them work for me.

JS:

fileForm.on('submit', function(e) {
    e.preventDefault();
    let formData = new FormData();
    formData.append('file', $('#input-file').prop('files')[0]);
    $.ajax({
      url: this.action,
      dataType: 'script',
      cache: false,
      contentType: false,
      processData: false,
      beforeSend: () => {
        console.log('loading');
      },
      success: function(response) {
        console.log(response); // Not logging anything
        setTimeout(() => {
          console.log('succeded: ' + response);
        }, 500);
      },
      error: (err) => {
        console.log(err); // This logs the response
      },
      data: formData,
      type: this.method.toUpperCase()
    });
  });

Node.JS:

router.post('/image', upload.single('file'), async (req, res) => {
  if (req.session.passport !== undefined) {
    try {
      console.log(req.file, req.body);
      const query = {_id: req.session.passport.user};
      const user = await modelAct(userModel, query, 'findOne');
      // const opt = {
      //   query: query,
      //   data: {
      //     $set: {
      //       avatar_path: req.file.path
      //     }
      //   }
      // };
      // await modelAct(userModel, opt, 'updateOne');
      res.status(200).json({fileData: req.file});
    } catch(err) {
      console.log(err);
      if ((typeof err.message == 'string')) {
        res.sendStatus(err.message);
      } else {
        res.sendStatus(500);
      }
    }
  } else {
    res.sendStatus(401);
  }
});

open the network tab and check if ajax is firing. By guess is `url: this.action,` is wrong — brk, Feb 21 '19 at 05:43
@brk Ajax is firing and using the correct method which is `POST` — Kemal Dwiheldy, Feb 21 '19 at 05:47
@KemalDwiheldy post the NETWORK tab activity in the question. — techie_28, Feb 21 '19 at 06:06
what are you getting in console.log(err); // This logs the response ? — BILAL MALIK, Feb 21 '19 at 06:27
oh .. are you uploading a file through AJAX... if yes then you can't do it this way. you'll have to use I frame — BILAL MALIK, Feb 21 '19 at 06:30
check this out, hope it helps... https://stackoverflow.com/a/2320097/9763245 — BILAL MALIK, Feb 21 '19 at 06:31
based on the link you gave me.. it is possible to upload file using ajax — Kemal Dwiheldy, Feb 21 '19 at 06:33
Yes, you can do it now, but there is more technicality to the answer as to on what condition will file upload work using AJAX — BILAL MALIK, Feb 21 '19 at 06:35
Possible duplicate of https://stackoverflow.com/questions/6186770/ajax-request-returns-200-ok-but-an-error-event-is-fired-instead-of-success — Bilal Alam, Feb 21 '19 at 06:39
@BILALMALIK Ajax is capable of uploading file since long time now, Check FileReader API. — techie_28, Feb 21 '19 at 09:48
@BilalAlam thank you for your response, it is what I needed! — Kemal Dwiheldy, Feb 21 '19 at 09:51

Why does jQuery's ajax success method doesn't work?

0 Answers0