Skip to main content
Question

We're sorry, the preview didn't load. Please refresh the page.

  • May 22, 2025
  • 16 replies
  • 23 views
C
Forum|alt.badge.img

Hello there,

I have been trying to setup the new box-ui-elements Javascript preview library. I previously used the Iframe embed technique to successfully load a preview with annotations, and I was hoping to do the same thing with custom Javascript hooks on events so that I could control the user experience more directly. 

Here is my code:

showBoxViewer: function (token) {

      window.preview = new Box.Preview();
      window.preview.show(this.resource.get('external-id'), token, {
        container: '.viewer-container',
        collection: [this.resource.get('external-id')],
        header: 'light',
        logoUrl: 'http://i.imgur.com/xh8j3E2.png',
        showAnnotations: true,
        showDownload: true
      });
}

Here is the output:

BOX_34k7vhq0xdws5m2g970380m0zf0nybbu.png

The resource I am trying to preview is a PDF, and I have previously previewed and annotated it successfully with the embedded Iframe, so I assumed it should work identically with this method. The download button works correctly, and all of the requests made by the JS library to the Box API returned 200 and had payloads related to the file I am trying to preview.

 

This screenshot was taken in Chrome on OSX.

    16 replies

    C
    Forum|alt.badge.img

    Here is a screen capture of the error output in the console:

     

    BOX_nd5bfrrw6dk427fdfhlflvukmwj5ohp5.png

    C
    Forum|alt.badge.img

    This might be due to a CORS error. Have you whitelisted your domain in the CORS Allowed Origins configuration as described here? https://developer.box.com/docs/box-content-preview#section-cors-cross-origin-resource-sharing-

    C
    Forum|alt.badge.img

    Hey Tony,

    Yes I have actually. I used code pen to test out my code as well, and whitelisted codepen's urls, and it works on codepen, but not my localhost.

    Locally, I have an nginx config setup so that I can use our production urls locally: https://seminar-local.minervaproject.com -> 127.0.0.1:8080

    It can run on both https/http locally, but right now the SSL cert is expired. Either way the box preview does not work on my local machine. I find that rather intriguing. None of the requests made to the box api fail, so there is no hint of a CORS issue.

    C
    Forum|alt.badge.img

    Here is the request data coming from the box SDK

    Request URL:https://api.box.com/2.0/files/20***phone number removed for privacy***?fields=permissions,shared_link,sha1,file_version,name,size,extension,representations,watermark_info,authenticated_download_url
Request Method:GET
Status Code:200 OK
Remote Address:107.152.24.197:443
Referrer Policy:no-referrer-when-downgrade

