0

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.

2
  • What's the file size? Sep 24 '20 at 16:40
  • @AkshayRandive about 100 KB and it's a docx (i've also tried with bigger files and other file type)
    – Pepozzo
    Sep 24 '20 at 16:44
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

0

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>

    );

  }

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.