1

While working with adding attachment to sharepoint works fine with workbench i.e.-https://sample.sharepoint.com/sites/Dev/_layouts/15/workbench.aspx

but while deployed at sharepoint site it generates 404 error like belowenter image description here

Not sure why this is happening. here's my code. Using pnp

import "@pnp/sp/webs";
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

private onSubmit(): void {
const endpoint: string = currentSiteUrl + `/_api/Web/lists/getbytitle('` + listName + `')/items`;
this.setState({
  status: 'Creating item...',
  items: [],
  dataNull: true
});

const body: string = JSON.stringify({
  'Title': this.state.subject,
  'Comments': this.state.comments
});

this.props.spHttpClient.post(endpoint,
  SPHttpClient.configurations.v1,
  {
    headers: {
      'Accept': 'application/json;odata=nometadata',
      'Content-type': 'application/json;odata=nometadata',
      'odata-version': ''
    },
    body: body
  })
  .then((response: SPHttpClientResponse): Promise<IListItem> => {
    console.log(response);
    return response.json();
    console.log(response);
  })
  .then((item: IListItem): void => {
    this.setState({
      status: `created`,
      hideMessageBar: true,
      items: []
    });
  if (this.state.UploadedFilesArray !== null) {
      try {
        const web = Web(currentSiteUrl);
       let fileItem = sp.web.lists.getByTitle(listName).items.getById(item.Id);
       fileItem.attachmentFiles.add(this.state.UploadedFilesArray.name, this.state.UploadedFilesArray)
       .then((): void => {
      this.setState({
       UploadedFilesArray: null
     });
   }); 
      } catch(e){
        console.log(e);
      }
    }
    else {
      this.setState({
        comments: '',
        subject: '',
        dataNull: false,
        UploadedFilesArray: null
      });
    }
  }, (error: any): void => {
    this.setState({
      comments:'',
      subject: '',
      UploadedFilesArray: null,
      status: 'Error while creating the item: ' + error,
      items: []
    });
  });
  }

also after upload I want to make file empty(UploadedFilesArray) it has File data type, Not sure null isn't working.

I want to solve this 404 issue, not sure why this is happening.....

0

You are probably getting the 404 error (Not found) for either the list or the item. Be sure that the list name and item id you are specifying are correct.

A good practice is to include error handling in your function, that can give you more information on what is going wrong:

let fileItem = sp.web.lists.getByTitle(listName).items.getById(item.Id);
fileItem.attachmentFiles.add(this.state.UploadedFilesArray.name, this.state.UploadedFilesArray)
   .then((): void => {
    this.setState({
    UploadedFilesArray: null
  });
}).catch(error => {
  console.log(error);
});

Update #2 from comments:

Try modifying your code to look like this:

if (this.state.UploadedFilesArray !== null) {
    try {
        const web = Web(currentSiteUrl);
        sp.web.lists.getByTitle(listName).items.getById(item.Id)
          .attachmentFiles.add(this.state.UploadedFilesArray.name, 
            this.state.UploadedFilesArray)
                .then((): void => {
                    this.setState({UploadedFilesArray: null});
                });
    } 
    catch(e){
      console.log(e);
    }
}

It is possible that you will need to actually retrieve the item before doing the upload (see the .get() I added)

| improve this answer | |
  • Do you have idea, to set UploadedFilesArray type empty after upload, like set state, seems like null is not working... – XFW Apr 18 at 17:27
  • Do I use await? Do you suggest that? wait before creating list then perform attachment upload? Can you help me how to use await here? – XFW Apr 18 at 17:32
  • I think you need to share more of your code - but with await you would put that in front of your statement that creates the list. It will then wait for that promise to resolve before moving on. – Rune Sperre Apr 18 at 17:34
  • I am new to this, Can you help me with that? – XFW Apr 18 at 17:53
  • You can edit your question and add more of your code there, it will be easier to provide you with examples then... (the code before what you already included that creates the list?) – Rune Sperre Apr 18 at 17:54

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.