Why is it that file names only appear when uploading through the console?

const [arrayBuffer, setArrayBuffer] = useState<ArrayBuffer | null>(null);

  // Convex mutations
  const generateUploadUrl = useMutation(api.stlFiles.generateUploadUrl);
  const sendFile = useMutation(api.stlFiles.sendFile);

  // File handling and upload
  async function handleFile(file: File) {
    console.log("File information", file);

    // Get a short-lived upload URL
    const postUrl = await generateUploadUrl();

    // Is there a way to specify the file name??? (e.g., "aneurysm.stl")
    const init = {
      method: "POST",
      headers: {
        // note: I don't think the Content-Type
        // has anything to do with the issue
        // I've tried multiple things, from "" (gives bad header error) 
        // to "application/octect-stream" (uploads the file to the Convex cloud but, 
        // again, withou the name)
        "Content-Type": "application/sla",
      },
      // As shown in the screenshots, the file name property (among others) is actually
      // in the object when logged in the browser, but it doesn't get to the Convex
      // cloud :(
      body: file,
    };

    // POST the file to the URL
    const response = await fetch(postUrl, init);
    const result = await response.json();

    // Save the newly allocated storage id to the database
    const { storageId } = result;
    await sendFile({ storageId, author: "me" });

    setArrayBuffer(await file.arrayBuffer());
  }

const [arrayBuffer, setArrayBuffer] = useState<ArrayBuffer | null>(null);

  // Convex mutations
  const generateUploadUrl = useMutation(api.stlFiles.generateUploadUrl);
  const sendFile = useMutation(api.stlFiles.sendFile);

  // File handling and upload
  async function handleFile(file: File) {
    console.log("File information", file);

    // Get a short-lived upload URL
    const postUrl = await generateUploadUrl();

    // Is there a way to specify the file name??? (e.g., "aneurysm.stl")
    const init = {
      method: "POST",
      headers: {
        // note: I don't think the Content-Type
        // has anything to do with the issue
        // I've tried multiple things, from "" (gives bad header error) 
        // to "application/octect-stream" (uploads the file to the Convex cloud but, 
        // again, withou the name)
        "Content-Type": "application/sla",
      },
      // As shown in the screenshots, the file name property (among others) is actually
      // in the object when logged in the browser, but it doesn't get to the Convex
      // cloud :(
      body: file,
    };

    // POST the file to the URL
    const response = await fetch(postUrl, init);
    const result = await response.json();

    // Save the newly allocated storage id to the database
    const { storageId } = result;
    await sendFile({ storageId, author: "me" });

    setArrayBuffer(await file.arrayBuffer());
  }