Online - SPFx React File Upload problem uploading files

Question

I'm using SharePoint Online and I'm using react-file-upload webpart available here https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-file-upload

I've tested this webpart and I've found some errors, so I've changed a bit the source code to meet my requirements and using a new version of DropzoneJS component and PnP to make calls when a file is uploaded.

The webpart is showing on my SharePoint without problems, but, sometimes it fails returning this error when I try to upload a file: "Server responded with () code". It seems quite randomic, the only thing that I could say is that it happens when page is not refreshed for 5-10 minutes.

In Google Chrome console I receive this error:

POST https://mytenant.sharepoint.com/test/_api/web/getFolderByServerRelativeUrl('/test/TestDocuments')/files/add(overwrite=true,url='test%20document.docx') net::ERR_CONNECTION_RESET

Then I tried to check differences in network tab when a file is correctly uploaded and when it's not.

These are my request headers:

:authority:mytenant.sharepoint.com
:method:POST
:path:/test/_api/web/getFolderByServerRelativeUrl('/test/TestDocuments')/files/add(overwrite=true,url='test%20document.docx')   
:scheme:https   
accept:application/json
accept-encoding:gzip, deflate, br
accept-language:it,it-IT;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
cache-control:
max-age=0
content-length:65363
content-type:application/json;odata=verbose;charset=utf-8
cookie:[bla bla bla]
origin:https://mytenant.sharepoint.com
referer:https://mytenant.sharepoint.com/test/SitePages/Test-upload-react.aspx
sec-fetch-dest:empty    
sec-fetch-mode:cors
sec-fetch-site:same-origin
user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36 Edg/85.0.564.51
x-clientservice-clienttag:PnPCoreJS:@pnp-1.3.11
x-requestdigest:[bla bla bla],24 Sep 2020 15:11:00 -0000.

I've also tried using the webpart as is, without customizing the code and it does the same behaviour.

@AkshayRandive about 100 KB and it's a docx (i've also tried with bigger files and other file type) — Pepozzo
– Pepozzo, Commented Sep 24, 2020 at 16:44

Akshay Randive · Accepted Answer · 2020-09-25 05:47:09Z

0

I just checked the code of web part from git. The web part is using react-dropzone-component I believe the error is due to this package and not SPFx. This package is using dropzone.js and i could find a similar issue reported for the same

https://stackoverflow.com/questions/47826042/server-responded-with-0-code-issue-in-dropzone-js

answered Sep 25, 2020 at 5:47

Akshay Randive

2,8851 gold badge18 silver badges31 bronze badges

Add a comment |

Jerry · Accepted Answer · 2020-09-25 05:49:59Z

The Rest request to upload file should be correct.

And from the error message, "net::ERR_CONNECTION_RESET", it seems it's the network related issue.

I suggest you can switch another network environment to see if the issue will happen again.

And here is a sample code in my SPFX solution to upload file for your reference:

private uploadFileFromControl(){

     let file = (document.querySelector("#newfile") as HTMLInputElement).files[0];
     //Upload a file to the SharePoint Library
     sp.web.getFolderByServerRelativeUrl(this.props.ctx.pageContext.web.serverRelativeUrl + "/Shared%20Documents")
     .files.add(file.name, file, true)
     .then((data) =>{
      data.file.checkin("MajorCheckIn",CheckinType.Major);
      alert("File uploaded sucessfully");
     })
     .catch((error) =>{
       alert("Error is uploading");
     });
  }

  public render(): React.ReactElement<IHelloWorldProps> {

    return (
      <div>
        <input type="file" id="newfile"/>
        <p>
        <button onClick={() => this.uploadFileFromControl()} >
                       Upload
        </button>
      </p>
      </div>

    );

  }

Stack Exchange Network

Online - SPFx React File Upload problem uploading files

2 Answers 2

Your Answer

Hot Network Questions

Online - SPFx React File Upload problem uploading files

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions