TypeScript Argument of type 'IAttachmentInfo[]' is not assignable to parameter of type 'SetStateAction<File[]> Which Type to use?

Question

I'm trying to update an array so I can submit it to a sharepoint list. The array is of multiple file attachments. I'm using sp pnp to retrieve and submit the files. I can delete the files on the app, but when it submits it won't update the files. I know why:

Here is the state:

import { IAttachmentInfo } from "@pnp/sp/attachments";
import { IItem } from "@pnp/sp/items/types

 const [fileAttachmentsToUpload, setFileAttachmentsToUpload] = useState<Array<File>>(null);
 const [attachedFilesRetrieved, setAttachedFilesRetrieved] = useState<Array<IAttachmentInfo>>(null);

I use attachedfilesRetrieved to get the files:

const getAttachedFiles = () => {
        Utils
            .ReadListItem("MyList", Id)
            .then(item => {
                item.attachmentFiles
                  .get()
                  .then(setAttachedFilesRetrieved);
         });
  };

This to change the files:

const setFileUploadEventHandler = (event: React.ChangeEvent<HTMLInputElement>) => {

        let resultFile = event.target.files;
        if (resultFile) {
            console.log(resultFile);
            let fileInfos: Array<File> = [];
            for (var i = 0; i < resultFile.length; i++) {

                let file: File = resultFile[i];
                fileInfos.push(file);

            }
            setFileAttachmentsToUpload(fileInfos);
        }
    };

And attempting this to delete the files and finally make the changes on an update:

const _deleteAttachedFile = (ev: number) => {
        let fileArray = attachedFilesRetrieved;
        const sid = ev;
        console.log(fileArray, 'fileArray of fileAttachments');
    
        fileArray.splice(sid, 1);

        setFileAttachmentsToUpload(fileArray);
     
    };

I'm getting this red error on setFileAttachmentsToUpload:

Argument of type 'IAttachmentInfo[]' is not assignable to parameter of type 'SetStateAction<File[]>'.
  Type 'IAttachmentInfo[]' is not assignable to type 'File[]'

My onupdate function has to use:

  props.onUpdate(request, fileAttachmentsToUpload);

As you can see I'm using one state to retrieve the files to display them on the app, and another to submit them. The problem is the Types and TypeScript and me not knowing which type to use!

Answer 1

Here you set fileArray to point to attachedFilesRetrieved, which you had typed as IAttachmentInfo[]:

let fileArray = attachedFilesRetrieved; 
// attachedFilesRetrieved is of type IAttachmentInfo[],
// so fileArray is too

Then you feed that to setFileAttachmentsToUpload, which you typed to be a setState function that expects File[]:

setFileAttachmentsToUpload(fileArray);
// fileArray is of type IAttachmentInfo[], but setFileAttachmentsToUpload
// expects an argument of type File[]

Its easy to see why typescript is complaining.

Answer 2

I realised that my code elsewhere was not using the correct Type. The correct Type was IAttachmentFileInfo when trying to update files, this type caters for multiple files. Whereas when I needed to read files from SharePoint, I had to use IAttachmentInfo. It was difficult because I had to convert the array from IAttachmentFileInfo Type:

const _deleteAttachedFile = (selectedFileId: number) => {
        let selectedFile: IAttachmentInfo = attachedFilesRetrieved[selectedFileId];
        let selectedFileInfo: IAttachmentFileInfo = {
            name: selectedFile.FileName,
            content:null
        }
        setFilesToBeRemoved([...filesToBeRemoved, selectedFileInfo]);