Multiple file upload

[MarioZagreb]

What version of PnPjs library you are using

3.x

Minor Version Number

3.24.0

Target environment

SharePoint Framework

Additional environment details

Versions I am using: "@pnp/pnpjs": "^2.15.0", "@pnp/sp": "^3.24.0",

Question/Request

I am using this code in spfx web part to upload documents in doc lib with metadata. It works fine for 80 % of time. But, occasionally, it uploads same file multiple times. At least one file a day has problems (different users). It uploads same file 3 times (with metadata). Then, another uploaded 1 time with metadata and then same file 3 times without metadata. Yesterday, there were 36 uploads of the same file without metadata and then 1 with metadata.

It seems like there is a network problem when users starts to upload a file, and then (after the connection is established again), it uploads same file over and over again...

What can I do here? It doesn't happen every day, but I have to check each upload manually to verify...

var pathnameNew = window.location.pathname.substring( 0,(window.location.pathname).toLowerCase().indexOf("/MYSITENAME")); const sp = spfi().using(SPFx(this.context));

  `sp.web.getFolderByServerRelativePath(pathnameNew + "/PATH1/PATH2/").files.addUsingPath(fileName, selectedFile[0], { Overwrite: false }).then(f => {
    f.file.getItem().then(item => {
      var it = item;
        item.update({
          Column1: "title1",
          Column2: 1,
          Column3: 2,
          Column4: 3,
        }).then(() => {
          self.ShowCustomAlertWithRefresh("Saved!");
        }).catch((error:any) => {
          console.log("Error: ", error);
        });
    });
  });`

[juliemturner]

First, remove the package @pnp/pnpjs from your project. Essentially, you're using 2 different versions and that one is deprecated.

As far as why your UI is uploading multiple times and with/without metadata is likely related to your overall project and this little snippet isn't enough for anyone to help you. On the surface it seems fine, but where it's getting called from and how you trap the state of the upload all matters.

[MarioZagreb]

First, remove the package @pnp/pnpjs from your project. Essentially, you're using 2 different versions and that one is deprecated.

As far as why your UI is uploading multiple times and with/without metadata is likely related to your overall project and this little snippet isn't enough for anyone to help you. On the surface it seems fine, but where it's getting called from and how you trap the state of the upload all matters.

Thanks for the reply. What exaclty do you mean by "how you trap the state of the upload" ?

This is how my button is defined in html:

Save

And I have this event attached to the button: document.getElementById('btnSaveNewReceipt')?.addEventListener('click', () => this.SaveNewReceipt());

And then in the "SaveNewReceipt" is code I paste in previous post.

[jonathan-m-smith]

What exaclty do you mean by "how you trap the state of the upload" ?

I could be off base here, but I believe Julie is referring to something like this: How to monitor the progress of a Javascript fetch - request and cancel it on demand

One thing I'm noticing here is that there isn't a method for handling multiple clicks, so perhaps the handful of users who are reporting issues are clicking repeatedly and triggering the upload method multiple times?

[MarioZagreb]

thank you very much, will check it out

[bcameron1231]

Closing this issue as answered. If you have additional questions or we did not answer your question, please open a new issue, ref this issue, and provide any additional details available. Thank you!

[github-actions[bot]]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.