box / box-content-preview Goto Github PK
View Code? Open in Web Editor NEWJavaScript library for rendering files stored on Box
Home Page: https://developer.box.com/docs/box-content-preview
License: Other
JavaScript library for rendering files stored on Box
Home Page: https://developer.box.com/docs/box-content-preview
License: Other
Is there a way to change the base url?
For example, instead of https://api.box.com
can I configure box-content-preview to make its requests to https://[MY-DOMAIN]/api/box
?
Let me explain my use case. We have a multi-tenant app. We allow tenants to bring their own domain. We've automated many of the setup steps, but one of the remaining steps is to login to the Box dev console and add the domain for CORS (AFAICT there isn't a way to programmatically update this list). The list is fairly long list and the process is error prone.
If I could route box-content-preview requests to my backend and proxy to https://api.box.com/2.0/
CORS would no longer be in play.
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Environment:
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
the height of the container be responsive as the height of the windows.
What went wrong? (Screenshots can be helpful here)
the height of the content preview is only 246px
Link to application or sample code:
https://github.com/hearttang/box-ui-element/blob/master/templates/contentPreview.pug
If relevant, link to file (or attach file here):
We should not upgrade to Shaka 2.2+ until this issue is fixed: shaka-project/shaka-player#991 . It breaks subtitles on Safari.
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Environment:
Steps to reproduce the problem:
// Programmtically focus on the viewer after it loads
if (this.viewer && this.viewer.containerEl) {
this.viewer.containerEl.focus();
}
What is the expected behavior? (Screenshots can be helpful here)
I don't want to focus on the viewer after it loads, so could you please
provide a method or param to prevent focus automatically in source code.
What went wrong? (Screenshots can be helpful here)
Link to application or sample code:
If relevant, link to file (or attach file here):
Documentation seems to be missing some of the data. One of the missing data that i've been able to find is Listener
assetsloaded
.
Environment:
Steps to reproduce the problem:
What is the expected behavior?
The box-content-preview library should work when is concatenated with another JS
What went wrong?
At the moment when the library its concatenated with other ones show this message
We're using your library in our project. In dev mode we're including all files listed and works just fine.
But when we build for production, our process takes all JS and minifies and concat all files in a single one (builtApp.js)
At this point, there is a check (https://github.com/box/box-content-preview/blob/master/src/lib/util.js#L603) for a <script... src=".../preview.js...
that give us the error
We're trying to sort this issue out by adding dependencies directly to our index.html pointing CDN but we would like to know why is that check, why do you expect to have it like that; maybe we can do some changes and minification would work on this project
Environment:
Steps to reproduce the problem:
Expected behavior: When I call preview.disableHotkeys();
, search in document shouldn't work.
Actual behavior: Search works.
Due to #521, we can't use our regular build chain with this, so we're having trouble with integrating code that uses this into our test suite.
Can you suggest a way for us to set up our karma.conf
so that Box.Preview
is available at test time?
Preferably without having to re-fetch preview.js from the network with every test run.
Or is there a mock implementation of Box.Preview we should load instead?
For example, what happens if 100 users will simultaneously preview a content in 1 second?
With #328 Preview now supports a well-formed file object in show(). Preview's collection and updateCollection
should also support well-formed file objects so navigation can happen those files.
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Environment:
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
Subtitles should be unaffected by change in video/audio track
What went wrong? (Screenshots can be helpful here)
Subtitles change. For example, if I was on originally english subtitles, and then select french subtitles, switching audio track or video quality resets to english subtitles again. I'm not sure if this is because it was the previous language, or if it's the default language, or if it's the first language in the menu. The menu will still say French in this case, but the subtitles shown will actually be English. Need to investigate more.
If relevant, link to file (or attach file here):
https://cloud.box.com/s/8v69y8k7awf7re56awe9d6lqf5zx56ut
.tif files fail to load because of ImageBaseViewer.setOriginalImageSize
#338 should fix this by emulating the old behavior of continuing to load the UI even if the original dimensions could not be found
I created a pen https://codepen.io/ovvn/pen/qVzvNO where it works fine.
But the same code doesn't work at https://idecisiongames.com/u/0/test-box
There're no CORS errors in chrome console. Added these to allowed origins:
Environment:
Steps to reproduce the problem:
What is the expected behavior?
What went wrong?
offsetParent is not set -- cannot scroll
Link to application or sample code:
https://codepen.io/brian17han/pen/rpMVbo
Our use case
We're embedding the Box Content Preview in our product and running into a problem. If the element passed to the previewer is attached to the dom, but initially hidden, the previewer (once shown) will be visible, but the document is not. The error "offsetParent is not set -- cannot scroll" appears in the console. If the window is resized or the previewer's zoom controls are used, the document will usually appear. A similar no-render occurred when we had previously tried using an embed link in a non-visible iframe. Has anyone else run into this? Everything works fine if the initial state of the element is visible, but loading a Box document that is not immediately shown is a common use case for us. Are there any workarounds?
Preview doesn't work showing the error
Using the assets https://cdn01.boxcdn.net/platform/preview/1.30.0/en-US/preview.css and https://cdn01.boxcdn.net/platform/preview/1.30.0/en-US/preview.js
Getting an access token for an app user as follows:
user = sdk.getAppAuthClient 'user', userID
user._session.getAccessToken()
.then (token) ->
res.json {token}
But when I try to use the access token in the preview, it doesn't show any preview saying "We're sorry, the preview didn't load. Please refresh the page."
If I generate a token from an enterprise user, everything works fine:
enterpriseClient = sdk.getAppAuthClient 'enterprise', enterpriseID
enterpriseClient._session.getAccessToken()
.then (token) ->
res.json {token}
When I went digging a little to find out how I might update a token, I found that there's already a method to do this, complete with documented parameters and types. But that wasn't on https://developer.box.com/docs/box-content-preview or in the preview.js
you direct people to load (since that's minified), it was only because I was stumbling around in the GitHub sources that I saw it.
Please make this API documentation (that you've already written!) more discoverable from the Box Developers site. Thanks!
Code used
var preview = new Box.Preview();
preview.show('<file-id>', '<acess_token>', {
container: '.preview-container',
showDownload: true
});
Files were imported using cdn https://cdn01.boxcdn.net/platform/preview/1.20.1/en-US/preview.js
and css also.
Preview for PDF file
An icon appears with text message PDFJS is not defined
. (Please note same code is working for an image file)
Environment:
Steps to reproduce the problem:
What is the expected behavior?
Is it possible somehow to make it looks like PDF preview. I mean every slider on own slide. E.g.
[slide 1]
[slide 2]
[slide 3]
Instead of <[slide 1]>[slider 2][slide 3]
There is a possibility to do same with Viewer.js (crocodoc), but it will be deprecated soon.
Thanks
On mobile (iOS), zooming by pinching with your fingers is not smooth at all. The preview zooms but it happens in a very jerky motion. This happens in my app as well at the official demo (https://codepen.io/box-platform/pen/rmZdjm).
This wasn't happening in the old Crocodoc viewer but we recently migrated to this new one and noticed it.
Hi,
Some of our users are getting an error from the load event listener about 10 times a day each.
These files are either pdfs or word files.
Environment:
I added logging to the error result to see what the issue is but it's seems generic.
I looked through the code and the error_refresh
message is shown after the file failed to load.
It looks like that message appears after a failed fetch from the loadFromServer
function.
Is there any reason why files would failed to load so many times a day?
Or any pointers to look at to track down the issue?
Below is the output from the load event listener.
Thanks
{
"error": "We're sorry, the preview didn't load. Please refresh the page.",
"metrics": {
"locale": "box-viewer",
"event": "preview",
"browser": {
"name": "Chrome",
"swf": false,
"svg": true,
"mse": true,
"webgl": true,
"mp3": true,
"dash": true,
"box3d": true,
"h264": {
"baseline": true,
"main": true,
"high": true
}
},
"client": {
"name": "box-content-preview",
"version": "1.24.0"
},
"converted": true,
"cache": {
"hit": false,
"stale": false
},
"time": {
"conversion": 0,
"rendering": 220,
"total": 220
},
"count": {
"success": 1,
"error": 2,
"navigation": 0
}
},
"file": {
"id": "269035XXXXX"
}
}
Hello,
First off, thanks for your hard work on this JavaScript library. I wanted to know if making the find bar optional is something you'd consider? The reason for such a change is we're using this library to display a PDF that spans the height of the page rather than in a container element. In trying to achieve this, we removed the preview.css stylesheet from our code and overwrote a few styles. The last change involves disabling the "findBar" functionality since we need the scrollbar to happen along the page window and not the container element. I also noticed this library disables the browers native "search bar" which we'd be fine using if we could turn off the "findBar" functionality which disables it. So to do this, I've forked your library and made turning off the "findBar" optional -- default true. It would be used like:
preview.show(..., { useFindBar: false })
Here's a link to those code changes which I can turn into a pull request if this seems like a change you'd accept. Otherwise, let me know if there's an alternate route I can take to achieve this.
Thanks!
George
Environment:
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
It should display the document.
Here an example of the drawing object with which is not loading the Content Preview.
What went wrong? (Screenshots can be helpful here)
It displaying the following message
Something to mention is that document is available for download, but not displaying on preview.
Environment:
Steps to reproduce the problem:
.md
A list of ordered items:
1. List item number one
1. List item number two
1. List item number three
* Item 4
* Item 5
What is the expected behavior? (Screenshots can be helpful here)
It is expected that the ordered list's list-style-type
is decimal
. Example:
What went wrong? (Screenshots can be helpful here)
The items of the ordered list are rendered as bullet points:
Link to application or sample code:
The reason for this behaviour seems to be the following entry in the preview.css
file:
Can the list-style-type
be changed to decimal
for .bp-text-plain ol
or maybe introduce a new class for the markdown context?
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial
branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/
.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Getting the three warnings when previewing a box content:
The SSL certificate used to load resources from https://cdn01.boxcdn.net will be distrusted in M66. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.
The SSL certificate used to load resources from https://api.box.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.
The SSL certificate used to load resources from https://public.boxcloud.com will be distrusted in M70. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more informatio
Environment:
Steps to reproduce the problem:
cmd + f
to get the find boxWhat is the expected behavior? (Screenshots can be helpful here)
What went wrong? (Screenshots can be helpful here)
Clicking the close x triggers a error in console "Cannot read property 'value' of undefined". The find box then does not go away.
Arrows and finding the search term is working properly. Only issue with the close button. I first started interacting with this at v1.24.0 and have seen this problem since then.
I am using the CDN browser link so don't know this for sure but I am guessing the error is thrown at line 389 of src/lib/viewers/doc/DocFindBar.js if thats any help.
Environment:
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
PDF's should all load at the same time
What went wrong? (Screenshots can be helpful here)
Not all PDF's load, some error out. Which PDF's load and don't seems to be totally arbitrary.
Link to application or sample code:
The main code that calls everything is:
for (var fileName in allFiles) {
fileNames.push(allFiles[fileName]);
var preview = new Box.Preview();
preview.show(allFiles[fileName], ACCESS_TOKEN, {
container: '.x' + allFiles[fileName],
header: 'none',
});
}
If relevant, link to file (or attach file here):
yarn run functional-tests
doesn't work unless I start a Python web server separately. FYI @jeremypress
Is there any way to use getVersions API, that user can switch between versions of a particular file?
Hello guys,
great work but Can we use this library for rendering files NOT stored on Box ?
I have some base64 files and would love to use this awesome library to render my files...
Thank you
Is there a way to start the preview with a search already initiated? I would like to show a preview from a search result, and show the document with the search term searched in the doc when it opens.
It's a common use case for platforms and web applications to prefetch/preload data but not have them visible to the user. For example, we want to load multiple ContentPreview
instances ahead of time and only log an actual preview event when the user interacts/sees the preview element on the page.
For this, we need to actually suppress the current Preview logging that happens out of the box, and talking with Tony, it should be fine since content access is always logged. Furthermore, we'd need a way to log the preview event for the content after user has interacted with it in some way.
[reposting from https://community.box.com/t5/Box-Developer-Forum/hosting-the-Content-Preview-SDK/m-p/49805 at the request of the moderator there]
The documentation at https://developer.box.com/docs/box-content-preview says
You can self-host the Preview UI Element or reference the versions hosted on the Box CDN.
but when I tried to use a copy I had saved locally, it failed on findScriptLocation
. Apparently it depends on its name being hard-coded? And in the comment where it calls findScriptLocation, it refers to using that as a base for "all preview assets."
Does that mean there are other assets I'd have to host as well, in addition to the two files preview.js and .css?
Using our hosts would avoid adding exceptions to our security policy.
When viewing many files in succession, there is often a long delay while a file loads. Network issues aside, is there any way to preload files? When looking through the source, it seems there is some mention of this, but I couldn't get anything to make a noticeable difference in loading time.
What would your recommendations be here? Would also be glad to make a PR if necessary.
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Environment:
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
the icon should be change to 'bp-exit-fullscreen-icon'
What went wrong? (Screenshots can be helpful here)
Link to application or sample code:
If relevant, link to file (or attach file here):
Looks like "preview.print()" method is not working.
Environment:
Preview version: 1.8.0
Browser name and version: Chrome
Operating system: Windows 10
Steps to reproduce the problem:
Load Preview
Click "Print" icon in Box header
What is the expected behavior?
Print popup has to shown.
What went wrong? (Screenshots can be helpful here)
Instead print popup, its takes me to 404 page. (Tried same with Box codepen example too, print method behaves same. )
Environment:
On the left, the document shows as expected, on the right is after refreshing document.
I have narrowed this issue down to the DocLoader.js. Specifically the following code:
/**
* Chooses a representation. Assumes that there will be only
* one specific representation. In other words we will not have
* two png representation entries with different properties.
*
* @param {Object} file - Box file
* @param {Object} viewer - Chosen Preview viewer
* @return {Object} The representation to load
*/
determineRepresentation(file, viewer) {
let repOverride;
// For PDF files, use original rep unless PDF rep is successful since it'll be faster
const rep = super.determineRepresentation(file, viewer);
const status = RepStatus.getStatus(rep);
if (file.extension === 'pdf' && rep.representation === 'pdf' && status !== STATUS_SUCCESS) {
repOverride = getRepresentation(file, ORIGINAL_REP_NAME);
}
return repOverride || rep;
}
Load document the first time - code defaults to the ORIGINAL represenation since the PDF representation is PENDING. It seems like the PDF representation is always pending till we open the document the first time
// This always works
{
"content": {
"url_template": "https://dl.boxcloud.com/api/2.0/files/283946684422/content?preview=true&version=298749103078"
},
"representation": "ORIGINAL",
"status": {
"state": "success"
}
}
Reload document and the PDF represenation is available i.e SUCCESS - code loads that and this is the representation that is wonky
// This doesn't always work
{
"representation": "pdf",
"properties": {},
"info": {
"url": "https://api.box.com/2.0/internal_files/283946684422/versions/298749103078/representations/pdf"
},
"status": {
"state": "success"
},
"content": {
"url_template": "https://dl.boxcloud.com/api/2.0/internal_files/283946684422/versions/298749103078/representations/pdf/content/{+asset_path}"
}
}
The base index.html file for the preview has invalid HTML markup. Their are two (and unclosed <body>
tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box Content Preview</title>
<link rel='stylesheet prefetch' href='https://cdn01.boxcdn.net/platform/preview/1.19.1/en-US/preview.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="preview-container"></div>
</body>
<script src='https://cdn.polyfill.io/v2/polyfill.js?features=es6,Intl'></script>
<script src='https://cdn01.boxcdn.net/platform/preview/1.19.1/en-US/preview.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Downscoped tokens only live for about an hour.
So when viewing a long video — especially if you pause it for a while and come back later — the viewer stops with an error message, and the load
event handler is sent an error like this:
Shaka error. Code = 1001, Category = 1, Severity = 2, Data = https://public.boxcloud.com/api/2.0/internal_files/269427057885/versions/283639980141/representations/dash/content/audio/0/292.m4s?access_token=1!big...Long...token&box_client_name=box-content-preview&box_client_version=1.24.0,401,,[object Object]
when Shaka's request for that next audio or video segment is denied with a 401 response.
(The players for other document types may have similar issues, but video is the one we're running into this issue with on a daily basis.)
To address this we need a few things:
updateToken
method. Also, accessToken
may be a Promise-returning function, in which case it might not need to do updateToken
at all, just re-get using the already provided generator.I'm sure it's been asked, but is there a way to drag/move the pdf once it's resized above the available bounds of the container? Similar to how images work when scaled up in the viewer.
Environment:
Steps to reproduce the problem:
What is the expected behavior? (Screenshots can be helpful here)
Load audio for presentation.
What went wrong? (Screenshots can be helpful here)
Just displaying the presentation. Is there a way to reproduce the audio on content preview? or those are not supported files?
Environment: ALL
Does this support downloading file assets and viewing them offline as the previous viewerJS did .
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Environment:
Steps to reproduce the problem:
What is the expected behavior?
Video switches streams and continues
What went wrong?
The video freezes and never recovers.
This is a shaka-player bug. See shaka-project/shaka-player#992 . When this is fixed, we should try to upgrade, but we also need to watch out for #360
I'd like to use just preview.js via npm/yarn but without React. Do you have any plans to provide an npm package of just box-content-preview?
Is it possible to load all HTML of a document so we can cache it and use offline on the device?
I see that slides of content preloading HTML dynamically.
Thanks
Please fill out the following template so we can reproduce and fix your issue as quickly as possible!
Environment:
Steps to reproduce the problem:
preview.enableViewers('Office');
to enable the Office viewer.What is the expected behavior? (Screenshots can be helpful here)
The XLSX file should be previewed in the Office viewer
What went wrong? (Screenshots can be helpful here)
Error in console: openExcelOnlinePreviewer?fileId=206681973542:3 GET https://cdn01.boxcdn.net/webapp_assets/integration/css/undefined 404 (Not Found)
Error originates from the iFrame: https://app.box.com/integrations/officeonline/openExcelOnlinePreviewer?fileId=206681973542
Link to application or sample code:
preview.show(fileId, accessToken, {
container: '.preview-container',
header: 'none',
logoUrl: '/static/images/icons/icon-72x72.png',
showAnnotations: true,
showDownload: true
});
If relevant, link to file (or attach file here):
Tried with multiple XLSX files. None seemed to work.
Monthly budget.xlsx
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.