Unexplained Network error when trying to retrieve attachments

Forms SharePoint Online
1

Hiya @mnikitina

I am trying to run some code to retrieve the first attachment of a newly created/edited item and them update the item with the details of the attatchment (I can't seem to get it to work using PnP):

 fd.spSaved(function(result) {
    fetch(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Inventory')/items(" + result.Id +")/AttachmentFiles",
    {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json;odata=verbose',
            'Accept': 'application/json;odata=verbose'
        }
    })
    .then(response => response.json())
    .then(function (data) {
        var attachmentURL = data.d.results[0].ServerRelativeUrl;
        var noAttachmentURL = '/sites/COREaaS-OrderSystem/SiteAssets/no-image-icon.png';
        if (attachmentURL){
            console.log(attachmentURL);
            //update item
            inventoryItems.getById(fd.itemId).update({
                Photo: {
                    Description: Item Photo,
                    Url: attachmentURL
                },
                Photo_x0020_URL: attachmentURL
            })
        } else {
            //No picture - update item
            inventoryItems.getById(fd.itemId).update({
                Photo: {
                    Description: Item Photo,
                    Url: noAttachmentURL
                },
                Photo_x0020_URL: noAttachmentURL
            })
        }
    })
});

This works in Edit view if I put it in the fd.beforeSaved, but of course, if they change the attachment, it doesn't work, I was thinking of using your attachment control, but the client can't have their data on anyone else's server. When I do it in the fd.Saved I get an network error in the console.
Is there any way I can update the attachment?

I know I can use flow or a workflow, but they take a long time to run, Javascript is just so much quicker!
Thanking you in advance! :slight_smile:

2

Not sure if this makes any difference but to me your code should work in the 'spSaved' handler, but I don't think the result object allows use of fd.itemId, I think you should be using result.ID in all references to the item. Maybe change those references and try again?

Is there also the possibility that the user might attach more than 1 item? Would this also need to be handled? I've put some example code below which has worked for me in the past in the spSaved handler, although you might want to ensure the form does not redirect until the update is done by changing the redirect url to null and then provide a redirect url once the updates have completed.

Also, I would consider using the pnp-js shorthand rather than fetch, if the list is in the same site as your form:

const myItemID = result.ID;

const item = sp.web.lists.getByTitle('Inventory').items.getById(myItemID);

item.attachmentFiles.get().then(function(attachments){

if (attachments.length > 0) {
attachments.forEach(function(attachment){
//do additional pnp call to update the items metadata
});
} else {
//do additional pnp call to update the item metadata
}

});

Hope this is helpful. I haven't tested the above but I think it looks ok.

Andy

2 Likes
3

Thanks @abolam

You caught the error there! I wasn't sure how to use the pnp for attachments. I will try it out and get back to you!

So... thanks so much @abolam, you put me on the correct track, was even able to clean up the code a bit as well! Got it working with this code:

 fd.spSaved(function(result) {
    const itemId = result.Id;
    const item = inventoryItems.getById(itemId);
    item.attachmentFiles.get()
    .then(function (attachments) { 
        console.log(attachments);
        var attachmentURL = '/sites/COREaaS-OrderSystem/SiteAssets/no-image-icon.png';
        //Update attachmentURL if neccessary
        if (attachments.length>0){
            attachmentURL = attachments[0].ServerRelativeUrl;
        }
        //Update item
        inventoryItems.getById(result.Id).update({
            Photo: {
                Description: 'Item Photo',
                Url: attachmentURL
            },
            Photo_x0020_URL: attachmentURL
        });
    });
});
1 Like