Podio Javascript SDK: Client Restricted from displaying Image from podio

Question

I'm currently using Podio JS SDK to connect to the podio REST API. I have setup a login screen to capture username and password using the username and password authentication flow.

I can make request and get information that I need. In one of my request i receive an image url. I then place the img url into an image tag like so,

<img src="img.url"/>

The problem is that my client can't not view the image. I looked here at Working with files in order to find an answer.

The problem is that the image can only be viewed in the client by a user who is currently logged in, but I've already authenticated.

Am I missing something? How can I show the image, being that I've already logged in with the username and password, I'm storing the access_token, refresh_token, etc. in local storage and can make all other necessary calls.

score 0 · Answer 1 · answered Oct 26 '15 at 23:35

Try sending the images via headers. This used to work, though it is a quite clunky solution. Might be deprecated with the new PodioAPI.

First set up your function.

function showImage($item, $index, $id, $style = '', $class='', $alt='',$imgtitle='') {

foreach($item->fields as $field) {

    if($field->field_id== $id) {
        $picture_id = $field->values[$index]['value']['file_id'];
        echo "<img style='$style' class='$class' src='getImage.php?id=$picture_id' alt='$alt' title='$imgtitle' />";
        global $picture_id;
    }
}
}

This would be your getimage.php. You could also setup a PDF like that.

$img_id = $_GET['id'];

$cache = new cache(
        ...
        );

$file_id = "image{$img_id}";
if(!$cache->has($file_id)) {
    $file = $cache->set($file_id, PodioFile::get($img_id));
} else {
    $file = $cache->get($file_id);
}

$picture_id = "image_cache_{$img_id}";
if(!$cache->has($picture_id)) {
    $image = $cache->set($picture_id, Podio::get($file->link, array(), array('file_download' => true))->body);
} else {
    $image = $cache->get($picture_id);
}

header('Content-Type: image/png');
echo $image;

hope it helps.

Thank you. I used the solution I found below. – Abdullah Rasheed Oct 27 '15 at 00:09 — Abdullah Rasheed, Oct 27 '15 at 00:09

score 0 · Accepted Answer · answered Oct 27 '15 at 00:09

Though you have an access token and can access all of your podio data by using the username and password authentication, Podio's authentication is cookie based, so if your client doesn't authenticate through the podio web app's login screen your client won't be able to read images directly from the web app. Your access will be blocked.

Solution

If you do not authenticate through the client, but have access to the api, you can download the raw image data from here: https://api.podio.com/file/{{imgId}}/raw. Once you get the raw image data you can encode the data into base64 format and you use a Data URI as the src of your <img> tag in your client if it is a web client.

Podio Javascript SDK: Client Restricted from displaying Image from podio

2 Answers2