title: Axios post request not setting Content-Type to multipart/form-data
body: <p>Im trying to upload an image to cloudinary from react, i am unable to make a post request using axios . This is the code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const onSubmit = async (data) =&gt; {
      const { files } = document.querySelector('input[type="file"]');
      console.log(data);
      if (data.files !== undefined || data.files !== null || data.files !== "") {
        setLoading(true);
        const formData = new FormData();
        formData.append("file", files[0]);
        formData.append("upload_preset", cloudinary_preset);
        const options = {
          headers: { "Content-Type": "multipart/form-data" },
          data: formData,
        };
        const res = await axios.post(
          `https://api.cloudinary.com/v1_1/${cloudinary_id}/image/upload`,
          options
        );
        const img = await res.json();
        const imgUrl = img.secure_url;
        data.thumbnail = imgUrl;
        console.log(data.thumbnail);
        console.log(res);
        setLoading(false);
      } else {
        data.thumbnail = "";
      }
     };</code></pre>
  </div>
  </div>
  </p>
  <p>the response that i got on my browser console :
  <a href="https://i.stack.imgur.com/qh2io.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qh2io.png" alt="enter image description here" /></a></p>
  <p>But when i use fetch , i am successfully uploaded my images . Here is the code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const onSubmit = async (data) =&gt; {
      const { files } = document.querySelector('input[type="file"]');
      console.log(data);
      if (data.files !== undefined || data.files !== null || data.files !== "") {
        setLoading(true);
        const formData = new FormData();
        formData.append("file", files[0]);
        formData.append("upload_preset", cloudinary_preset);
        const options = {
          method: "POST",
          body: formData,
        };
        const res = await fetch(
          `https://api.cloudinary.com/v1_1/${cloudinary_id}/image/upload`,
          options
        );
        const img = await res.json();
        const imgUrl = img.secure_url;
        data.thumbnail = imgUrl;
        console.log(data.thumbnail);
        console.log(res);
        setLoading(false);
      } else {
        data.thumbnail = "";
      }
      };</code></pre>
  </div>
  </div>
  </p>
  <p>the responses :</p>
  <p><a href="https://i.stack.imgur.com/OJmrV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OJmrV.png" alt="enter image description here" /></a></p>
  <p>My guess that i conclude from the web console is on the headers part, when i use axios even tho i already change the headers to content-type:multipart/form-data , it still being sent as application/json. But then again im still learning to read the console log , if someone know what is really happening please share your opinion!</p>