PNP js API document update issue

Question

I tried creating inserting a document in a document library using pnp js library. Problem comes in a specific case:

1. A document is inserted in a library.
2. Now this document is deleted and sent to recycle bin.
3. The same document is uploaded is uploaded again in the same library from local desktop.
4. Now when I try updating the corresponding Metadata in a second call, wrong id of the document is received. The id received is of the document which was deleted and is present in the recycle bin.

Any suggestions why this case is produced?

Answer 1

This is produced because of your browser's caching mechanism. If you open developer tools and disable the cache from network tab, this will not happen.

Thankfully, we dont have to ask end-users to do that as we can always request the latest uploaded file's ID by passing the Cache-Control header and setting its value to no-cache. This is will always fetch the latest uploaded file's ID. This will involve additional REST API request to fetch the latest ID but that is trade-off you will have to live unfortunately.

You can modify your code based on the below sample code:

web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test/").files.add("abcd.txt", file, true).then(f => {

    f.file.listItemAllFields.get(new ODataDefaultParser(), {
                headers: {
                    "Cache-Control": "no-cache",
                }
            }).then(function (item) {
                item.update({
                    Title: "Updated Title",
                    Description: "Updated desc"
                });
            });
        });       
});

References - Working with Files in PnP JS

Modified from - Problem with file-upload and setting metadata due to cached File.listItemAllFields