File storage

WebViewer Collaboration does not handle file storage for a couple of reasons:

Security & Privacy - Your files should stay internal to your application and should not be touched by a third party server
Flexibility - There are thousands of ways to store files in an application, and many applications already have a file storage system in place. We do not want to lock you in to one specific provider or force you to change providers.

What does this mean?#

This means that file storage must be implemented separately from WebViewer Collaboration. You must store your users files somewhere like Amazon S3, Google cloud storage, Azure cloud storage, or even directly on your server. There are a ton of options to choose from and each one has advantages, so choose one that fits your use case the best!

This also means that you must be able to reference and recall these files when necessary. Our recommended approach for this is to assign each file an ID (or use the ID provided by the Collaboration modules), and use that ID to create a link between the Collaboration Document and the actual document on your storage provider.

This way, when you need to view a document, you can use that documents ID to grab the file from your storage provider.

Example#

This example uses the document ID created by the database to use as a reference when uploading to cloud storage.

import CollabClient from '@pdftron/collab-client'

const client = new CollabClient({ ...options });
const user = await client.loginAnonymously('Logan');

// This function will handle the case where a user uploads a file/blob to your application
const onFileUploaded = async (blob) => {

  const document = await user.createDocument({
    document: blob,
    name: 'myfile.pdf',
  });

  // This is your own function that takes the document id and the blob and uploads to cloud storage.
  // The name of the file could be the document ID (see the image above)

  // For example, if the document.id was '1', 
  // this would upload the file to 'https://my-storage-provider.com/files/1.pdf'
  await uploadFileToCloudStorage(document.id, blob)
}

const documents = await user.getAllDocuments();
const docToLoad = documents[0];

// To load a file, we use the documents ID to generate the path to the file
// on our cloud storage proider
docToLoad.view(`https://my-file-provider.com/files/${docToLoad.id}.pdf`)