ReboFilesDocs
Empezar3
Qué es ReboFiles
Primeros pasos
Demos para ejecutar
Ponlo en tu app6
Componente de React
Headless: tu propia interfaz
Sin framework
Estilos y temas
Teclado y accesibilidad
Idiomas
Archivos9
Subidas
Vistas previas y el visor
Búsqueda
Cambios en vivo y carpetas grandes
Comentarios
Destacados y campos
Versiones, papelera y espacio
Descargar como .zip
Documentos de Word
El servidor14
La ruta
Frameworks e inicio de sesión
Quién puede hacer qué
Almacenamiento: S3, GCS, Azure y disco
Revisar las subidas
Metadatos: SQLite y Postgres
Esquema de la base de datos
Compartir y enlaces
Actividad y notificaciones
Ganchos, registros y límites
Retención, bloqueos y exportación
Escritorio y otros orígenes
Sincronizar una carpeta
Ir a producción
En equipo1
Asistentes de IA (MCP)
Referencia5
Paquetes
Componentes y hooks
API del cliente
Rutas HTTP
Estado y hoja de ruta
↑↓ para moverte↵ para abrirEsc para cerrar38 páginas

Archivos Vistas previas y el visor

Vistas previas y el visor

Los detalles muestran un archivo en pequeño; un doble clic o Enter lo muestra entero, sobre el drive, con ← y → para pasar al siguiente.
Tipos

Qué se muestra

TipoEn los detallesEn el visor
ImágenesLa copia más pequeña que lo llenaAjustada a la ventana, un clic para el tamaño real
Documentos de WordTítulo y primeros párrafos, o la primera páginaPágina a página, o todas; el zoom de Rebodocs; imprimir
PDFSu primera página, por el navegadorEl del propio navegador
Vídeo, audio—Se reproduce
Libros de Excel (.xlsx)Sus primeras filas, en su tarjetaCada hoja como una tabla
Texto, Markdown, CSV, JSON, códigoEl comienzoEntero, hasta un tamaño
Copias

Imágenes en cuatro tamaños

Al subir una imagen, la página hace copias de ella para los tamaños de los ajustes del drive, en JPEG salvo que se diga que conserve el tipo; el original queda tal como llegó.

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 } },
});

La cuadrícula lee la de 160 o la de 480, los detalles la de 480, el visor la de 2048; download?size= da la más pequeña que muestra una imagen a un tamaño.

Placeholder

Difuminadas mientras llegan

Una copia diminuta de cada imagen, de 16 píxeles en su lado más largo y unos cientos de bytes como URL data:, se guarda con su versión. La cuadrícula, los detalles y el visor la muestran difuminada donde estará la imagen, debajo de ella, hasta que llega. De un documento de Word, lo mismo de su primera página.

Caché

Direcciones válidas durante una hora

Una dirección para mostrar un archivo en la página se firma desde el comienzo de la hora, igual durante toda ella y válida durante dos, con Cache-Control: private, max-age=7200: el navegador conserva una miniatura que ya leyó. Una cuadrícula pide todas sus direcciones en una sola petición (POST /urls), y una que caducó se vuelve a pedir.

derive

Hechas por el servidor

Lo que no viene de una página (un asistente, una sincronización, un script), y lo que ninguna página hace (la primera página de un PDF): lo hace el servidor un momento después de guardarlo.

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(): una imagen en los tamaños del drive, nunca mayor que ella, y su placeholder, con sharp.
  • pdf(): la primera página de un PDF dibujada, y el texto de sus primeras cincuenta páginas para la búsqueda, con pdfjs-dist y @napi-rs/canvas.
  • docx(), xlsx() y text(): lo que tiene escrito un documento de Word, con Rebodocs, las celdas de un libro de Excel y un archivo de texto.
  • video(), dado a deriveAll(…): un fotograma de un video en los tamaños del drive, con ffmpeg.

La página dice lo que hace ella misma, y el servidor hace solo el resto; cada biblioteca se pide al necesitarla, así que solo se instala lo que se usa. La página muestra lo que llega, como lo avisan los eventos.

OCR

Lo que dicen las imágenes

La foto de un recibo, un contrato escaneado: encontrados por sus palabras, leídas por Tesseract. No está entre lo que hace deriveAll() si no se da, porque la primera vez descarga los datos de un idioma.

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() lee una imagen, y las primeras páginas de un PDF sin texto propio (después de pdf(), que lee los que sí lo tienen). langPath y cachePath dicen de dónde vienen y dónde se guardan los datos de cada idioma.