File Upload to OpenAI API (https://api.openai.com/v1/files)

API
, , , ,
1

I am working on a custom chatbot using OPEN AI’s APIs.I am trying to upload a file to OPEN AI api servers. I am using OpenAI file upload endpont.

I am getting this error:
"Error getting completion: AxiosError: Request failed with status code 415. "

Here is my code

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

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


  const postFile = async () => {
    try {
      const requestBody = {
        file: file,
        purpose: "fine-tune"
      };

      const fileResponse = await axios.post(
        "https://api.openai.com/v1/files",
        requestBody,
        {
          headers: {
            "Content-Type": "application/octet-stream",
            Authorization: `Bearer ${REACT_API_KEY}`
          }
        }
      );
      console.log("file is", fileResponse);
    } catch (error) {
      console.error("Error getting completion:", error);
    }
  };

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

export default App;

How do I fix it?

2

Hi and welcome to the developer forum!

The issue with your code is that you are trying to send a JSON body with the file key, while the OpenAI API for file upload expects the file to be sent directly in the request body as a binary stream, i.e., as application/octet-stream .

The correct code should look something like this:

const postFile = async () => {
    try {
      const formData = new FormData();
      formData.append('file', file);

      const fileResponse = await axios.post(
        "https://api.openai.com/v1/files",
        formData,  // sending FormData directly
        {
          headers: {
            // "Content-Type": "application/octet-stream", // Removed this line
            Authorization: `Bearer ${REACT_API_KEY}`
          }
        }
      );
      console.log("file is", fileResponse);
    } catch (error) {
      console.error("Error getting completion:", error);
    }
};
3

I have tried your solutoin and it didn’t work. I got the same error!

4

Might need to explicitly set the type to octlet stream, I don’t have a dev environment with me at the moment or I’d test it.

give this a try (ChatGPT created)

const postFile = async () => {
  try {
    // Read the file as a binary
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);

    fileReader.onload = async () => {
      try {
        const fileResponse = await axios.post(
          "https://api.openai.com/v1/files",
          fileReader.result, // send the file's binary data directly
          {
            headers: {
              "Content-Type": "application/octet-stream", 
              Authorization: `Bearer ${REACT_API_KEY}`
            }
          }
        );
        console.log("file is", fileResponse);
      } catch (error) {
        console.error("Error uploading the file:", error);
      }
    };

    fileReader.onerror = (error) => {
      console.error("Error reading the file:", error);
    };

  } catch (error) {
    console.error("Error initiating the file read:", error);
  }
};
5

Here please test it here. I would be a lot of help.

Codesandbox: https://codesandbox.io/s/fast-wind-ftn7vw

Please use an api key for OPEN AI.

6

Here please test it here. I would be a lot of help.

Codesandbox: https://codesandbox.io/s/fast-wind-ftn7vw

Please use an api key for OPEN AI.

7

You can use this gpt if you want to remade your whole code and see what’s wrong with it. (It can give you the openapi schema too)

:arrow_right: API Alchemist URL

It can help you build any api you want👍🏽