Files Previews and the viewer

Previews and the viewer

The details show a file in small; a double click or Enter shows it whole, over the drive, with ← and → to the next.

Kinds

What is shown

Kind	In the details	In the viewer
Pictures	The smallest copy that fills it	Fit to the window, a click for the actual size
Word documents	Title and first paragraphs, or the first page	Page by page, or all; Rebodocs’ zoom; print
PDF	Its first page, by the browser	The browser’s own
Video, audio	—	Played
Excel workbooks (.xlsx)	Its first rows, on its card	Each sheet as a table
Text, Markdown, CSV, JSON, code	The start of it	Whole, up to a size

Renditions

Pictures in four sizes

As a picture is uploaded, the page makes copies of it for the sizes of the drive’s settings, as JPEG unless it says to keep the type; the original stays as it came.

createDriveHandler({
  ...options,
  // Or from the settings of the drive, under Pictures.
  settings: { images: { enabled: true, sizes: [160, 480, 1024, 2048], format: 'jpeg', quality: 0.85 } },
});

The grid reads the 160 or the 480, the details the 480, the viewer the 2048; download?size= gives the smallest that shows a picture at a size.

Placeholder

Blurred while they come

A tiny copy of each picture, 16 pixels on its longest side and a few hundred bytes as a data: URL, is kept with its version. The grid, the details and the viewer show it blurred where the picture will be, under it, until it has come. Of a Word document, the same of its first page.

Cache

Addresses good for an hour

An address to show a file in the page is signed from the start of the hour, the same all of it and good for two, with Cache-Control: private, max-age=7200: a browser keeps a thumbnail it has read. A grid asks for all of its addresses in one request (POST /urls), and one that went out of date is asked for again.

derive

Made by the server

What comes from no page (an assistant, a sync, a script), and what no page makes (a PDF’s first page): made by the server a moment after it is kept.

import { createDriveHandler } from '@rebofiles/server';
import { deriveAll } from '@rebofiles/server/derive';

// npm install sharp pdfjs-dist @napi-rs/canvas   (each only for what it makes)
createDriveHandler({ ...options, derive: deriveAll() });

pictures(): a picture in the drive’s sizes, never larger than it, and its placeholder, with sharp.
pdf(): a PDF’s first page drawn, and the text of its first fifty pages for a search, with pdfjs-dist and @napi-rs/canvas.
docx(), xlsx() and text(): what is written in a Word document, with Rebodocs, in the cells of a workbook, and in a file of text.
video(), given to deriveAll(…): a frame of a video in the drive’s sizes, with ffmpeg.

The page says what it makes itself, and the server makes only the rest; each library is asked for when first needed, so only what is used is installed. The page shows what comes, as the events tell it.

OCR

What pictures say

A photo of a receipt, a contract scanned: found by their words, read by Tesseract. Not among those deriveAll() makes unless given, as it fetches the data of a language the first time.

import { deriveAll, docx, ocr, pdf, pictures, text, xlsx } from '@rebofiles/server/derive';

// npm install tesseract.js   (the data of each language is fetched once, then kept)
createDriveHandler({
  ...options,
  derive: deriveAll(pictures(), pdf(), docx(), xlsx(), text(), ocr({ languages: ['eng', 'spa'] })),
});

ocr() reads a picture, and the first pages of a PDF with no text of its own (after pdf(), which reads those that have it). langPath and cachePath say where the data of each language comes from and is kept.