How do I make an upload to a collection-types media field from nextjs14 to strapiv4

I am trying to create a page to upload files to a “content-type” called inscricoes, but so far I have not been successful.

Here is my code: https://pastebin.com/SELMPuRz

In this section, the last three formData.append calls were introduced later, but they don’t really matter in this case:

const formData = new FormData();
Array.from(files).forEach((file) => {
  formData.append("files", file); // Adding each file
});

formData.append("ref", "api::inscricao.inscricao"); // The content type where the file will be stored
formData.append("refId", inscricaoId); // ID of the "inscricao" to be updated
formData.append("field", "fileLink"); // The field where the file will be saved

The file upload works well:

const uploadRes = await fetch("https://api.pnp.cv/api/upload", {
  method: "POST",
  body: formData,
});

However, I was trying to manually add the media type, and only the titulo: file.name and publico: true are working. The ficheiro.data always comes back as null:

const existingFiles = inscricaoData.data.attributes.fileLink || [];

const fileIds = [
  ...existingFiles, // Keep the existing files
  ...uploadData.map((file) => ({
    titulo: file.name, // File name
    publico: true,
    ficheiro: {
      data: {
        attributes: {
          id: file.id, // File ID
          name: file.name,
          url: file.url, // Ensure that the `url` field is returned
          mime: file.mime, // MIME type of the file
          size: file.size, // File size
        },
      },
    },
  })),
];

This is the result after an upload:

{
  "data": {
    "id": 2,
    "attributes": {
      "NIF": "456564",
      "url": "626179ff-3bba-4e98-8469-58ef4a8e14ae",
      "code": "pnp-i",
      "nome_completo": "Ailtom Duarte",
      "email": "[email protected]",
      "sede": "Latada",
      "telefone": "2389536269",
      "categoria": "Branding",
      "nome_projeto": "TerraSystem",
      "con_criativo": "asasdsfasfasfasfs adfdsfd sfds fdfs ds fsd dsf dfs",
      "coord_prod": "yjygjyg",
      "dir_foto": "sdfdsf",
      "dir_art": "kuhuuluhhu",
      "realizador": "sdfsdf",
      "autor_jingle": "sdfsdf",
      "designer": "fdsfdsfds",
      "outras_consideracoes": "fdsfdsfdsf",
      "data_producao": "2024-12-24",
      "data_divulgacao": "2024-12-16",
      "data_apresentacao_publica": "2024-12-25",
      "editor": "sdfsd",
      "createdAt": "2024-05-01T11:59:56.499Z",
      "updatedAt": "2025-01-05T02:04:52.681Z",
      "publishedAt": "2024-11-06T12:49:14.559Z",
      "fileLink": [
        {
          "id": 29,
          "titulo": "20241031_114101-removebg-preview.png",
          "publico": true,
          "ficheiro": {
            "data": null
          }
        }
      ]
    }
  },
  "meta": {}
}

What I really want to do is upload multiple files on the fileLink field where ficheiro is the media field.

"fileLink": [
  {
    "id": 29,
    "titulo": "20241031_114101-removebg-preview.png",
    "publico": true,
    "ficheiro": {
      "data": null
    }
  }
]

how do I implement this?

If is there a better solution let me know, please.