Upload the dropped file inside Read DropZone to SharePoint online document library inside SPFX

Question

I am building an SPFx web part inside our SharePoint Online tenant, where we have a react dropzone, to upload a file, which should automatically get uploaded to SharePoint document library:-

Here is my Service:-

// Uploads a dropped excel sheet to the site assets library
  public uploadExcel = async (name:string, file: ArrayBuffer): Promise<string> => {
    try {
      alert("1");
      const fileAddResult = await this.dmsWeb.lists
        .getByTitle(this.folderIconListTitle)
        .rootFolder.files.addUsingPath(name,file, { Overwrite: true });

      return fileAddResult.data.ServerRelativeUrl;
    } catch (ex) {
      const result = (ex as Error).message;
      console.log(result);
      Dialog.alert(result);
    }
  };

Here is my markup :-

 public render(): React.ReactElement<ICategoriesPanelProps> {
    const appearingStyle = mergeStyles(AnimationStyles.scaleDownIn100);

//code goes here

<Stack tokens={{ childrenGap: 15 }}>
        <Stack.Item>
            <DropzoneExport
              themeVariant={this.props.themeVariant}
              onDrop={this.onDrop}
              uploadPlaceholders={this.state.uploadPlaceholders}
              removeDocument={this.removeDocument}
            />

here is the onDrop method:-

  private onDrop = (acceptedFiles) => {
    try{
    acceptedFiles.forEach(file => {

      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload = async () => {
          // get file content
          const binaryStr = reader.result
          this.props.uploadExcel("Category", binaryStr);
         
    }}}
    catch(e)
    {const result = (e as Error).message;
      alert(result);}
  };

Currently i am getting this error:-

Argument of type 'string | ArrayBuffer' is not assignable to parameter of type 'ArrayBuffer'. Type 'string' is not assignable to type 'ArrayBuffer'.

on this.props.uploadExcel("Category", binaryStr);. any advice? Thanks

score 0 · Answer 1 · answered Jun 07 '22 at 18:05

The problem is that FileReader.result can be either a string or an ArrayBuffer (in typescript terms, it is string | ArrayBuffer, i.e. "string or ArrayBuffer"). Your function uploadExcel is declared to accept only ArrayBuffer as a parameter.

You may need to use some type casting. The easiest way (if you are sure, that binaryStr actually contains ArrayBuffer and not a string):

this.props.uploadExcel("Category", binaryStr as ArrayBuffer);

Other than that, it looks like you need to actually read the file (i.e. call one of the read methods of the FileReader, like reader.readAsArrayBuffer(file). Now, the variable 'file' seems to be unused.

Upload the dropped file inside Read DropZone to SharePoint online document library inside SPFX

1 Answers1