Skip to main content

Hi, I am trying to display file on a website simply using the preview like this:



    <div class="preview-container"></div>

<script>

var preview = new Box.Preview();

preview.show("FILEID", "DEVELOPER_ACCESS_TOKE", {

container: ".preview-container",

});

</script>



Using the developer access toke works great, but it has a 60minute ligfe span, so I found this page which is about creating a JWT, so I implemented it and it creates a code as $access_code but its super long and therefore doesn’t work with the previewer when using like this:



<div class="preview-container"></div>

<script>

var preview = new Box.Preview();

preview.show("FILEID", $access_token, {

container: ".preview-container",

});

</script>



Any idea what I am doing wrong?

Hi @user190 , welcome to the forum!





At first glance, nothing, the length of the token shouldn’t be a factor here.



Try playing with this CodePen and set the token using a variable to do some testing.



On an unrelated subject, please note that you don’t want to use your all powerful JWT token directly in a UI Element. Typically we should downscope the token to limit its privileges.



Let us know if this helps



Cheers


Thanks for the reply. I have tested various options and whenever I use the token generated in $access_token, the preivewer shows ‘We’re sorry, the preview didn’t load. Please refresh the page.’. The saem error that shows if I put a random value as the token.



This is making me think that the access token is not linked properly.



I have a screenshot of the app settings in box.com. Can you see anythign that I have set wrong?




As mentioned I have followed the intsructions here and I don’t get errors and it gives me a code and the config.json is correct with the client id/secret etc.


Think I may have figured it out or atleast got further down the road. I used to have the files in the root of box.com, I created a folder and then created a group with the apps service account ID email as a mamber and the folder as viewable. It now loads the file 🙂


Awesome!



Yes, a JWT app creates a service user, for which content needs to be shared.



For future reference, you can also inspect your browser console, there should be more information there, about the error.



Typically a reference to CORS, 403, 401, or 404



Cheers


Reply