Issue while sending request via jQuery AJAX for file upload

Question

I have to upload a .pdf file along with some other details as multipart/form-data POST request to a URL. I was given a Postman request for the same to try.

I have a curl command as shown below which I've exported from Postman :

curl -X POST \
  https://dev.example.com/api/candidates/socially360/ \
  -H 'Content-Type: multipart/form-data' \
  -H 'Postman-Token: ee4683a0-97d2-4ac9-b2e0-1a2cef24ce7d' \
  -H 'cache-control: no-cache' \
  -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
  -F 'resume=@C:\Users\Thanthu Nair\Desktop\dp-converted.pdf' \
  -F 'name=Thanthu' \
  -F email=testmail@example.com \
  -F 'phone=+911234567890' \
  -F job=12345 \
  -F 'key=SECRECT_KEY'

I want to make this same request with jQuery AJAX (or JavaScript XMLHttpRequest will also do). So I exported the jQuery AJAX code for the same request from Postman . Below is the code:

var form = new FormData();
form.append("resume", "C:\\Users\\Thanthu Nair\\Desktop\\dp-converted.pdf");
form.append("name", "Thanthu");
form.append("email", "testmail@example.com");
form.append("phone", "+911234567890");
form.append("job", "12345");
form.append("key", "SECRECT_KEY");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://dev.example.com/api/candidates/socially360/",
  "method": "POST",
  "headers": {
    "Content-Type": "multipart/form-data",
    "cache-control": "no-cache",
    "Postman-Token": "087fc592-86c7-40d0-a216-dd928fdf5a46"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

But I am getting an a different response in case of the JQuery code (Also tired with JavaScript XMLHttpRequest and was getting same response as in case of JQuery). I can't figure out what is the issue.

Also when I copy curl command of the jQuery AJAX request from Chromes developer console I am getting the curl as shown below which is not an issue but may be it will help to answer.

curl "https://dev.example.com/api/candidates/socially360/" -H "Accept: */*" -H "Referer: http://localhost:8888/view/491/1558604095009_491_53" -H "Origin: http://localhost:8888" -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36" -H "Content-Type: multipart/form-data" --data-binary ^"------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"resume^\^"^

^

C:^\^\Users^\^\Thanthu Nair^\^\Desktop^\^\dp-converted.pdf^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"name^\^"^

^

Thanthu^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"email^\^"^

^

testmail@example.com^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"phone^\^"^

^

+911234567890^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"job^\^"^

^

12345^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq^

Content-Disposition: form-data; name=^\^"key^\^"^

^

SECRECT_KEY^

------WebKitFormBoundaryUl5oDAlmMjSBqOMq--^

^" --compressed

EDIT: Below is this code I wrote before trying with code from Postman, which also returned different response.

$.ajax({
        url: external.externalUrl,
        data: extData,
        cache: false,
        crossDomain : true,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (res) {
            defer.resolve(JSON.parse(res));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            defer.reject(new Error(errorThrown));
        }
});

EDIT:

I am also able to upload with Java code that was exported from Postman, below is the code, so the issue is while uploading from front-end I guess:

OkHttpClient client = new OkHttpClient();

MediaType mediaType = MediaType.parse("multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");
RequestBody body = RequestBody.create(mediaType, "------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"resume\"; filename=\"C:\\Users\\Thanthu Nair\\Desktop\\dp-converted.pdf\"\r\nContent-Type: application/pdf\r\n\r\n\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"name\"\r\n\r\nThanthu\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"email\"\r\n\r\ntest@example.com\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"phone\"\r\n\r\n+911234512345\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"job\"\r\n\r\n12345\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"key\"\r\n\r\nSECRET_KEY\r\n------WebKitFormBoundary7MA4YWxkTrZu0gW--");
Request request = new Request.Builder()
  .url("https://dev.example.com/api/candidates/socially360/")
  .post(body)
  .addHeader("content-type", "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW")
  .addHeader("cache-control", "no-cache")
  .addHeader("Postman-Token", "523d66c8-b4b9-4d97-a022-94b9adbfc73f")
  .build();

Response response = client.newCall(request).execute();

Answer 1

The issue seems to have been from server side, cause data was not available for the value of job I was passing in request, when I used code that I wrote which was not exported from Postman since I was passing value that I received from my DB which does not exist in theirs. Below is that code:

$.ajax({
        url: external.externalUrl,
        data: extData,
        cache: false,
        crossDomain : true,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (res) {
            defer.resolve(JSON.parse(res));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            defer.reject(new Error(errorThrown));
        }
});

However that does not explain why copy pasting the exact code from Postman did not work since it had the hard coded value for job that worked from Postman.

However since I the issue is solved I am posting this answer.