title: Sending file in a PUT request using HTML forms and Ajax
body: <p>I am trying to send an image file to a backend server using a PUT request.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="file" name="myFile" id="profilePicInput"&gt;
  </code></pre>
  
  <p>Javacript:</p>
  
  <pre><code>const profileInput = document.getElementById('profilePicInput');
  profileInput.addEventListener("change", handleFiles, false);
  
  function handleFiles(){
  
      const formData = profileInput.files[0];
  
      $.ajax({
          url: '../uploadImage',    //my servlet url
          type: 'PUT',
          processData: false,
          contentType: false,
          data: {
              data: formData
          }, 
          success: function () {
              console.log("profile pic updated!");
          }
      });
  }
  </code></pre>
  
  <p>The problem I'm facing is, in my backend code, I'm receiving data that has a content-type of 'text/plain;charset=UTF-8', but what i need is 'multipart/form-data'. </p>
  
  <p>I've tried two things that didn't work:</p>
  
  <ol>
  <li><p>Using HTML forms</p>
  
  <pre><code>&lt;form id="profilePicForm" action="javascript:handleFiles()" method="post" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="myFile" id="profilePicInput"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>const profileInput = document.getElementById('profilePicInput');
  profileInput.addEventListener("change", submitForm, false);
  
  function submitForm(){
     document.getElementById("profilePicForm").submit();
  }
  </code></pre>
  
  <p>But still the content-type in the request header says 'text/plain;charset=UTF-8' in my PUT request.  </p></li>
  <li><p>Using FormData</p>
  
  <pre><code>function handleFiles(){
  
      const blobFile = profileInput.files[0];
      let formData = new FormData();
      formData.append("fileToUpload", blobFile);
  
  
      $.ajax({
          url: '../uploadImage',    //my servlet url
          type: 'PUT',
          processData: false,
          contentType: false,
          data: {
              data: formData
          }, 
          success: function () {
              console.log("profile pic updated!");
          }
      });
  }
  </code></pre>
  
  <p>Same problem. The content-type in the request header still says 'text/plain;charset=UTF-8' in my PUT request.</p></li>
  </ol>
  
  <p>So my question is: how do you send a file with content-type=multipart/form-data through a PUT request?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>Solution:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="file" name="myFile" id="profilePicInput"&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>const profileInput = document.getElementById('profilePicInput');
  profileInput.addEventListener("change", handleFiles, false);
  
  function handleFiles(){
  
      let formData = new FormData();
      formData.append("fileToUpload", profileInput.files[0]);
  
      const xhr = new XMLHttpRequest();
      xhr.open('PUT', '../uploadImage');
      xhr.onload = () =&gt; {
          console.log("profile updated");
      };
      xhr.send(formData);
  
  }
  </code></pre>