title: Send multipart request from ajax to spring controller without form?
body: <p>I am uploading an image from the desktop, and converting this image into base code in javascript. After that I want to send this image base code to spring controller with the multipart request. But I am not using Form.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;input id="inputFileToLoad" type="file"  onchange="encodeImageFileAsURL()"&gt;   
  </code></pre>
  
  <p><strong>JAVA SCRIPT</strong></p>
  
  <pre><code> window.photoCakeUrl = '&lt;c:url value="/media/image/upload"/&gt;';
        function encodeImageFileAsURL() {
                  var filesSelected = document.getElementById("inputFileToLoad").files;
                  if (filesSelected.length &gt; 0) {
                      var fileToLoad = filesSelected[0];
                      var fileReader = new FileReader();
                      fileReader.onload = function (fileLoadedEvent) {
                          var srcData = fileLoadedEvent.target.result; // &lt;--- data: base64
                          var newImage = document.createElement('img');
                          var photoCake = srcData;
                          newImage.src = srcData;
                          document.getElementById("imgTest").innerHTML = newImage.outerHTML;
                          var ajax1 = $.ajax({
                              type: 'POST',
                              url: photoCakeUrl,
                              processData: false, // important
                              contentType: false, // important
                              dataType: 'json',
                              data: {photoCak: photoCake}
                          });
  
                        });
  
                      },
                              fileReader.readAsDataURL(fileToLoad);
                  }
              }
  </code></pre>
  
  <p><strong>SPRING CONTROLLER:</strong></p>
  
  <pre><code>@RequestMapping(value = "/media/image/upload", method = RequestMethod.POST)
      @ResponseBody
      public Map&lt;String, String&gt; productPictureUploadnew(MultipartHttpServletRequest request, HttpServletResponse response) {
          Map&lt;String, String&gt; resp = new HashMap&lt;&gt;();
          String photoCake = request.getParameter("photoCak");
  
  
          System.out.println("photoCake   " + photoCake);
  
          return resp;
      }
  </code></pre>
  
  <p>But when I am generating AJAX call then 500 error will comes. If i am using simply </p>
  
  <pre><code>public Map&lt;String, String&gt; productPictureUploadnew(HttpServletRequest
   request, HttpServletResponse response)
  </code></pre>
  
  <p>Then it works. Mean when I am using <strong>MultipartHttpServletRequest</strong> place of <strong>HttpServletRequest
       request</strong> then it is not works.</p>