CODEWITHSUNDEEP
sharepointmicrosoft-graph-apikql
JK.
JK.

Reputation: 21585

Sharepoint MS Graph API search for images returns DispForm.aspx instead of the image

When searching for images in a Sharepoint site, I would expect the hits to have webUrl for the actual image file. Instead each hit is has webUrl of DispForm.aspx showing the image details (name, tags, description)

POST https://graph.microsoft.com/v1.0/search/query

{
    requests: [{
        entityTypes: ['listItem', 'driveItem'],
        query: { queryString: 'Filetype:png 
                 AND Path:https://example.sharepoint.com/sites/photos' }, 
    }],
}

But the result has a webUrl that points to DispForm.aspx. Why? How do I get it to point to the actual image file

{
    hitId: '...', 
    rank: 1, 
    resource: {
        @odata.type: "#microsoft.graph.listItem",
        webUrl: "https:// example.sharepoint.com/sites/photos
/SiteAssets/Forms/DispForm.aspx?ID=123"
    }
}

All the images are in the sites Document Library, so I'm not sure if they count as driveItems or listItems. It has the problem either way.

I want to be able to show these images in my web app, so I need the webUrl of the image, not DispForm.

If I search for other file types eg PDF, I get the actual webUrl for the PDF file. So why is it different for images?

Upvotes: 0

Views: 105

Answers (1)

user2250152
user2250152

Reputation: 20843

There is no preview URL for the file and you are probably not interested about download URL. I think that you can use thumbnails for the driveItem. The thumbnails are not returned by default when you search for files by POST https://graph.microsoft.com/v1.0/search/query

The steps should be:

  1. Search for the driveItem
POST https://graph.microsoft.com/v1.0/search/query
{
    requests: [{
        entityTypes: ['driveItem'],
        query: { queryString: 'Filetype:png 
                 AND Path:https://example.sharepoint.com/sites/photos' }, 
    }],
}

The hit will contain id and the parentReference

"id":"015JEW3LNRTJT3QOW75VEIV43DWDVKT5YY", // use this
"parentReference": {
  "driveId": "b!cbcekAxP9kO...",
  "id": "015J...", // don't use this
  "sharepointIds": {
    "listId": "0546ed25-8fc1-4856-b3c4-5b762df2c11d",
    "listItemId": "16",
    "listItemUniqueId": "b8679ab1-df3a-48ed-8af3-63b0eaa9f718"
  },
  "siteId": "contoso.sharepoint.com,<guid>,<guid>"
}
  1. Use the id and the driveId from the parentReference to retrieve thumbnails
GET https://graph.microsoft.com/v1.0/drives/{drive_id}/items/{drive_item_id}/thumbnails?$select=large

The response will looks like

{
    "value": [
        {
            "large": {
                "height": 800,
                "url": "https://westeurope1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=png&cs=ddd&docid=xxx&width=800&height=800&cb=63877185109",
                "width": 800
            }
        }
    ]
}
  1. Use the url in your web app

Other option: In step 2, retrieve the webUrl of the driveItem

GET https://graph.microsoft.com/v1.0/drives/{drive_id}/items/{drive_item_id}/webUrl

Now the webUrl contains the direct link to the image.

Upvotes: 1

Related Questions