title: Bad request when trying to upload a file through ajax
body: <p>I am trying to upload an image to my backend. I need to send three things along with this image - file (a url) and title. I have tried doing it but getting error saying 400 bad request. In the network tab I see a response like this
  <a href="https://i.stack.imgur.com/fMbY9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fMbY9.png" alt="enter image description here"></a></p>
  
  <p>This is my code</p>
  
  <pre><code>posterFile = e.target.files;
  selectedPoster = posterFile[0];
  
  
  uploadPoster() {
          var blobPosterFile = selectedPoster;
          console.log("U called me?")
          var formData = new FormData();
      formData.append("fileToUpload", blobPosterFile);
  
      var that = this;
      let token;
      var settings = {
          "async": true,
          "crossDomain": true,
          "url": "https://www.backend.sample.forexom.com/api/v1/videos/",
          "method": "POST",
          processData: false,
          "credentials": 'include',
          "headers": {
              Authorization: "Token " + that.props.token_Reducer.token
          },
          "data": {
              "file": JSON.stringify(videoURL),
              "poster": formData,
              "title": JSON.stringify(selectedFile.name)
          },
          success:( response, textStatus, jQxhr )=&gt; {
              //this.props.tokenAction(response.auth_token);
              console.log("poster uploaded")
          }
      }
  
      $.ajax(settings).done((response) =&gt; {
  
      });
  }
  </code></pre>
  
  <p>Update</p>
  
  <p>Tried appending other data to formData like this, but getting same error</p>
  
  <pre><code>uploadPoster() {
          var blobPosterFile = selectedPoster;
          console.log("U called me?")
          var formData = new FormData();
          formData.append("file", videoURL)
          formData.append("poster", blobPosterFile);
          formData.append("title", selectedFile.name)
  
          var that = this;
          let token;
          var settings = {
              "async": true,
              "crossDomain": true,
              "url": "https://www.backend.trigger.tessact.com/api/v1/videos/",
              "method": "POST",
              processData: false,
              "credentials": 'include',
              "headers": {
                  "content-type": "application/x-www-form-urlencoded",
                  Authorization: "Token " + that.props.token_Reducer.token
              },
              "data": formData,
  
              success:( response, textStatus, jQxhr )=&gt; {
                  //this.props.tokenAction(response.auth_token);
                  console.log("poster uploaded")
              }
          }
  
          $.ajax(settings).done((response) =&gt; {
  
          });
      }
  </code></pre>