I’m working on a Next.js project with TinyMCE React, and I want users to upload a PDF file into the editor and display it as an embedded iframe. I followed the TinyMCE documentation for file_picker_callback, but when I try to upload a file, I get an error (screenshot of the error here).

Here’s my current implementation:

file_picker_callback: (callback, value, meta) => {
  const input = document.createElement("input");
  input.setAttribute("type", "file");
  input.setAttribute("accept", ".pdf");

  input.onchange = function () {
    const file = (this as HTMLInputElement).files![0];

    const formData = new FormData();
    formData.append("file", file);

    fetch("/api/upload/doc", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((result) => {
        console.log("result", result);
        const url = result.location;

        callback(url, {
          title: file.name,
          type: "file",
        });
      })
      .catch((error) => {
        console.error("Upload failed", error);
        alert("PDF upload failed");
      });
  };

  input.click();
},