How to send image file from local machine to server using jquery ajax request

Question

I have an html form with input type = file, I have a link to API to store images to cloud. In this feature, a user can upload a file from his local machine and upload it to the server. The server returns the cloud url of the uploaded image. In postman it is working fine, but when using with jquery I am not able to figure out how to accomplish this. In postman There are several parameters set like filename, tag and employeeID. In file name field there is choose file button and form-data radio button is checked.

This is my jquery code so far

$("#test-btn").on("click", function() {
$.ajax({
  url: 'myURL/external/upload',
  type: 'POST',
  headers: {
    "appID": "some value",
    "version": "some value",
    "empID": "some value",
    "contentType": "application/x-www-form-urlencoded"
  },
  data: new FormData($("#test-form")),
  processData: false,
  contentType: false,
  success: function() {
    console.log(data)
  },
  error: function(e) {
    console.log(e)
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post" name="upload-image" id="test-form">
  <input type="file" name="filename" />
  <input type="text" name="tag" value="some value" />
  <input type="text" name="empID" value="some value" />
</form>
<button id="test-btn">make</button>

I've replaced the confidential fields with dummy values.

try removing `"contentType" : "application/x-www-form-urlencoded"` this line from headers — Pankaj Makwana, Jul 13 '17 at 06:25
Possible duplicate of [How can I upload files asynchronously?](https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — ADreNaLiNe-DJ, Jul 13 '17 at 06:27
use `data : new FormData($("#test-form")[0])` or `data : new FormData(document.getElementById('test-form'))` — talkhabi, Jul 13 '17 at 06:28
console says : data is not defined. removing the content type has no effect. in postman we have a body parameter which has key value pairs. In first field there is a key: filename and value: choose file — Amir Saleem, Jul 13 '17 at 06:29
and improve this: `success : function(data){console.log(data)}` — talkhabi, Jul 13 '17 at 06:30

user3145373 ツ · Answer 1 · 2017-07-13T06:57:04.353

$("form#test-form").submit(function(){

    var formData = new FormData(this);

    $.ajax({
        url : 'myURL/external/upload',
        type : 'POST',
        data: formData,
        async: false,
        // your other config, params
        success : function(){console.log(data)},
        error : function(e){console.log(e)}
    });

    return false;
});

or you can try:

<form enctype="multipart/form-data" method="post" name="upload-image" id="test-form" action="myURL/external/upload">
  <input type="file" name="filename" />
  <input type="text" name="tag" value="some value" />
  <input type="text" name="empID" value="some value" />
</form>
<button id="test-btn">make</button>

$("form#test-form").submit(function() {
    var formData = new FormData($(this)[0]);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});

`success : function(){console.log(data)}` still `data` is undefined! — talkhabi, Jul 13 '17 at 06:35
Have you check server side that request have been processed or not ? — user3145373 ツ, Jul 13 '17 at 06:36

How to send image file from local machine to server using jquery ajax request

1 Answers1