Response Headers
view source
Access-Control-Allow-Origin:http://seminar-local.minervaproject.com
Age:0
Cache-Control:no-cache, no-store
Connection:keep-alive
Content-Encoding:gzip
Content-Length:576
Content-Type:application/json
Date:Thu, 10 Aug 2017 19:54:54 GMT
ETag:"1"
Server:ATS
Strict-Transport-Security:max-age=31536000; includeSubDomains
Vary:Origin,Accept-Encoding

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8
authorization:Bearer 1!uQkjtvtEfOdfhtRxQd3OL6kM6GlDgkU4d7ivBKVd7Vc8Zo3qGCb4Bqi4Cnr_BbTe3-9IwnWPpZcGHDy9EpFL0kjwAm3kH7Huet6EYw4q53y_TgBX5LDqeBOUKKMKvGTR6KVpRvCXAZ2_yocimG_lj4izJbhH9LzfjM1zdqpdUhFKvAzj5pCTTmkrtBnSFUrHEDhxoyNekigGw-pHaMpaYsyxBANeaCmFWpdQmAVhwg3UTOo_qMwhBBUlYm4f50XRQcp0m0OIuKMWNBlvSVXeTeBR0jCCbDziORazW9Mu-p5wSerEZuyhHiCwapbi2Jixy2EIE0lipOyM7_kEpjzJzyHq13emUvkqIwdBb81-Ha_lSXMrtNCsa2OJ51nxlR6RU-uf7wDavyicXy0dVGub8_h55CQD_STjuBbmFTyVd-80VJbwv14c7oh_DdcRu8UsYlMaoj6SYcx8Lz-7yXFtmxGRnG4pHV93LZ25hzFTHdXTyurWpraOX_FOx7OaC1xQixkaC4T3od9dFMy370_5H_OhNl7ncLN6zodyU52JHJ08867fvhOdy08igO9f3Y3tdiJ_0vPM1sdj6j4sowht0er3Hi0aqpJPqjRGFu8zDjTW3zyCEvTTQKoyrNrK93b_6-mXChm785S3XS6UMWQNPf3ridVhuzbuCZwuy7V4Y8WYsH8KXTQn1Q-cpkwgLJzjxxxZ4VEjsnu3IhcIn70XMJlCAdjDfLMKyP-f2s6ihiuoyIEEa4qEdBQye1s0d7Gx2L8KWav_uCY97jbnZzZBSwqSTPM7n9FDjizDJ8Rv2905FWrkOg..
Cache-Control:no-cache
Connection:keep-alive
Host:api.box.com
Origin:http://seminar-local.minervaproject.com
Pragma:no-cache
Referer:http://seminar-local.minervaproject.com/app/assignment-grader/11169/users/783
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
x-box-client-name:box-content-preview
x-box-client-version:1.4.0
x-rep-hints:[3d][pdf][text][mp3][jpg?dimensions=1024x1024&paged=false][jpg?dimensions=2048x2048,png?dimensions=2048x2048][dash,mp4][filmstrip]
Query String Parameters
view source
view URL encoded
fields:permissions,shared_link,sha1,file_version,name,size,extension,representations,watermark_info,authenticated_download_url
Name
20***phone number removed for privacy***?fields=permissions,shared_link,sha1,file_version,name,size,extension,representations,watermark_info,authenticated_download_url
api.box.com/2.0/files
20***phone number removed for privacy***?fields=permissions,shared_link,sha1,file_version,name,size,extension,representations,watermark_info,authenticated_download_url
api.box.com/2.0/files
    C
    Forum|alt.badge.img

    After a lot of experimentation, it seems my issue is related specifically to our RequireJS/Marionette application. Utilizing box preview in every other context locally works. 

    The reason I am not able to debug appears to be because the JS file Box provides catches all exceptions, and does not allow them to be inspected. The file is also minified, so I obviously cannot walk through the execution to see what's going wrong. 


    C
    Forum|alt.badge.img

    I'm glad you managed to isolate it to one configuration! Could you please share some minimal example of your setup so we can try and reproduce on our end?

     

    Our source code is also available on https://github.com/box/box-content-preview if you're interested in running a development build with proper source maps and breakpoints.

    C
    Forum|alt.badge.img

    Hello,

     

    Tonight I started getting the same error message "We're sorry, the preview didn't load. Please refresh the page." It started happening after editing the word file, it only does it on that one file. And if I revert to a earlier revision prior to tonight's edit it goes away. I've reverted and added a space and it causes the error to reappear.

    C
    Forum|alt.badge.img

     The behavior you're seeing this evening may be related to a current issue being investigated by our Engineering Teams. Please monitor https://status.box.com for updates.

    C
    Forum|alt.badge.img

    I'm seeing this now in code pen, in the drop box UI and in the preview I tried using as well. Is this an ongoing issue?

    C
    Forum|alt.badge.img

    The site issue should be resolved. Can you please share the codepen you're seeing issues with?

    C
    Forum|alt.badge.img

    I just used the one that is linked in github:  https://codepen.io/box-platform/pen/rmZdjm

     

     

    with my ACCESS_TOKEN

    1!0i8O9kcjMINyS25IpSX_TpyP1BxYLWEGdAx4h7qQxWUCZDXm4nm4sGp-Fg4waFRelj8puIDsHtrMXOzDQdvFD31fTp2lb8_JUwGwjBxXrpGIzdQEeZouD-yKvl8P9zBhLib-yoigCnnZeej_nNj4H3jbDa2vfAsZMUcKCfRBMKyelSwq6m035-9_Mjh_RRmT9IUVFW1lhhCfIFd0F2lcJmE1N15N4GB05IGeTVKq65ky8sfXRSGufdmq0_FYi1XFs9m37hjfcD4iHlE-RX-I

     

     

    and file ID

    24***phone number removed for privacy***
     
    Give it a try - the access token is limited scope so no problem sharing and it should be good for about an hour from posting this.
     

    FWIW, when I try to view these files in the box UI, I see the same problem with multiple PDFs. In fact, I have yet to see a preview work at all anywhere. Which is weird because it seems like it would be a file problem or local problem (or both).

    C
    Forum|alt.badge.img

    Ha! it thought my file id was a phone number...

     

    File ID, no spaces:

    2480
    7526
    8002
    C
    Forum|alt.badge.img

    Maybe a permissions problem?  I'm seeing "This document may be protected": https://app.box.com/s/ij5w2f8soy5fc2tpxsxsgyg8lmuj1u71

    C
    Forum|alt.badge.img

    Are you able to open that file with a native PDF viewer? (Preview on mac, Adobe Reader, etc). The file is only 53 bytes when downloaded and doesn't open with any PDF viewer for me.

    C
    Forum|alt.badge.img

    I'm having the same issue with a bunch of photos that I've loaded into box. It gives me that same error, and I can't access or view my photo any more. I can't load them into any documents, can't download them, can't see them if I refresh the page. The names of the titles are intact, but otherwise, I can't tell what they are and they're as good as lost!  

    Anybody know how to get around this? I've lost so many photos because I trusted box to store them...

    C
    Forum|alt.badge.img

    Temporarily changing DNS from OpenDNS to 8.8.8.8 worked for my situation with the same error:  "We're sorry, the preview didn't load. Please refresh the page."

    The list of PDF's appeared, however none would download.

    Terms & ConditionsCookie settingsAccessibility statement