Onedrive-api-docs: embed link for image

[rkulow]

When I call the API to get an embed link for an file, then the API returns an Iframe. (In the request data: {"type": "embed"}). But when I call this request for an image, then the API returns also an Iframe and not like the OneDrive Web an vaild <img> tag.
How can I get the real <img> tag for embeding an image with the API?

[ostyn]

Any guidance on this? I would also appreciate a solution. Thanks!

[nklsl]

Anything new on this topic? Having the same problem.
Thanks in advance.

[ificator]

To get a URL compatible with <img> tags you'll need to make a couple of requests.

Create an embed link

POST https://api.onedrive.com/v1.0/drive/root:/test.jpg:/oneDrive.createLink HTTP/1.1
Authorization: bearer *snip*
Content-Type: application/json
Host: api.onedrive.com
Content-Length: 23

{
  "type": "embed"
}

{
  "id": "PermissionId",
  "link": {
    "type": "embed",
    "webUrl": "https://onedrive.live.com/embed?resid=ABCD%211234&authkey=!ABCdEfgHiJklMNO",
    "webHtml": "<iframe src=\"https://onedrive.live.com/embed?resid=ABCD%211234&authkey=!ABCdEfgHiJklMNO"\" width=\"98\" height=\"120\" frameborder=\"0\" scrolling=\"no\"></iframe>"
  },
  "roles": ["read"],
  "shareId": "s!Aasdjfgasldghlfgafg",
  "expirationDateTime": "0001-01-01T00:00:00Z",
  "hasPassword": false
}

Request thumbnails for the shared item

GET https://api.onedrive.com/v1.0/shares/s!Aasdjfgasldghlfgafg/root/thumbnails HTTP/1.1
Content-Type: application/json
Host: api.onedrive.com
Content-Length: 0

{
  "value": [{
    "id": "0",
    "large": {
      "height": 800,
      "url": "https://bak0la.bn1301.livefilestore.com/y4mHlotsohstuffjhe0",
      "width": 533
    },
    "medium": {
      "height": 176,
      "url": "https://bak0la.bn1301.livefilestore.com/y4m0lotsohstuffc7s",
      "width": 117
    },
    "small": {
      "height": 96,
      "url": "https://bak0la.bn1301.livefilestore.com/y4mDlotsohstuffQr8",
      "width": 64
    }
  }]
}

You can then use any of the url values with an <img> tag to render the image directly.

[ostyn]

How stable are these thumbnails? If I generate one today how far in the future will it be around?
Also thanks! Glad to get a response!

[ificator]

Using this approach the thumbnails should work until the file is either deleted, or the embed permission is revoked.

I realized I only implicitly called out that you should NOT provide the Authorization header in the request to get the thumbnails, so I'm explicitly doing that now. If you do include the header, the thumbnails you get back will be bound to that token and therefore expire. It's only thumbnails bound to the revocable share that do not expire.

[raRaRa]

If I were to create a slideshow website from OneDrive folder that contains both images and videos, should I follow the steps above? What would be the best way to get permanent links to multiple media files from OneDrive?

So for example if I followed the method above, would I first list all the children in the folder, then send POST request for each individual media to get embed link and then finally send a GET request to get the thumbnails?

(Unsure if this should be a separate issue)

Thanks.

[ificator]

@raRaRa it really depends on how your slideshow will function. Here's a brain dump that may or may not help you :)

Approach 1: On Demand
With the on demand approach you wouldn't worry about pulling all of the URLs before you start. You'd basically make calls to /children with a suitable page size, and consume all of the relevant URLs in sequence until the page is exhausted. Once the page is exhausted you'd make another query using the @odata.nextLink to get the next set with fresh URLs. That way you'd theoretically never have URLs that would expire before they're useful, since thumbnail URLs should last for 24 hours without the shares dance mentioned above, so unless your page of children is nothing but long videos you're probably fine.

This approach will not work if your website wants to try and rely on any form of caching based off of the URLs though.

Approach 2: Embed Link for Folder
You should be able to generate an embed link for the parent folder, then using a query similar to the above you could get the URLs for the children:

GET https://api.onedrive.com/v1.0/shares/s!Aasdjfgasldghlfgafg/root/children