Update document library item not working

[bulbapeppe]

Dear all,
I started using sharepoint framework and pnp (pnp version 3.0.6).
I tries your example below but it doesn't work: the code inside .then that should update the title metadata of the just created file is never executed.

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

f.file.getItem().then(item => {

    item.update({
        Title: "A Title",
        OtherField: "My Other Value"
    });
});

});

I made many tests and I am able to perform several tasks (like for example to read the content from an existing file and then creating another file, or to simply update the metadata of an existing file). But the code above (i.e. trying to create a new file in a document library and update its title) doesn't work.
Do you have any suggestion? Is it a known issue?

[koltyakov]

Hi @bulbapeppe,

The code looks ok. And it worked for me.

With a bit structural changes:

pnp.sp.web
  .getFolderByServerRelativeUrl('/sites/dev-a/1/Shared%20Documents')
  .files
  .add('test.txt', '123', true)
  .then(f => f.file.getItem())
  .then(item => {
    return item.update({
      Title: 'A Title'
    });
  })
  .then(console.log)
  .catch(console.error);

I got:

Are you sure there are no errors in a console and network tab? Could you reformat promises return syntaxes and try with the catch?

[bulbapeppe]

Hi @koltyakov,
thank you, but it didn't work.
I tried it using Chrome.
The file is created, the Title is NOT updated.
I attach

• the ts file
• some log of the console
• what the system logs when I execute the following commands (no error is detected):
  gulp bundle --ship
  gulp package-solution --ship

I forgot to say that if I try to update an existing file, it works.
It seems like that the commands inside the then after having added the file is not triggered.

Do you have any idea?
test and log.zip

[bulbapeppe]

Sorry, I forgot a file that had to be added to the previous zip.

[koltyakov]

Created the simplest SPFx webpart (removed every unrelated stuff):

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { Web } from 'sp-pnp-js';

export default class FileUploadWebPart extends BaseClientSideWebPart<void> {

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <span>Title</span>
        <input type="text" id="doc-title" value="Document name">
        <input type="file" id="doc-upload-file">
        <input type="button" value="Upload" id="doc-upload-btn">
      </div>
    `;
    document.getElementById('doc-upload-btn')
      .addEventListener('click', () => this.uploadDummyDocument());
  }

  private uploadDummyDocument() {
    const title = (document.getElementById('doc-title') as HTMLInputElement).value;
    const files = (document.getElementById('doc-upload-file') as HTMLInputElement).files;
    if (!title || files.length === 0) {
      return console.error('Missing data');
    }
    const web = new Web(this.context.pageContext.web.absoluteUrl);
    const payload = { Title: title };
    web.getFolderByServerRelativePath('Shared Documents')
      .files.add(files[0].name, files[0], true)
      .then(({ file }) => file.getItem())
      .then(item => item.update(payload))
      .then(console.log)
      .catch(console.error);
  }

}

All went well. A file was uploaded and metadata updated.

Can you try creating Web object using this.context.pageContext.web.absoluteUrl or runing PnPjs setup with spfxContext, like in the example above and wiki article?

Also, it would be good to update sp-pnp-js to the latest (3.0.7).

UPD:

Yeah, and in your sample from archive I can't see anything incorrect. But missing web context initiation. Cause pnp.sp.web tryes using current web and under some surcumstances current web can be detected wrong, so it's always a case that recommendations from wiki should be followed with combination of SPFx.

[bulbapeppe]

Great!!!!
It worked!
Thanks!

[patrick-rodgers]

Thanks, going to close this as answered. Please reopen should you need to continue the conversation.