How to send both Image and JSON through ajax apache CXF
<p>I am trying to develop a screen to send both json and image as part of the same request.</p>

<p>I am able to send both json and image in two different calls but I need to send both in the same.</p>

<p>Below is my screen which contains my java script code. I am using apache CXF as my rest component.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>   var table = $('#familyDetails').tableToJSON();
  var kovilRequestDTO={
  "familyDetailsList" : table,
  };
  var data=JSON.stringify(kovilRequestDTO);
  var formData = new FormData();
  formData.append('kovilRequestDTO', data);
  formData.append('familHeadImage', $('input[type=file]')[0].files[0]);
  $.ajax({
      type: "POST",
      url: "http://localhost:8091/KovilRestServices/kovilRestService/uploadFile", 
      data: formData,
      contentType: false,
       processData: false,
         dataType: "json",
      success: function(response) {
      $( "#message-box h2" ).html("Your registration is successful."+response.familyHeadId);
      $(".message-box").fadeIn("fast");
      } 
   });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
 &lt;input id="add_new" type="button" value="Add Record" /&gt;
 &lt;input type="button" class="glyphicon glyphicon-plus" id="my-button" value="Add image"&gt;
&lt;!-- &lt;input type="file" name="my_file" id="my-file"&gt; --&gt;

 &lt;form style="display:none" name="fileUploadForm" id="fileUploadForm"
  action="http://localhost:8091/KovilRestServices/kovilRestService/uploadFile"
  method="post" enctype="multipart/form-data"&gt;
  &lt;p&gt;
   Select a file : &lt;input type="file" name="my_file" id="my_file" size="50" /&gt;
  &lt;/p&gt;
  &lt;input type="hidden" name="familyHeadId"/&gt;
  &lt;input type="submit" value="Upload It" /&gt;
 &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;div class="addmembertable"&gt;
 &lt;table id="familyDetails" class="table-list" border="0" width="70%"
  cellspacing="0" cellpadding="0"&gt;
  &lt;tbody&gt;
   &lt;tr&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Relation&lt;/th&gt;
    &lt;th&gt;DOB&lt;/th&gt;
    &lt;th&gt;Gender&lt;/th&gt;
    &lt;th&gt;Qualification&lt;/th&gt;
    &lt;th&gt;PID&lt;/th&gt;
    &lt;th&gt;Profession&lt;/th&gt;
    &lt;th&gt;Phone&lt;/th&gt;
    &lt;th&gt;Email&lt;/th&gt;
    &lt;th&gt;Address&lt;/th&gt;
    &lt;th&gt;Delete&lt;/th&gt;
   &lt;/tr&gt;
  &lt;/tbody&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div id="message-box" class="message-box" style="display: none;"&gt;
 &lt;h2&gt;&lt;/h2&gt;
 &lt;table&gt;
  &lt;tr&gt;
   &lt;td align="right"&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type="button" value="OK" id="OK"&gt;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/table&gt;
&lt;/div&gt;
&lt;div class="entry-form"&gt;
 &lt;form name="userinfo" id="userinfo"&gt;
  &lt;table width="100%" border="0" cellpadding="4" cellspacing="0"&gt;
   &lt;tr&gt;
    &lt;td colspan="2" align="right"&gt;&lt;a href="#" id="close"&gt;Close&lt;/a&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Name&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="name" name="name"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Relation&lt;/td&gt;
    &lt;td&gt;&lt;select id="relation" class="relation"&gt;
      &lt;option selected&gt;--select--&lt;/option&gt;
      &lt;option value="Family Head"&gt;Family Head&lt;/option&gt;
      &lt;option value="Son"&gt;Son&lt;/option&gt;
      &lt;option value="Daughter"&gt;Daughter&lt;/option&gt;
      &lt;option value="Wife"&gt;Wife&lt;/option&gt;
      &lt;option value="Mother"&gt;Mother&lt;/option&gt;
      &lt;option value="Father"&gt;Father&lt;/option&gt;
    &lt;/select&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;DOB&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="dob" name="dob"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Relation&lt;/td&gt;
    &lt;td&gt;&lt;select id="gender" class="gender" name="gender"&gt;
      &lt;option selected&gt;--select--&lt;/option&gt;
      &lt;option&gt;Male&lt;/option&gt;
      &lt;option&gt;Female&lt;/option&gt;
    &lt;/select&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Qualification&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="qualification"
     name="qualification"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Parental ID&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="parentalID" name="parentalID"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Profession&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="profession" name="profession"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Phone Number&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="phone" name="phone"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Email&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="email" name="email"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;Address&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="address" name="address"&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td align="right"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" value="Save" id="save"&gt;&lt;input
     type="button" value="Cancel" id="cancel"&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
 &lt;/form&gt;
&lt;/div&gt;
&lt;div class="addmemberfooter"&gt;
 &lt;input id="submit" type="button" value="Submit" /&gt;
&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/Dpejt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dpejt.png" alt="Screen with table data and image"></a></p>

<p>My Rest Implementation is below. I get a 404 error when I invoke it. Other rest endpoints are which are working are configured in the same way. I have used apache CXF for rest implementation    </p>

<pre><code>@POST
@Path("/uploadFile")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces("application/json")
public Response testDownload(
        @FormParam(value="kovilRequestDTO") KovilRequestDTO kovilRequestDTO,
        @FormParam(value="familHeadImage") Attachment attachment);
</code></pre>

<p>Error Stack Trace :</p>

<pre><code>WARNING: No operation matching request path "/KovilRestServices/kovilRestService/uploadFile" is found, Relative Path: /uploadFile, HTTP Method: POST, ContentType: multipart/form-data;boundary=----WebKitFormBoundaryAmzgeu8Y86sBX7m2, Accept: */*,. Please enable FINE/TRACE log level for more details.
</code></pre>