How can I resolve the Axios 415 error when uploading files to the OpenAI API?

The 415 error (Unsupported Media Type) indicates that the request body is not in the expected format. For uploading files to OpenAI’s file endpoint, you must send a multipart/form-data request, not a JSON request with an application/octet-stream header.

To fix this, use FormData and append both the file and the purpose. Here’s an updated version of your code:

JAVASCRIPTCopied
import React, { useState } from "react";
import axios from "axios";
import "./styles.css";

function App() {
  const [file, setFile] = useState();

  const postFile = async () => {
    try {
      const formData = new FormData();
      formData.append("file", file);
      formData.append("purpose", "fine-tune");

      const fileResponse = await axios.post(
        "https://api.openai.com/v1/files",
        formData,
        {
          headers: {
            "Authorization": `Bearer ${REACT_API_KEY}`,
            // When using FormData, let the browser set the Content-Type including the boundary
            // Alternatively, set "Content-Type": "multipart/form-data" if necessary
          }
        }
      );
      console.log("file is", fileResponse.data);
    } catch (error) {
      console.error("Error getting completion:", error);
    }
  };

  return (
    <div className="App">
      <div className="input-area">
        <input
          type="file"
          onChange={(e) => setFile(e.target.files[0])}
        />
        <button onClick={postFile}>Send File</button>
      </div>
    </div>
  );
}

export default App;

Key Changes

1. FormData Usage:
   Create a FormData object and append the file and the purpose to it. This tells the server that you’re sending form data rather than a JSON payload.

2. Content-Type Header:
   Remove the explicit "Content-Type": "application/octet-stream" header. When using FormData, browsers automatically set the correct Content-Type with a boundary.

This should resolve the 415 error and successfully upload your file to OpenAI’s server.