FilePicker fails to upload PDF

[tabit01]

We're experiencing problems with the PnP FilePicker which we use on a SPFx solution on our Sharepoint site. File formats .PNG and .JPEG uploads correctly, but PDF give 500 POST server error in most of the attempts.

{"odata.error":{"code":"-2147024883, Microsoft.SharePoint.SPException","message":{"lang":"en-US","value":"The data is invalid. (Exception from HRESULT: 0x8007000D)"}}}

I am unfortunately without debugging options, I don't have access to WebPack folder in browser Inspector -> Sources, VS Code debugger in Edge has only unbound breakpoints. For some reason my console.log(...) does not show up in browser (Edge) Inspector console.

I have searched this repo, looked through issues, and browsed samples. I can't find relevant info, will appreciate if someone corrects me on that part.

Here is part of the code, the FilePicker component from PnP. Could anyone reason about why this could fail? All input welcome.

<FilePicker
              buttonLabel="Attach file"
              buttonIcon="Attach"
              accepts={[".gif", ".jpg", ".jpeg", ".png", "pdf"]}
              onSave={async (filePickerResult: IFilePickerResult[]) => {
                const attachments = await Promise.all(
                  filePickerResult.map(async (file) => {
                    let content: string | Blob;
                    //  for selected from SharePoint or Stock images
                    const url = file.fileAbsoluteUrl || file.previewDataUrl;
                    console.log("url:", url);
                    content = await (await fetch(url)).blob();
                    console.log("content:", content);
                    const fileInfo: IAttachmentFileInfo = {
                      name: file.fileName,
                      content,
                    };
                    console.log("fileInfo:", fileInfo);
                    return fileInfo;
                  })
                );

                const newAttachments: AttachmentsState = {
                  ...props.attachments,
                  add: [...props.attachments.add].concat(attachments),
                };
                props.updateAttachments(newAttachments);
              }}
              context={appContext.webPartContext}
              storeLastActiveTab={false}
            />

OnSave method:

const onSave = () => {
    handleSubmit(
      async (data) => {
        const web = Web(AppSettings.myUrl);
        const list = web.lists.getById(props.listUuid);
        const item = await addUpdateSpItem(data, list);
        let itemId = item?.data?.ID || props.editItem.ID;
        await handleAttachments(itemId, list);
        props.setCustomFormState({
          isLoading: false,
          isOpened: false,
          messageBar: {
            type: MessageBarType.success,
            text: "Item saved successfully",
          },
        });
      },
      (err) => {}
    )();
  };

EDIT: If I remember correctly from a colleagues debug session, file size is non-zero in console.log(), but blob is empty.

[tabit01]

After a lot of Ctrl+F5 and salt over both shoulders, I have access to some ghost breakpoints, thereby debug access to FilePicker.js.

Can the file absolute value be null?

[tabit01]

On comparison, a .JPG file has a non-zero blob size, and non-empty type, after returning to SPFX from the FilePicker methods.

[tabit01]

PDF upload attempt:

[tabit01]

It turned out that an empty URL was difficult to fetch anything from. Quick fix, including any: