John IT

Add my own Document Previewer: How to start

Discussion created by John IT on Apr 29, 2018
Latest reply on Apr 30, 2018 by Stefanie Sanders

We have a locally hosted free Canvas LMS (meaning download and installed on our web server from github), so we don't have the document previewer instructure provides to subscribers. Now I'm giving the task to add a document previewer of our own for PDF, MS Office (docx, pptx, xlsx) and also audio and video files (mp3, mp4, flv, mov, mpeg, avi). I'm totally new about this, and was wondering if somebody here could help me out on how to start.


As far as I know there are two places in Canvas I need to work on: 1. the file; 2. the page

1. the file: we are expecting when clicking on a file in a folder, a pop-up window appears to show the preview. Currently there is the window but always saying "No preview is available". The URL shows it is a link for preview though, like .../courses/18/files?preview=11905 (why?).

2. the page: we are expecting that when a teacher embeds a file into a course page, the file can be previewed (maybe automatically, maybe adding a magnifier icon for user to click). 


Suppose we use a simple way: call the interfaces provided by some 3rd-party preview web service provider. We will need to upload the file (because most of them need a public access of a course file which is inaccessible without login) to the provider or at least send the file URL to the provider (we may need to put our file to a cache first to make it public accessible). How to start with this:

a. am I supposed to write a Javascript, upload it to theme editor, to detect file url, redirect request to the preview web service, then display the response? Or

b. I have to implement it as a LTI provider application as the bridge between our Canvas and the preview service? Or

c. I have to write some app by using Canvas's open API to serve as the bridge in between, transferring files and responses back and forth?

Those are all the way I know, probably none of them is even close, but please help me out. Thanks!