11 replies

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

When I upload files using a script equal to the one in the documentation, the file name does not seem to be stored, as you can see from the screen shot.

But when I upload the file manually through the console, it does seem to get the file name store (and with the proper extension).

I don't see a parameter in the documentation to specify the file name.

I also want to note that when I log the file information in the console, it does seem to have the file name in it, so I wonder why the information doesn't get to the Convex cloud.

React logic

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());
  }

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());
  }

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

Similar Threads

Similar Threads

Similar Threads