title: Sending a File (PDF) through ajax to a JSP Servlet
body: <p>I am trying to send two PDF Files )initially just one) through an HTML form using javascript (jquery or not), I have to receive both files in a controller of a JSP page (using Spring) and do something with both files.</p>
  
  <p>Right now I have been trying some of the answers already posted here in SO, but I am not being able to get it to work correctly. </p>
  
  <p>My HTML File</p>
  
  <pre><code>&lt;form id="searchForm"&gt;
                  &lt;table class=rightAlignColumns&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;label for="File1"&gt;&lt;spring:message code='File1' /&gt;:&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input id="File1" type="file" name="File1" /&gt; &lt;/td&gt;
  
                          &lt;td&gt;&lt;label for="file2"&gt;&lt;spring:message code='File2' /&gt;:&lt;/label&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input id="file2" type="file" name="file2" /&gt; &lt;/td&gt;
                      &lt;/tr&gt;   
                  &lt;/table&gt;
                      &lt;br/&gt;
                      &lt;input type="submit" value="&lt;spring:message code='Btn' /&gt;" /&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>My javascript</p>
  
  <pre><code>var fd = new FormData();    
      alert(document.getElementById('File1').files.length);
      fd.append( 'File1', document.getElementById('File1').files[0] );
  //  fd.append( 'File2', document.getElementById('File2').files[0]);
      $.ajax({
      url:'myurl.json',
        data: fd,
        cache:false,
          processData:false,
          contentType:false,
        type: 'POST',
        success: function(data){
  //      alert(data);
        }
      });
  </code></pre>
  
  <p>On the controller I am doing what <a href="https://stackoverflow.com/a/2424824">this other post</a> said.</p>
  
  <pre><code>protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      try {
          List&lt;FileItem&gt; items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
          for (FileItem item : items) {
              if (item.isFormField()) {
                  // Process regular form field (input type="text|radio|checkbox|etc", select, etc).
                  String fieldName = item.getFieldName();
                  String fieldValue = item.getString();
                  // ... (do your job here)
              } else {
                  // Process form file field (input type="file").
                  String fieldName = item.getFieldName();
                  String fileName = FilenameUtils.getName(item.getName());
                  InputStream fileContent = item.getInputStream();
                  // ... (do your job here)
              }
          }
      } catch (FileUploadException e) {
          throw new ServletException("Cannot parse multipart request.", e);
      }
  
      // ...
  }
  </code></pre>
  
  <p>The problem I think it is in the javascript, because when the code enters to the Controller the list "items" has a size of 0, and going into the exception.</p>
  
  <p>The expected result would be the user loading a PDF file into the Form, hitting submit and ajax sending the file to the server (controller), doing stuff correctly and sending back a result. </p>
  
  <p>Right now the client is not uploading correctly the file.</p>
  
  <p>As a side note, the file I am uploading is going to be used by pdfbox or google ocr in the controller.</p>
  
  <p>Thanks in advance!</p>